Question

我必须输入每个从jquery datepicker接收日期的框。现在我正在尝试从第一个输入验证日历，不允许过去几天不再存在的前一个日期。

参考这个问题，我在“numberOfMonts”下添加了以下代码，它发生如下：

minDate: 0,

我根据需要选择“从”日期，但是当点击“到”日期时，我仍然可以在“来自”字段的当前所选日期之前选择日期。

希望你能从我的snippet here

中理解

这是我没有验证的代码。如何正确验证日历以不选择旧日期？

这是我的完整JS：

jQuery(document).ready( function(){
    $("ul").on("click", ".init", function() {
      $(this).closest("ul").children('li:not(.init)').toggle();
  });
  var allOptions = $("ul").children('li:not(.init)');
  $("ul").on("click", "li:not(.init)", function() {
    allOptions.removeClass('selected');
    $(this).addClass('selected');
    $("ul").children('.init').html($(this).html());
    allOptions.toggle();
    console.log($('.selected .value').text());
  });
    var txtFromDate, txtToDate;
  $("#txtFrom").datepicker({
    dateFormat: "d/M/yy",
    numberOfMonths: 1,
    minDate: 0,
    onSelect: function(selected) {
      txtFromDate = selected;
      var dt = new Date(selected);
      dt.setDate(dt.getDate() + 1);
      $("#txtTo").datepicker("option", "minDate", dt);
    }
  });
  $("#txtTo").datepicker({
    numberOfMonths: 1,
    defaultDate: "+1w",
    onSelect: function(selected) {
      txtToDate = selected;
      var dt = new Date(selected);
      dt.setDate(dt.getDate() - 1);
      $("#txtFrom").datepicker("option", "maxDate", dt);
    }
  });

  $('a#atributo').click(function() {
     var monthNames = [
        "Jan", "Feb", "Mar",
        "Apr", "May", "Jun", "Jul",
        "Aug", "Sep", "Oct",
        "Nov", "Dec"
      ];

    var date1 = $("#txtFrom").datepicker('getDate'),
        day_1  = date1.getDate(),  
        month_1 = date1.getMonth() + 1,              
        year_1 =  date1.getFullYear();

    var date2 = $("#txtTo").datepicker('getDate'),
        day_2  = date2.getDate(),  
        month_2 = date2.getMonth() + 1,              
        year_2 =  date2.getFullYear(); 


    var people = $('#search-pax :selected').val();

    $(this).attr("href", "http://www.lekkeslaap.co.za/akkommodasie-in/"+where+"?q="+where+"&start="+day_1+"+"+monthNames[month_1]+"+"+year_1+'&end='+day_2+'+'+monthNames[month_2]+'+'+year_2+'&pax='+people);
  });
});

如何正确验证日历

提前致谢

Answer 1

试试这个JS：

$(document).ready(function () {

  $("#dt1").datepicker({
    dateFormat: "dd-M-yy",
    minDate: 0,
    onSelect: function (date) {
      var dt2 = $('#dt2');
      var startDate = $(this).datepicker('getDate');
      var minDate = $(this).datepicker('getDate');
      dt2.datepicker('setDate', minDate);
      startDate.setDate(startDate.getDate() + 30);
      //sets dt2 maxDate to the last day of 30 days window
      dt2.datepicker('option', 'maxDate', startDate);
      dt2.datepicker('option', 'minDate', minDate);
      $(this).datepicker('option', 'minDate', minDate);
    }
  });
  $('#dt2').datepicker({
    dateFormat: "dd-M-yy"
  });
});

示例html可能如下所示：

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">
<label for="from">From</label> <input type="text" id="from" name="from"/> <label for="to">to</label> <input type="text" id="to" name="to"/>

Answer 2

// Change inside onSelect as follow :
$("#txtFrom").datepicker({
    dateFormat: "d/M/yy",
    numberOfMonths: 1,
    minDate: 0,
    onSelect: function(selected) {
        $('#txtTo').datepicker('option', {
            minDate: $(this).datepicker('getDate')
        });
    }
});

jquery minDate无法进行日期验证

2 个答案: