如何在bootstrap datetimepicker中设置默认日期

时间:2017-01-27 15:05:08

标签: javascript jquery datetimepicker

我希望我的datetimepicker有一个默认值,即当前日期。我怎样才能做到这一点?我已经阅读了文档,但无法找到实现这一目标的任何内容。有人能帮我吗?我希望默认值的格式为MM dd, yyyy

enter image description here

这是我的代码。

<div class="form-group">
  <label for="dtp_input2">Date</label>
  <div class="input-group date form_date col-md-3" data-date="" data-date-format="MM dd, yyyy">
    <input id="dtp_input2" name="date" class="form-control" size="10" type="text" value="" readonly>
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-remove"></span>
    </span>
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>
$('.form_date').datetimepicker({
  weekStart: 1,
  todayBtn: 1,
  autoclose: 1,
  todayHighlight: 1,
  startView: 2,
  minView: 2,
  forceParse: 0,
});

6 个答案:

答案 0 :(得分:5)

设置datetimepicker后设置值:

$('.form_date').datetimepicker({
  weekStart: 1,
  todayBtn: 1,
  autoclose: 1,
  todayHighlight: 1,
  startView: 2,
  minView: 2,
  forceParse: 0,
});
$('#dtp_input2').val(Date());

答案 1 :(得分:3)

此解决方案仅使用bootstrap datetimepicker提供的方法。

您可以像以前一样声明日期时间戳,然后执行此操作:

$('#datepicker input').datepicker('setDate', new Date());
$('#datepicker input').datepicker('update');
$('#datepicker input').val('');

这样,您在setDate()中设置的日期将被选中,输入将保持为空。 如果您不希望输入为空,请删除以下行:

$('#datepicker input').datepicker('update');
$('#datepicker input').val('');

如果您想使用该解决方案:这是一个jsFiddle

&#13;
&#13;
$('#datepicker input').datepicker({
  weekStart: 1,
  todayBtn: 1,
  autoclose: 1,
  todayHighlight: 1,
  startView: 2,
  minView: 2,
  forceParse: 0,
});

$('#datepicker input').datepicker('setDate', new Date());
$('#datepicker input').datepicker('update');
$('#datepicker input').val('');
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css" rel="stylesheet"/>

<div id="datepicker">
    <input type="text" type="text" class="form-control" />
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

documentation看起来可以在实例化datetimepicker时设置defaultDate

$(function () {
    $('#datetimepicker5').datetimepicker({
        defaultDate: "11/1/2013",
        disabledDates: [
            moment("12/25/2013"),
            new Date(2013, 11 - 1, 21),
            "11/22/2013 00:53"
        ]
    });
});

答案 3 :(得分:1)

您还可以使用JS将当前日期设置为文本字段:

&#13;
&#13;
var d = new Date();
document.getElementById("target").value = d.toDateString();
&#13;
<input type="text" id="target">
&#13;
&#13;
&#13;

答案 4 :(得分:1)

在我的情况下: 将此defaultDate: new Date()代码插入您的javascript datetimepicker。

<script type="text/javascript">
$(function () {
    $('#datetimepicker10').datetimepicker({
        defaultDate: new Date(),
        viewMode: 'years',
        format: 'MM/DD/YYYY'
    });
});

答案 5 :(得分:0)

简单的说下一个。对我来说效果很好。

$('.className').datepicker('setDate', 'now');