logo标签列表

禁用日期选择器上过去的日期

jqueryjquery-mobiletwitter-bootstrap
30

如何在datetimepicker上禁用当前日期之前的日期？我尝试了一些类似问题的帖子，但无法实现。以下是我尝试过的内容：

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
 href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<script type="text/javascript"
 src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script> 
<script type="text/javascript"
 src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
 src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
 src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script type="text/javascript">
$(function() {
  $('#datetimepicker2').datetimepicker({
    language: 'en',
    pick12HourFormat: true
  });
});
</script>

<div id="datetimepicker2" class="input-append">
<input data-format="MM/dd/yyyy" type="text"/>
<span class="add-on">
  <i  data-date-icon="icon-calendar">
  </i>
</span>

我也尝试过

$("datetimepicker2").datepicker({ changeYear: true, dateFormat: 'dd/mm/yy', showOn: 'none', showButtonPanel: true,  minDate:'0d' });

和

$("#datetimepicker2").datepicker({ minDate: 0 });
到目前为止，借助于http://tarruda.github.com/bootstrap-datetimepicker/的帮助。 - Anna
也许这篇文章会对你有所帮助：使用jQuery禁用日期选择器中的过去日期 - Fefar Ravi
28个回答
63
这在jsfiddle上运行良好，但在我的项目中不起作用，我还包括了<script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>，仍然不起作用。 - Anna
是的，在JSFiddler中这个很好用，但当我们添加jQuery UI时，我不应该在我的项目中使用jQuery UI，因为我正在使用boostrap，有没有其他方法可以在不使用jQuery UI的情况下完成？ - Anna
+1。使用此教程有所帮助：如何使用JQuery禁用日期选择器中的先前日期。 - Fefar Ravi
20

问题已解决 :)

以下是可工作的代码

$(function(){
    $('#datepicker').datepicker({
        startDate: '-0m'
        //endDate: '+2d'
    }).on('changeDate', function(ev){
        $('#sDate1').text($('#datepicker').data('date'));
        $('#datepicker').datepicker('hide');
    });

})
他的ID是#sDate1吗？ - leonardeveloper
15

minDate: dateToday或minDate: '0'是关键。尝试设置minDate属性。

$(function() {
    $( "#datepicker" ).datepicker({
        numberOfMonths: 2,
        showButtonPanel: true,
        minDate: dateToday // minDate: '0' would work too
    });
});

阅读更多

希望已经包含了jQuery UI js。 - Techie
我在项目中不应该使用jQuery UI，因为我正在使用Bootstrap，有没有其他方法可以在不使用jQuery UI的情况下完成？ - Anna
http://network.convergenceservices.in/forum/40-joomla-tricks/2287-making-joomla-default-calendar-work-like-jquery-date-picker.html - Techie
1
完成，以下是代码：$（function（）{ $（'#datepicker1'）。datepicker（{ startDate：'-0m' //endDate: '+2d' }）。on（'changeDate'， function（ev）{ $（'#sDate1'）。text（$（'#datepicker1'）。data（'date'））; $（'#datepicker1'）。datepicker（'hide'）; }）; }）; - Anna
10

试试这个,

$( "#datepicker" ).datepicker({ minDate: new Date()});

这里，new Date() 表示今天的日期...

9
$(function () {
    $("#date").datepicker({ minDate: 0 });
});
7
以下解决方案适用于我，希望对你也有所帮助。
$(document).ready(function() {
    $("#datepicker").datepicker({ startDate:'+0d' });
});
startDate: '+0d' 可行。new Date() 的解决方案对我无效。谢谢。 - Lizesh Shakya
这是唯一对我有效的解决方案。 - lStoilov
7

这个会有效：

 var dateToday = new Date();    
 $(function () {
     $("#date").datepicker({ 
         minDate: dateToday 
     });
 });
4
如果您想在页面加载时设置日期，请使用以下代码：
 $('#datetimepicker1').datetimepicker({
  minDate: new Date()
  });

这将在页面加载时将今天的日期设置为开始日期，并禁用所有先前的日期。
但是，如果您想在单击特定文本框时设置日期而不是在页面加载时进行设置，则使用以下内容： $('#datetimepicker1').datetimepicker(); $("#datetimepicker1").on("click", function (e) { $('#datetimepicker1').data("DateTimePicker").minDate(new Date()); });

如果我们不想将当前日期设置为最小日期，则可以使用任何指定日期格式的字符串来代替 new Date()。 例如：

$('#datetimepicker1').data("DateTimePicker").minDate("10/15/2018");
4

试一下这个：

$("#datetimepicker2").datepicker({ startDate: "+0d" });
3
这对我有效，
$('#datetimepicker2').datetimepicker({
    startDate: new Date()
  });
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接