How to put a default date in bootstrap datetimepicker

问题

I want my datetimepicker to have a default value which is the current date. How can I achieve this? I already read the documentation but can't find anything to achieve that. Can someone help me? I want the format of the default value is MM dd, yyyy.

Here's my code.

<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,
});

回答1:

Just set the value after setting up the datetimepicker:

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

回答2:

In my case : Insert this defaultDate: new Date() code into your javascript datetimepicker.

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

回答3:

Looks like from the documentation that you can set a defaultDate when instantiating the datetimepicker.

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

回答4:

This solution only uses the methods provided by the bootstrap datetimepicker.

You can declare your datetimepicker as you did and then do this:

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

This way the date you set in the setDate() will be selectionned and the input will remain empty. If you don't want the input to be empty, just remove these lines:

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

And if you want to play with that solution: Here is a jsFiddle

$('#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('');

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

回答5:

You can also set current Date to a text field with JS like :

var d = new Date();
document.getElementById("target").value = d.toDateString();

<input type="text" id="target">

来源：https://stackoverflow.com/questions/41897021/how-to-put-a-default-date-in-bootstrap-datetimepicker

标签

javascript

jquery

datetimepicker