Search code examples
bootstrap-datetimepickereonasdan-datetimepicker

Don't change time when changing picker

On v4.17.43

So I have a simple picker:

$('.datetimepicker .date-range-start').datetimepicker({
    format: 'YYYY-MM-DD HH:mm',
    maxDate:moment().endOf('day')
})

and the default date is set in the html to something like '2016-10-31 00:00'

<input type="text" class="date-range-start" name="start" value="2016-10-31 00:00" />

But whenever you change the day with the picker, the time gets changed to the current time. How can I get it to STAY as 00:00 unless the user actually changes the time with the time part of the picker.

I found one person saying set useCurrent:'day' but thats not changing anything for me.

Solution

  • You can set a defaultValue to the picker using data attribute instead of setting value, so you will have data-date-default-date on your input.

    You can find more about data-* initialization here and here.

    Here a working example:

    $('.datetimepicker .date-range-start').datetimepicker({
    format: 'YYYY-MM-DD HH:mm',
    maxDate: moment().endOf('day')
})
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/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.15.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/locale/en-gb.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script>

<div class='col-sm-6 datetimepicker'>
    <input type="text" class="form-control date-range-start" name="start" data-date-default-date="2016-10-31 00:00" />
</div>

    Please note that your example will work as you expect if you use version 4.17.37 of the datetimepicker, as shown in the following example. Maybe you can also consider downgrading to a previous version of the datetimepicker.

    $('.datetimepicker .date-range-start').datetimepicker({
    format: 'YYYY-MM-DD HH:mm',
    maxDate: moment().endOf('day')
})
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/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.15.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/locale/en-gb.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class='col-sm-6 datetimepicker'>
    <input type="text" class="form-control date-range-start" name="start" value="2016-10-31 00:00" />
</div>