2013-04-20 156 views
18

我想禁用當前日期之前的所有過去日期,而不是當前日期。我試圖通過引導日期選擇庫「bootstrap-datepicker」,用下面的代碼:引導日期選擇器禁用沒有當前日期的過去日期

$('#date').datepicker({ 
    startDate: new Date() 
}); 

它工作正常。但它是迄今爲止的禁用日期。

舉例來說,如果今天是04-20-2013,我通過設置startDate:new Date()來禁用過去的日期。但我可以選擇日期從2013年4月21日。

更新:我能解決這個問題如下爲UTC區:

var d = new Date(); 
options["startDate"] = new Date(d.setDate(d.getDate() - 1)); 

startDate: "+0d"

但是,當UTC是提前一天,這些方法不起作用。對於我在加利福尼亞州的客戶來說,這意味着我的客戶在下午5點不能再選擇當地的當前日期作爲有效日期。爲了解決這個問題,我暫時使用startDate: "-1d",但是當然在5之前,這意味着昨天是可見的。

現在有沒有人想出一個更好的方法,因爲我不想告訴用戶輸入UTC日期?

在此先感謝。

+0

您使用的引導2.0.4+ 的jQuery 1.7.1工作+? – 2013-04-20 17:18:32

+1

我正在使用Bootstrap v2.2.1和jQuery 1.8.1 – itskawsar 2013-04-20 17:41:22

回答

35
var date = new Date(); 
date.setDate(date.getDate()-1); 

$('#date').datepicker({ 
    startDate: date 
}); 
+0

如果未來時區將發生變化,會發生什麼? – itskawsar 2013-04-20 17:53:13

+1

我不完全確定。你可能想看看這個線程:[需要顯示使用Javascript日期對象的DST轉換的本地時間](http://stackoverflow.com/questions/7310560/need-to-display-local-times-over- dst-transitions-using-javascript-date-object) – 2013-04-20 20:36:45

+0

請檢查我更新的問題。謝謝 – itskawsar 2013-04-21 06:02:40

6

var nowDate = new Date(); 
 
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0); 
 
\t $('#date').datetimepicker({ 
 
\t \t startDate: today 
 
\t });

16

HTML

<input type="text" name="my_date" value="4/26/2015" class="datepicker"> 

JS

jQuery(function() { 
    var datepicker = $('input.datepicker'); 

    if (datepicker.length > 0) { 
    datepicker.datepicker({ 
     format: "mm/dd/yyyy", 
     startDate: new Date() 
    }); 
    } 
}); 

這將突出默認日期2015年4月26日(2015年4月26日)在日曆中ar打開並且 禁用當前日期之前的所有日期。

15

使用minDate

var date = new Date(); 
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate()); 

$('#date').datepicker({ 
    minDate: today 
}); 
+2

你是我唯一的答案。謝謝! – 2016-01-06 17:35:06

+1

爲簡單起見,使用'moment.js'就像'minDate:moment()' – 2017-02-24 07:11:26

+0

這和@SaahithyanVigneswaran應該是正確的答案。 – JohnA10 2017-05-04 16:59:26

1
<script type="text/javascript"> 
$('.datepicker').datepicker({ 
    format: 'dd/mm/yyyy', 
    todayHighlight:'TRUE', 
    startDate: '-0d', 
    autoclose: true, 
}) 
+0

你能解釋爲什麼這會起作用嗎?爲什麼它比2年前公認的答案更好? – 2015-09-11 13:44:07

2

禁用所有過去的日期

<script type="text/javascript"> 
     $(function() { 
      /*--FOR DATE----*/ 
      var date = new Date(); 
      var today = new Date(date.getFullYear(), date.getMonth(), date.getDate()); 

      //Date1 
      $('#ctl00_ContentPlaceHolder1_txtTranDate').datepicker({ 
       format: 'dd-mm-yyyy', 
       todayHighlight:'TRUE', 
       startDate: today, 
       endDate:0, 
       autoclose: true 
      }); 

     }); 
</script> 

禁用所有未來的日期

var date = new Date(); 
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate()); 

    //Date1 
    $('#ctl00_ContentPlaceHolder1_txtTranDate').datepicker({ 
     format: 'dd-mm-yyyy', 
     todayHighlight:'TRUE', 
     minDate: today, 
     autoclose: true 
    }); 
7

使用

startDate: '-0d' 

$("#datepicker").datepicker({ 
    startDate: '-0d', 
    changeMonth: true 
}); 
5

您可以使用數據屬性:

<div class="datepicker" data-date-start-date="+1d"></div> 
3

這是

<script> 
      $(function() { 
       var date = new Date(); 
       date.setDate(date.getDate() - 7); 

      $('#datetimepicker1').datetimepicker({ 
       maxDate: 'now', 
       showTodayButton: true, 
       showClear: true, 
       minDate: date 
      }); 
     }); 
    </script> 
0

禁用過去的日期只使用:

$('.input-group.date').datepicker({ 
     format: 'dd/mm/yyyy', 
     startDate: 'today' 
    }); 
0

試試:

$(function() { 
    $('#datetimepicker').datetimepicker({ minDate:new Date()}); 
}); 
1

請參閱小提琴http://jsfiddle.net/Ritwika/gsvh83ry/

**With three fields having date greater than the ** 
<input type="text" type="text" class="form-control datepickstart" /> 
<input type="text" type="text" class="form-control datepickend" /> 
<input type="text" type="text" class="form-control datepickthird" /> 

var date = new Date(); 
date.setDate(date.getDate()-1); 
$('.datepickstart').datepicker({ 
autoclose: true, 
todayHighlight: true, 
format: 'dd/mm/yyyy', 
    startDate: date 
}); 
$('.datepickstart').datepicker().on('changeDate', function() { 
    var temp = $(this).datepicker('getDate'); 
    var d = new Date(temp); 
    d.setDate(d.getDate() + 1); 
    $('.datepickend').datepicker({ 
autoclose: true, 
format: 'dd/mm/yyyy', 
startDate: d 
}).on('changeDate', function() { 
    var temp1 = $(this).datepicker('getDate'); 
    var d1 = new Date(temp1); 
    d1.setDate(d1.getDate() + 1); 
    $('.datepickthird').datepicker({ 
autoclose: true, 
format: 'dd/mm/yyyy', 
startDate: d1 
}); 
}); 
}); 
-1

下面我

$('.input-group.date').datepicker({ 
    format: 'dd/mm/yyyy', 
    startDate: new Date() 
}); 
+0

這不回答問題。你應該給出一個解決問題的答案,解釋它爲什麼起作用,解釋它是如何工作的,這樣其他人可以學習。你是怎麼想出這個答案的?這是你應該在你的答案中包含的內容。您的回答對目前狀態下的其他讀者沒有幫助。 – GrumpyCrouton 2017-06-07 19:19:31

相關問題