設置驗證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

回答

相關問題