在 JQuery UI datepicker 中禁用当前日期之前的日期答案

【问题标题】：Disable date before current date in JQuery UI datepicker在 JQuery UI datepicker 中禁用当前日期之前的日期
【发布时间】：2015-03-06 05:14:11
【问题描述】：

我想在日期选择器中禁用当前日期之前的日期。如何做到这一点？

$(function() {
  var $dp1 = $("#datepicker1");
  $(document).ready(function() {
    $dp1.datepicker({
      changeYear: true,
      changeMonth: true,
      dateFormat: "yy-m-dd",
      yearRange: "-100:+20",
    });
  });
});

$(function() {
  var $dp2 = $("#datepicker2");
  $(document).ready(function() {
    $dp2.datepicker({
      changeYear: true,
      changeMonth: true,
      yearRange: "-100:+20",
      dateFormat: "yy-m-dd",
    });
  });
});

p.pfield-wrapper input {
  float: right;
}
p.pfield-wrapper::after {
  content: "\00a0\00a0 "; /* keeps spacing consistent */
  float: right;
}
p.required-field::after {
  content: "*";
  float: right;
  margin-left: -3%;
  color: red;
}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<p class="pfield-wrapper required-field">
  <label>Start Date</label>
  <input id="datepicker1" type="text" name="s" style="width:155px;" required value="">
</p>
<p class="p">End Date
  <input id="datepicker2" type="text" name="e" style="width:155px;" value="">
</p>

Equivalent JsFiddle

【问题讨论】：

为什么需要使用多个 document.ready 事件？
添加了问题的小提琴链接，以及等效的 StackSnippet。

标签： javascript jquery jquery-ui jquery-ui-datepicker

【解决方案1】：

在 JQuery UI 日期选择器 API 中使用 minDate 属性。

$(function() {
  var $dp1 = $("#datepicker1");
  $dp1.datepicker({
    changeYear: true,
    changeMonth: true,
      minDate:0,
    dateFormat: "yy-m-dd",
    yearRange: "-100:+20",
  });

  var $dp2 = $("#datepicker2");
  $dp2.datepicker({
    changeYear: true,
    changeMonth: true,
    yearRange: "-100:+20",
    dateFormat: "yy-m-dd",
  });
});

$(function() {
  var $dp1 = $("#datepicker1");
  $dp1.datepicker({
    changeYear: true,
    changeMonth: true,
    minDate: 0,
    dateFormat: "yy-m-dd",
    yearRange: "-100:+20",
  });

  var $dp2 = $("#datepicker2");
  $dp2.datepicker({
    changeYear: true,
    changeMonth: true,
    yearRange: "-100:+20",
    dateFormat: "yy-m-dd",
  });
});

p.pfield-wrapper input {
  float: right;
}
p.pfield-wrapper::after {
  content: "\00a0\00a0 "; /* keeps spacing consistent */
  float: right;
}
p.required-field::after {
  content: "*";
  float: right;
  margin-left: -3%;
  color: red;
}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<p class="pfield-wrapper required-field">
  <label>Start Date</label>
  <input id="datepicker1" type="text" name="s" style="width:155px;" required value="">
</p>
<p class="p">End Date
  <input id="datepicker2" type="text" name="e" style="width:155px;" value="">
</p>

Equivalent JsFiddle

另请注意，您只需要在脚本中使用一个文档就绪事件。

【讨论】：

【解决方案2】：

您可以使用minDate 选项

    $dp1.datepicker({
        changeYear: true,
        changeMonth: true,
        dateFormat: "yy-m-dd",
        yearRange: "-100:+20",
        minDate: '0'
    });

演示：Fiddle

【讨论】：

【解决方案3】：

javascript

$(document).ready(function() {
    $('#Date').datepicker({
        onSelect: function(dateText, inst) {

            var today = new Date();
            today = Date.parse(today.getMonth()+1+'/'+today.getDate()+'/'+today.getFullYear());

            var selDate = Date.parse(dateText);

            if(selDate < today) {

                $('#Date').val('');
                $(inst).datepicker('show');
            }
        }
    });
});

html

<input type="text" id="Date" value="" />

DEMO

注意：或使用 minDate: 0

根据你的例子：

方法1

html

 <p class="pfield-wrapper required-field"> <label>Start Date</label>         <input id="datepicker1" type="text" name="s"  style="width:155px;" required value=""></p>
    <p class="p">End Date<input id="datepicker2" type="text" name="e"  style="width:155px;" value=""></p>

      $(function () {
   var $dp1 = $("#datepicker1");
  $(document).ready(function () {

  $dp1.datepicker({
    changeYear: true,
    changeMonth: true,
        minDate: '0',
    dateFormat: "yy-m-dd",
    yearRange: "-100:+20",
  });
 });

        });

          $(function () {
   var $dp2 = $("#datepicker2");


  $dp2.datepicker({
    changeYear: true,
    changeMonth: true,
       minDate: '0',
    yearRange: "-100:+20",
    dateFormat: "yy-m-dd",

 });

        });

DEMO

方法2

html

 <p class="pfield-wrapper required-field"> <label>Start Date</label>         <input id="datepicker1" type="text" name="s"  style="width:155px;" required value=""></p>
    <p class="p">End Date<input id="datepicker2" type="text" name="e"  style="width:155px;" value=""></p>

 $('#datepicker1').datepicker({
        onSelect: function(dateText, inst) {
            //Get today's date at midnight
            var today = new Date();
            today = Date.parse(today.getMonth()+1+'/'+today.getDate()+'/'+today.getFullYear());
            //Get the selected date (also at midnight)
            var selDate = Date.parse(dateText);

            if(selDate < today) {
                //If the selected date was before today, continue to show the datepicker
                $('#datepicker1').val('');
                $(inst).datepicker('show');
            }
        }
    });



$('#datepicker2').datepicker({
        onSelect: function(dateText, inst) {
            //Get today's date at midnight
            var today = new Date();
            today = Date.parse(today.getMonth()+1+'/'+today.getDate()+'/'+today.getFullYear());
            //Get the selected date (also at midnight)
            var selDate = Date.parse(dateText);

            if(selDate < today) {
                //If the selected date was before today, continue to show the datepicker
                $('#datepicker2').val('');
                $(inst).datepicker('show');
            }
        }
    });

DEMO

【讨论】：

【解决方案4】：

如果你有开始日期和结束日期，试试这个

$(document).ready(function(){
$("#txtFromDate").datepicker({
     minDate: '0',
    onSelect: function(selected) {
      $("#txtToDate").datepicker("option","minDate", selected)
    }
});
$("#txtToDate").datepicker({
     minDate: '0',
    onSelect: function(selected) {
       $("#txtFromDate").datepicker("option","maxDate", selected)
    }
});  
});

【讨论】：