Bootstrap日期选择器验证不起作用。

Question

我将尝试使用bootstrap-datetimepicker.min.js，并已成功集成到我的项目中。但是，当我尝试将今天的日期显示为from输入字段的默认值时，它无法正常工作。

Javascript:

var d = new Date();

var currDate = d.getDate();
var currMonth = d.getMonth();
var currYear = d.getFullYear();

var dateStr = currDate + "-" + currMonth + "-" + currYear;

$('#from').datetimepicker({
    pickTime: false,
    defaultDate: dateStr
});

HTML:

<input type="text" placeholder="From" name="from" id="from" style="width: 90%"/>

<input type="text" placeholder="To" name="to" id="to" style="width: 90%"/>

同时，我也希望验证from字段中的日期不应早于今天的日期，而to日期不应早于明天的日期，并且不应大于3个月的日期。

我已经在谷歌和stackoverflow上搜索了答案。请帮助我。

- Mohammed Sufian

Answer 1

请尝试使用这个可行的代码JSFiddle链接：http://jsfiddle.net/KWvNe/

HTML

<div class="well">
  <div id="from-datepicker" class="input-append date">
    <input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
    <span class="add-on">
      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
      </i>
    </span>
  </div>
</div>

<div class="well">
  <div id="to-datepicker" class="input-append date">
    <input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
    <span class="add-on">
      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
      </i>
    </span>
  </div>
</div>

JS

$(function() {

    var d = new Date();
    var today = d;
    var dateThreeMonthLater = d.setMonth(d.getMonth() + 3);

    $('#from-datepicker').datetimepicker({
      language: 'pt-BR',
      startDate: today,
      endDate: dateThreeMonthLater
    });

     $('#to-datepicker').datetimepicker({
      language: 'pt-BR'
    });

});

点击此处查看示例：http://jsfiddle.net/KWvNe/ 别忘了包含必要的JavaScript和CSS文件，点击此处查看：http://tarruda.github.io/bootstrap-datetimepicker/

您可以为日期选择器设置以下选项：

  maskInput: true,           // disables the text input mask
  pickDate: true,            // disables the date picker
  pickTime: true,            // disables de time picker
  pick12HourFormat: false,   // enables the 12-hour format time picker
  pickSeconds: true,         // disables seconds in the time picker
  startDate: -Infinity,      // set a minimum date
  endDate: Infinity          // set a maximum date

- Subodh Ghulaxe

---

谢谢，先生。它可以工作了，但是我希望结束日期应该是从今天开始往后三个月。 - Mohammed Sufian

谢谢您先生，现在它可以正常工作了。但是它不允许我选择从今天到三个月内的日期。也就是说，我只能选择今天的日期和三个月后的日期。我希望用户可以选择今天的日期和今天到三个月后之间的日期。 - Mohammed Sufian

Answer 2

使用这个 jQuery 函数

<script>
  $(function() {
    $( "#from" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      changeYear: true,
      numberOfMonths: 1,
      onClose: function( selectedDate ) {
          $("#from").datepicker( "option", "dateFormat", "yy-mm-dd");
          $("#to").datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to").datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      changeYear: true,
      numberOfMonths: 1,
      onClose: function( selectedDate ) {
          $("#to").datepicker( "option", "dateFormat", "yy-mm-dd");
          $("#from").datepicker( "option", "maxDate", selectedDate );
      }
    });
  });
</script> 

HTML：

<input type="text" placeholder="From" name="from" id="from" style="width: 90%"/>

<input type="text" placeholder="To" name="to" id="to" style="width: 90%"/>

- Shibu Thomas

---

谢谢您的回答，但是在尝试了您提供的代码后，它甚至没有显示给我选择日期的日历。 - Mohammed Sufian

Answer 3

我明白你的问题了...这是一个简单的日期验证。

<input type="text" id="txtdate" />
<input value="SUBMIT" id="btnsubmit" onclick="checkDate();"/>
<script>
           function checkDate() {
            var EnteredDate = document.getElementById("txtdate").value; //for javascript
            var EnteredDate = $("#txtdate").val(); // For JQuery
            var date = EnteredDate.substring(0, 2);
            var month = EnteredDate.substring(3, 5);
            var year = EnteredDate.substring(6, 10);
            var myDate = new Date(year, month - 1, date);
            var today = new Date();
            if (myDate > today) {
                alert("Entered date is greater than today's date ");
            }
            else {
                alert("Entered date is less than today's date ");
            }
        }
    </script>

- Shibu Thomas

---

感谢Subodh Ghulaxe先生的回答，我已经使用jQuery中的setdate属性解决了这个问题。现在我正在寻找结束日期验证，它应该是从今天开始三个月后的日期。 - Mohammed Sufian

Answer 4

包含这个脚本

// jQuery Date Picker
jQuery(".datepicker").datepicker({
    showOtherMonths: true,
    selectOtherMonths: false,
    isRTL:false,
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,

});
jQuery('.datepicker').css('cursor', 'pointer');
jQuery('.datepicker').attr("readonly", "readonly");
jQuery('.datepicker').addClass('tooltip-info');
jQuery('.datepicker').attr('data-rel', 'tooltip');
jQuery('.datepicker').attr('data-placement', 'right');
jQuery('.datepicker').attr('data-original-title', 'Select a Date');
jQuery(".datepicker").datepicker("option", "dateFormat", "yy-mm-dd");
jQuery(".datepicker").datepicker("option", "showAnim", "slideDown");
jQuery(".datepicker").each(function(){
    jQuery(this).datepicker( "setDate", jQuery(this).attr('date-value'));
});
Use id="datepicker"

- Shibu Thomas

---

有没有办法仅使用jQuery验证日期？例如，在选择日期后，它应该检查并验证日期，仅使用jQuery而不是datetimepicker。 - Mohammed Sufian