Set default time in bootstrap-datetimepicker

Question

I want to set default time in this datetimepicker as 00:01 for the current date. Anyone tried that before? Having a tough time with it. It Seems simple.

$('#startdatetime-from').datetimepicker({
    language: 'en',
    format: 'yyyy-MM-dd hh:mm'
});

I need to use setDate, but I'm not sure how. I checked their code, but did not find a parameter for that.

why don't you show us what you are having trouble with. Post some code. — Davin Tryon, Aug 01 '13 at 22:21
See my updated answer for [setDate/setLocalDate](http://tarruda.github.io/bootstrap-datetimepicker/#api). — Sara, Aug 01 '13 at 23:14

score 40 · Answer 1 · answered Feb 17 '15 at 23:30

40

None of the above worked for me, however I had success setting the default at time of instantiation.

JQuery

<script type="text/javascript">
    $(function () {
        var dateNow = new Date();
        $('#datetimepicker').datetimepicker({
            defaultDate:dateNow
        });
    });
</script>

answered Feb 17 '15 at 23:30

Nicholas Hamilton

10,044
6
57
88

1

[The documentation](https://eonasdan.github.io/bootstrap-datetimepicker/Options/#defaultdate) – johanvs Feb 27 '18 at 12:59

score 24 · Accepted Answer · edited May 23 '17 at 12:34

24

Set a default input value as per this GitHub issue.

HTML

<input type="text" id="datetimepicker-input"></input>

jQuery

var d = new Date();

var month = d.getMonth()+1;
var day = d.getDate();

var output = d.getFullYear() + '/' +
(month<10 ? '0' : '') + month + '/' +
(day<10 ? '0' : '') + day;

$("#datetimepicker-input").val(output + " 00:01:00");

jsFiddle
JavaScript date source

EDIT - setLocalDate/setDate

var d = new Date();
var month = d.getMonth();
var day = d.getDate();
var year = d.getFullYear();

$('#startdatetime-from').datetimepicker({
    language: 'en',
    format: 'yyyy-MM-dd hh:mm'
});
$("#startdatetime-from").data('DateTimePicker').setLocalDate(new Date(year, month, day, 00, 01));

jsFiddle

edited May 23 '17 at 12:34

Community

1
1

answered Aug 01 '13 at 22:40

Sara

8,222
1
37
52

for me .setDate() worked instead of setLocalDate(). Thanks anyway! – M. Ahmad Zafar Mar 17 '14 at 13:12
1

There are some typos in the code. Correct code is actually: `jQuery('#startDate').data('DateTimePicker').setDate(new Date(2015, 1, 1, 00, 01));` – Jean-Paul Jul 14 '15 at 12:08
Your github link seems to be broken now. – Bach Nov 24 '15 at 12:46
What if i want add editable time zone in datetime picker? – er.irfankhan11 Feb 10 '16 at 07:23
@M.AhmadZafar how you use .setDate() because when i tried to use i go an error like Cannot read property 'setLocalDate' of undefined – ashish bansal Apr 02 '19 at 04:23

Busted · Answer 3 · 2016-05-23T15:08:25.453

12

For use datetime from input value, just set option useCurrent to false, and set in value the date

$('#datetimepicker1').datetimepicker({
  useCurrent: false,
  format: 'DD.MM.YYYY H:mm'
});

edited May 23 '16 at 15:08

answered May 23 '16 at 14:58

Busted

121
1
3

2

Thanks. I set `useCurrent` to `false`, then `defaultDate` worked. – shrekuu Jun 06 '16 at 05:01
Beware that the format string accepted by datetimepicker is not the same as a C# datetime format string. For example, to set the value on the input in .Net MVC, use `` (note the different casing of "dd" and "yyyy") – Georg Patscheider Jan 23 '17 at 16:20
that useCurrent saved me... could not work out how to stop it - thanks! – Trevor Daniel Feb 13 '17 at 11:59
Perfect, I have just set value format same as datepicker and it worked great. – Rohit Mittal Sep 25 '19 at 10:37

score 9 · Answer 4 · edited May 08 '15 at 19:58

9

i tried to set default time for a picker and it worked:

$('#date2').datetimepicker({
 format: 'DD-MM-YYYY 12:00:00'
});

this will save in database as : 2015-03-01 12:00:00

used for smalldatetime type in sql server

edited May 08 '15 at 19:58

Per76

184
1
1
15

answered Mar 03 '15 at 14:20

Shaiju T

6,201
20
104
196

4

This also disables hour and minute selection. You won't have option to change hours or minutes. – Firze Jun 09 '15 at 10:00

score 8 · Answer 5 · answered Jan 15 '16 at 19:06

8

It works for me:

 <script type="text/javascript">
        $(function () {
            var dateNow = new Date();
            $('#calendario').datetimepicker({
                locale: 'es',
                format: 'DD/MM/YYYY',
                defaultDate:moment(dateNow).hours(0).minutes(0).seconds(0).milliseconds(0)                    
            });
        });            
    </script>

answered Jan 15 '16 at 19:06

Hernaldo Gonzalez

1,977
1
21
32

this should be the perfect answer – Mehdi Souregi Jan 22 '18 at 10:39

score 7 · Answer 6 · answered Jun 02 '14 at 10:37

7

use this after initialisation

$('.form_datetime').datetimepicker('update', new Date());

answered Jun 02 '14 at 10:37

Lem

419
5
4

score 5 · Answer 7 · answered Apr 02 '19 at 04:29

Hello developers,

Please try this code

var default_date=  new Date(); // or your date
$('#datetimepicker').datetimepicker({
    format: 'DD/MM/YYYY HH:mm', // format you want to show on datetimepicker
    useCurrent:false, // default this is set to true
    defaultDate: default_date
});

if you want to set default date then please set useCurrent to false otherwise setDate or defaultDate like methods will not work.

score 4 · Answer 8 · answered Sep 04 '19 at 04:30

4

This Works for me. I have to use specially date format like this 'YY-MM-dd hh:mm' or 'YYYY-MM-dd hh:mm'

$('#datetimepicker1').datetimepicker({
            format: 'YYYY-MM-dd hh:mm',
            defaultDate: new Date()
        });

answered Sep 04 '19 at 04:30

janith jayaweera

101
4

score 2 · Answer 9 · answered Mar 17 '16 at 17:12

This is my solution for your problem :

$('#startdatetime-from').datetimepicker({
language: 'en',
format: 'yyyy-MM-dd hh:mm'
}).on('dp.change', function (e) {
        var specifiedDate = new Date(e.date);
        if (specifiedDate.getMinutes() == 0)
        {
            specifiedDate.setMinutes(1);
            $(this).data('DateTimePicker').date(specifiedDate);
        }
    });

This also work for setting a default hour or both. Note that this code sample works with the useCurrent: false parameter too.

When the user pick a date, we check if the minute is 0 (hard-coded default value). In this case, we set a 1. Then, the user cannot select 0.

score 2 · Answer 10 · answered Dec 30 '16 at 12:09

2

I solved my problem like this

$('#startdatetime-from').datetimepicker({
language: 'en',
format: 'yyyy-MM-dd hh:mm',
defaultDate:new Date()
});

answered Dec 30 '16 at 12:09

Suzon Das

21
1

score 0 · Answer 11 · answered Jan 11 '17 at 20:23

Momentjs.com has good documentation on how to manipulate the date/time in relation to the current moment. Since Momentjs is required for the Datetimepicker, might as well use it.

var startDefault = moment().startof('day').add(1, 'minutes');
$('#startdatetime-from').datetimepicker({
    defaultDate: startDefault,
    language: 'en',
    format: 'yyyy-MM-dd hh:mm'
});

score 0 · Answer 12 · answered Feb 18 '19 at 08:52

By using Moment.js, i able to set the default time

var defaultStartTime = moment(new Date());
var _startTimeStr = "02:00 PM"


    if (moment(_startTimeStr, 'HH:mm a').isValid()) {
        var hr = moment(_startTimeStr, 'HH:mm a').hour();
        var min = moment(_startTimeStr, 'HH:mm a').minutes();

        defaultStartTime = defaultStartTime.hours(hr).minutes(min);
    }

$('#StartTime').datetimepicker({
    pickDate: false,
    defaultDate: defaultStartTime
});

score -1 · Answer 13 · edited Jan 28 '17 at 00:29

This works for me after a long hours of search , This solution is for Bootstrap datetimepicker version 4. when you have to set the default date in input field.

HTML

"input type='text' class="form-control" id='datetimepicker5' placeholder="Select to date" value='<?php echo $myDate?>'// $myDate is having value '2016-02-23' "

Note- If You are coding in php then you can set the value of the input datefield using php, but datetimepicker sets it back to current date when you apply datetimepicker() function to it. So in order to prevent it, use the given JS code

JAVASCRIPT

<script>
$('#datetimepicker5').datetimepicker({
           useCurrent: false //this is important as the functions sets the default date value to the current value 
           ,format: 'YYYY-MM-DD'
        });
</script>

Set default time in bootstrap-datetimepicker

13 Answers13

Linked