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个月的日期

我已经在google和Stackoverflow上搜索了一个答案。请帮帮我。

Answer 1

尝试使用此代码工作小提琴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/ 不要忘记在此http://tarruda.github.io/bootstrap-datetimepicker/

中包含必要的javascript和css

您可以为datepicker

设置以下选项

  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

Answer 2

我遇到了你的问题......这是一个简单的日期验证

<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>

Answer 3

使用此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%"/>

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"

bootstrap datepicker验证不起作用

4 个答案: