4

我正在尝试使用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 上搜索了答案。请帮我。

4

4 回答 4

3

试试这个代码工作小提琴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
于 2014-01-20T11:18:23.657 回答
1

使用这个 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%"/>
于 2014-01-20T11:01:49.680 回答
1

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

<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>
于 2014-01-20T11:24:31.170 回答
0

包括这个脚本

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

于 2014-01-20T11:09:52.753 回答