Question

我有一个标有年度毕业生的日期选择器。如何限制我的日期选择器超过当前日期。要么。如何限制用户不要选择未来的日期。还有一个验证是所选日期“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"
         });
 });

Answer 1

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

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

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

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

Answer 2

DEMO

$(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'，以便在from ID日期选择器中选择无日期日期

使用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

Datepicker不超过当前日期

2 个答案: