JQuery的從開始日期datepickers-設置結束日期

有在使用中，開始日期和結束日期JQuery的從開始日期datepickers-設置結束日期

<input id="StartDate" class="datepicker setNext hasDatepicker" type="text" value="13/02/2015" name="StartDate"> 
<input id="EndDate" class="datepicker hasDatepicker" type="text" value="15/02/2015" name="EndDate">

2個Jquery的datepickers當起始日期日期選擇器選擇我想要的結束日期datepickers是起始日期+ 1天，並使其在EndDate中不能在StartDate中選擇較早的日期。

我有這樣的代碼：

$(function() { 
    $(".datepicker").datepicker({ 
     dateFormat: 'dd/mm/yy', 
     onSelect: function(selectedDate) { 
      if(this.id == 'StartDate') { 
       var minDate = selectedDate + 1; 
       $('#to').datepicker("option", "minDate", minDate); 

      } 
     } 
    }); 
});

所以它擊中ONSELECT確定，但隨後加1日期不工作（我只是得到與上年底1 datestring，因此「 31/12/20141' ）。

我也試圖在ONSELECT以下，假設selectedDate是一個字符串不是日期類型：

   var minDate = new Date(selectedDate); 
       var tomorrow = new Date(); 
       tomorrow.setDate(minDate.getDate() + 1); 
       $('#to').datepicker("option", "minDate", tomorrow);

的minDate最終是無效的日期，一樣的明天。我無法確定如何從字符串中設置日期。試着沿着這樣的方向發展：

var minDate = selectedDate.getDate();

讓我看看'Uncaught TypeError：undefined不是函數'。

使用JQuery 1.11.1，英國日期格式爲dd/mm/yyyy。

來源

2014-12-31 UglyTeapot

如果您嘗試這樣的事情會發生什麼：VAR日期2 = $（ '＃起始日期'）日期選擇器（ 'GETDATE'， '+ 1D'）;你會得到date2的有效日期嗎？ –

將字符串解析爲日期*不會使用顯示格式*，因此'dd/mm/yy'會在'new Date（selectedDate）'返回無效日期' –

如果要更改其他日期選擇器添加一天的日期選擇日期，你可以做這樣的事情：

注意即selectedDate在格式DD/MM/YYYY這不是一個有效的字符串日期格式在Date構造函數中使用。然後你可以解析它。

 var arr = selectedDate.split("/"); 
     var date = new Date(arr[2]+"-"+arr[1]+"-"+arr[0]); 
     var d = date.getDate(); 
     var m = date.getMonth(); 
     var y = date.getFullYear(); 
     var minDate = new Date(y, m, d + 1); 
     $("#EndDate").datepicker('setDate', minDate);

這裏有一個工作示例fiddle

來源

2014-12-31 12:53:24 acontell

@TrueBlueAussie嘗試示例並查看它是否有效 – acontell

我拿回來... Javascript庫瘋了:) –

@TrueBlueAussie我知道:)謝謝！ – acontell

可以使用的setDate和GETDATE。

例子：

<input id="StartDate" class="datepicker setNext hasDatepicker" type="text" value="13/02/2015" name="StartDate"> 
<script> 
function convertInputtoDate(){ 
    var input = document.getElementById("StartDate").value; 
    var date = input.split('/'); 
    var selectdate = new Date(date[2], date[1], date[0]); 

    return selectdate; 
} 
var today = convertInputtoDate(); 
var tomorrow = new Date(convertInputtoDate()); 
tomorrow.setDate(today.getDate() + 1); 
alert('Today : ' + today + ' Tommorow :' + tomorrow.toLocaleString()); 
</script>

如果要更改日期格式，請使用：

tomorrow.toLocaleString(); // output will be : d/m/Y H:M:S

和你的輸入轉換成日期：

function convertInputtoDate(){ 
    var input = document.getElementById("StartDate").value; 
    var date = input.split('/'); 
    var selectdate = new Date(date[2], date[1], date[0]); 

    return selectdate; 
}

來源

2014-12-31 13:03:57 Invicnaper

是的，但是您需要將此應用於具體問題，因爲dd/mm/yy日期格式也是一個問題。 –

可以使用tomorrow.toLocaleString（） – Invicnaper

這仍然不符合問題...您需要採取開始日期，而不是今天。嘗試完成一個JSFiddle。 –

這裏我又讓用戶只能選擇10天的時間間隔..您可以根據您的要求進行修改。。

$(document).ready(function() { 
 
    var minDate ; 
 
    var maxDate; 
 
    var mDate 
 
    var j = jQuery.noConflict(); 
 
    j("#startTime").datepicker({ 
 
    onSelect: function() { 
 
    minDate = j("#startTime").datepicker("getDate"); 
 
    var mDate = new Date(minDate.setDate(minDate.getDate())); 
 
    maxDate = new Date(minDate.setDate(minDate.getDate() + 10)); 
 
j("#endTime").datepicker("setDate", maxDate); 
 
j("#endTime").datepicker("option", "minDate", mDate); 
 
j("#endTime").datepicker("option", "maxDate", maxDate); 
 
} 
 
}); 
 
var tdate = new Date(); 
 
var ddate = new Date(tdate.setDate(tdate.getDate() + 10)); 
 
j("#startTime").datepicker("setDate", new Date()); 
 
j("#endTime").datepicker(); 
 
j("#endTime").datepicker("setDate",ddate); 
 
    });

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><div>Please Select Dates:</div> 
 
\t <p>Strat Date:<input id ="startTime" type="text" ></input></p> 
 
\t <p>End Date:<input id ="endTime" type="text" ></input></p>

來源

2017-05-26 10:14:55

JQuery的從開始日期datepickers-設置結束日期

回答

相關問題