CODEWITHSUNDEEP
jquerydatedatepickerdatetimepickereonasdan-datetimepicker
Sleepz
Sleepz

Reputation: 87

How to set default date of format 'MM/dd/yyyy'

Here is my code for creating calendar by using Bootstrap datetimepicker:

$('#datetimepicker12').datetimepicker({
    inline: true,
    format: 'MM/dd/yyyy',
    minDate: new Date(moment(new Date()).add(0, 'days').toDate()),
    maxDate: new Date(moment(new Date()).add(7, 'days').toDate()),
});

Now I want to set default date of calendar to be my custom date, its format is like this '2017-03-30'

How can I convert that to be the same format as format of datetimepicker that I have set before?

Upvotes: 0

Views: 2771

Answers (3)

VincenzoC
VincenzoC

Reputation: 31482

Bootstrap datetimepicker uses momentjs to manage dates, so:

  • You don't need new Date(...) and toDate() in your minDate and maxDate option.
  • The format option should be compliant to moment tokens, in your case change it into uppercase MM/DD/YYYY.

The picker has a defaultDate option, you can use it to set 2017-03-30 as default date, you simply have to parse it using moment (moment('2017-03-30') will be enough since you input is in supported ISO 8601 format).

Note the the datimepicker has useCurrent option if you have to default to the current date.

Here a working example:

$('#datetimepicker12').datetimepicker({
  inline: true,
  format: 'MM/DD/YYYY',
  minDate: moment().startOf('day'),
  maxDate: moment().add(7, 'days').endOf('day'),
  defaultDate: moment('2017-03-30')
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="form-group">
  <div class="row">
    <div class="col-md-8">
      <div id="datetimepicker12"></div>
    </div>
  </div>
</div>

The snippet will not work after the 2017-30-17 beacuse the default date will be not included between minDate and maxDate.

Upvotes: 1

ProgrammerV5
ProgrammerV5

Reputation: 1962

Valid formats are documented here:

https://eonasdan.github.io/bootstrap-datetimepicker/Options/#format

and from there you can read:

See momentjs' docs for valid formats. Format also dictates what components are shown, e.g. MM/dd/YYYY will not display the time picker.

http://momentjs.com/docs/#/displaying/format/

So for your particular case it will be:

format: 'MM/DD/YYYY'  //(all uppercase)

and to set the default value you need to use:

defaultDate:

The documentation for defaultDate is here

Upvotes: 1

Rahul Singh
Rahul Singh

Reputation: 19622

$.datepicker.setDefaults({
    dateFormat: 'yy-mm-dd'
});

Upvotes: 0

Related Questions