CODEWITHSUNDEEP
javascriptjquerydatetimepicker
nethken
nethken

Reputation: 1092

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.

enter image description here

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

Upvotes: 11

Views: 53180

Answers (6)

Muhammad Saimon
Muhammad Saimon

Reputation: 281

Simply put the following one. It works fine for me.

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

Upvotes: 0

gustav
gustav

Reputation: 197

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

Upvotes: 12

Dipiks
Dipiks

Reputation: 3928

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>

Upvotes: 3

Ambrish Pathak
Ambrish Pathak

Reputation: 3968

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

Upvotes: 1

Daniel
Daniel

Reputation: 533

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"
        ]
    });
});

Upvotes: 4

Matt Spinks
Matt Spinks

Reputation: 6698

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());

Upvotes: 10

Related Questions