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

好吧，我有这个问题。我有两个日期选择器，一个是开始日期和另一个结束日期。设置验证2 Datepicker开始日期和结束日期javascript

我想执行一个JavaScript验证，结束日期不能小于开始日期so.eg如果用户单击开始日期并选择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>

任何帮助表示赞赏。

来源

2015-04-22 Kingsley Simon

添加了一个小提琴文件也许你可以帮我解决这个问题吗？ –

尝试类似下面

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希望这有助于

来源

2015-04-22 10:37:50

谢谢安托国王，但你的演示不起作用 –

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

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

这会为你工作。

来源

2015-04-22 10:43:00

谢谢代码爱好者，但你的答案不工作 –

http://jsfiddle.net/boyfunky/oqxxmrru/我有一个小提琴文件也许你可以帮我解决这个问题吗？ –

您还没有在小提琴中添加库。并且字段名称不正确。你可以在这里看到工作示例：http://jsfiddle.net/f7j6kn3b/ –

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

回答

相关问题