Question

好的，我有这个问题。我有两个日期选择器，一个是开始日期，另一个是结束日期。

我希望执行javascript验证，其中结束日期不能小于开始日期所以如果用户点击开始日期并选择2015年4月2日，那么当用户点击结束日期时，它会自动显示日期日历不小于开始日期。

我正在附上我的plunkr代码。 http://plnkr.co/edit/nsf6o2hlYrt3pFfJCFn2

javascript.js

$(document).ready(function(){

$('#activity-customer-start-period').datepicker({
    format: 'dd M yyyy', 
    autoclose: true,
    minDate: 0,
    onSelect: function(selected) {
        console.log(selected)
      $("#activity-customer-end-period").datepicker("option","minDate", selected);
    }
  });

  $('#activity-customer-end-period').datepicker({
    format: 'dd M yyyy', 
    autoclose: true,
    onSelect: function(selected) {
        console.log(selected)
      $("#activity-customer-start-period").datepicker("option","maxDate", selected);
    }
  });

})

的index.html

<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <h5>Start Time </h5>
    <input id="activity-customer-start-period" name="start_period" placeholder="" type="text">
    <br/>
    <h5>End Time</h5>
    <input  id="activity-customer-end-period" name="end_period" placeholder="" type="text">
  </body>

</html>

任何帮助表示赞赏。

Answer 1

尝试以下内容

HTML部分：

<div class="start_date"></div>
<div class="end_date"></div>

JS部分：

 var dates = jQuery('.start_date, .end_date').datepicker("option", "onSelect", 
   function(selectedDate){
       var $this = $(this),
           option = $this.hasClass("start_date") ? "minDate" : "maxDate",
           adjust = $this.hasClass("start_date") ? 1 : -1,
           base_date = new Date(selectedDate),
           new_date = new Date();

       new_date.setDate(base_date.getDate() + (1 * adjust));
       dates.not(this).datepicker("option", option, new_date);

   }
);

Demo希望这会有所帮助

Answer 2

您需要在结束日期字段中添加以下选项。

minDate: $('#activity-customer-start-period').val(),

这样做：

*$('#activity-customer-end-period').datepicker({
    format: 'dd M yyyy', 
    autoclose: true,
    minDate: $('#activity-customer-start-period').val(),
    onSelect: function(selected) {
        console.log(selected)
      $("#activity-customer-start-period").datepicker("option","maxDate", selected);
    }
  });

这对你有用。

设置2个Datepicker开始日期和结束日期的验证javascript

2 个答案: