Jquery：DatePicker：开始/结束日期

Jquery: DatePicker: start/end date

提问by Nick Kahn

i have looked around before posting my question

我在发布我的问题之前环顾四周

following what i am looking in my datepicker (start date and end date):

按照我在日期选择器中查看的内容（开始日期和结束日期）：

1) Start date:can be any date, (user can select start date current (now) to any future date.

1）开始日期：可以是任何日期，（用户可以选择当前（现在）到任何未来日期的开始日期。

2) Start date:user can select start date as back as 6 months. example: if today is 04/22/2010 then i can go back up to 11/22/2009but not more than 6 moths.

2)起始日期：用户可以选择起始日期为 6 个月。 例如：如果今天是 04/22/2010 那么我可以回到 11/22/2009但不超过 6 个月。

3) Start dateif the user select the start date (current of future, not past) less then 10 days then i would like to alert message saying "need at least 10 days"

3）开始日期如果用户选择开始日期（未来的当前，而不是过去）少于 10 天，那么我想提醒消息说“需要至少 10 天”

4) End date:should be current date to future dates alll previous dates are disabled.

4）结束日期：应该是当前日期到未来日期所有以前的日期都被禁用。

5) **Start date / End date: ** should not be greater than one year.

5) **开始日期/结束日期：** 不应超过一年。

Thanks so much.

非常感谢。

PS: not sure if i am asking too much here :)

PS：不确定我在这里问的是否太多:)

回答by Chris Love

I answered a similar question for a friend. He needed a cascading date similar, but I think you can see how to solve the issue if you look at my markup.

我帮朋友回答了一个类似的问题。他需要一个类似的级联日期，但我认为如果您查看我的标记，您就会知道如何解决这个问题。

HTML

HTML

  <form target="_self" action="ClearForm.aspx">

Clear Form

清除表格

• Start Date:
• End Date:
• Clear

• 开始日期：
• 结束日期：
• 清除

JS

JS

<script type="text/javascript">
$(document).ready(function () {

  $('#endDate').datepicker({ showOn: 'button',
      buttonImage: '../images/Calendar.png',
      buttonImageOnly: true, onSelect: function () { },
      onClose: function () { $(this).focus(); }
    });


  $('#startDate').datepicker({ showOn: 'button',
      buttonImage: '../images/Calendar.png',
      buttonImageOnly: true, onSelect:
        function (dateText, inst) {
          $('#endDate').datepicker("option", 'minDate', new Date(dateText));
        }
      ,
      onClose: function () { $(this).focus(); }
    });


});             

回答by Thulasiram

<input type="text" id="tbStartDate" value="" disabled="disabled" />
<input type="text" id="tbEndDate" value="" disabled="disabled" />
<script type="text/javascript">
    $(document).ready(function () {
        $("#tbStartDate").datepicker({        
            showOn: 'button',
            buttonImageOnly: true,
            buttonImage: '/Content/Calendar.png',
            buttonText: 'Click here (date)',
            onSelect: function (dateText, inst) {
                 var $endDate = $('#tbStartDate').datepicker('getDate');
                 $endDate.setDate($endDate.getDate() + 1);
                 $('#tbEndDate').datepicker('setDate', $endDate).datepicker("option", 'minDate', $endDate);
            },
            onClose: function (dateText, inst) {
                //$("#StartDate").val($("#tbStartDate").val());
            }
        });

        $("#tbEndDate").datepicker({
            dateFormat: 'dd-mm-yy',
            showOn: 'button',
            buttonImageOnly: true,
            buttonImage: '/Content/Calendar.png',
            buttonText: 'Click here (date)',
            onClose: function (dateText, inst) {
                //$("#EndDate").val($("#tbEndDate").val());
            }
        });

            var $endDate = $('#tbStartDate').datepicker('getDate');
            $endDate.setDate($endDate.getDate() + 1);
            $('#tbEndDate').datepicker('setDate', $endDate).datepicker("option", 'minDate', $endDate);
    });
</script>

回答by John Magnolia

I prefer to write a default configuration for the datepicker using a class so that it works with more than one with less duplicates.

我更喜欢使用一个类为 datepicker 编写一个默认配置，以便它可以与多个重复较少的配置一起使用。

onSelect: function(dateText, inst){
    // Check if _until exists and auto set mindate
    if(inst.id.contains("_from")){
        $("#"+inst.id.replace("_from", "_until")).datepicker("option", "minDate", dateText);
    }
}

This works assuming your form IDs are consistent. E.g I use date_until and date_from

假设您的表单 ID 一致，则此方法有效。例如我使用 date_until 和 date_from