为 2 Datepicker 开始日期和结束日期设置验证 javascript答案

【问题标题】：Set Validation for 2 Datepicker Start Date and End Date javascript为 2 Datepicker 开始日期和结束日期设置验证 javascript
【发布时间】：2015-06-29 22:35:57
【问题描述】：

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

我想要执行 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>

任何帮助表示赞赏。

【问题讨论】：

添加了一个小提琴文件也许你可以从这里帮我解决它？

标签： javascript jquery ruby-on-rails date datepicker

【解决方案1】：

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

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);
    }
  });

这对你有用。

【讨论】：

jsfiddle.net/boyfunky/oqxxmrru我有一个小提琴文件也许你可以帮我从这里解决它？
您还没有在小提琴中添加库。并且字段名称不正确。您可以在此处查看工作示例：jsfiddle.net/f7j6kn3b

【解决方案2】：

试试下面的方法

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希望对你有帮助

【讨论】：