0

我有一个标记为我的毕业生的日期选择器。我如何限制我的日期选择器超出当前日期。或者。我如何限制用户不选择未来的日期。还有一个验证选择的日期“dateTo”将大于“dateFrom”

这是我的html代码

<label>Year Graduated from</label>
   <input id="dateFrom" type="date">
<label>Year Graduated to</label>
       <input id="dateTo" type="date">

这是我的jQuery代码

$( "#date_assigned" ).datepicker({
     showOtherMonths: true,
     selectOtherMonths: true,
     dateFormat: "mm/dd/yy"
     });
     });

 $(function() {
      $( "#date_returned" ).datepicker({
        showOtherMonths: true,
        selectOtherMonths: true,
        dateFormat: "mm/dd/yy"
         });
 });
4

2 回答 2

2

要选择日期范围，请参阅 jquery ui 页面上的优秀示例：

http://jqueryui.com/datepicker/#date-range

您可以使用minDate和maxDate选项来限制onClose每个日期选择器的可用日期和事件，以刷新另一个日期选择器上的最小/最大日期，以实现有效的范围选择。

请注意minDate并maxDate接受一系列不同的值。如果该值是一个数字，则将其理解为与今天的偏移量，即今天是零，昨天是-1，依此类推。

于 2013-09-26T01:51:08.653 回答
1

演示

$(function () {
    var dateFormat = 'dd.mm.yy';

    $("#from").datepicker({
        maxDate: '0',
        dateFormat: dateFormat,
        onSelect: function (selectedDate) {
            var date = $.datepicker.parseDate(dateFormat, selectedDate)
            var tod = date.setDate(date.getDate());
            $to.prop('disabled', false).datepicker( "option", "minDate", new Date(tod ));
        }
    });
    var $to = $("#to").datepicker({
        dateFormat: dateFormat
    }).prop('disabled', true);
});

解释

设置maxDate:'0'以便在fromid date-picker中选择没有未来的日期

to使用onSelect方法将所选日期传递给日期选择器并将其设置为日期选择器中的minDate选项，to以便to 日期始终大于from日期。

参考

http://api.jqueryui.com/datepicker/#option-maxDate

http://api.jqueryui.com/datepicker/#option-minDate

http://api.jqueryui.com/datepicker/#option-onSelect

于 2013-09-26T01:55:03.333 回答