-->

How to stop datetimepicker setting todays date in

2019-07-08 05:55发布

问题:

When we select calendar icon, it automatically sets today's date to textbox. Is there any parameter/option in the datetimepicker() function which can be set to false or null preventing datetimepicker() setting today date to textbox by default. If someone doesn't select any date from calendar the textbox should be empty rather than having today's date set by datetimepicker().

回答1:

Worth reading the docs. Change the useCurrent attribute when initailizing the datetimepicker.

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



回答2:

If you are using the .datetimepicker() for Bootstrap 4 + jQuery

When you click the element it could happen this undesired effect of date updated.

This is a hack to avoid override of current value with current date on click and allow normal selection of picker.

For the Tempus Dominus version: https://tempusdominus.github.io/bootstrap-4/

JS

var dateNow = new Date();

$('.datetimepicker').each(function() {

    var _el = this;

    $(this).datetimepicker({
        autoclose: true,
        allowInputToogle: true,
        format: 'YYYY-MM-DD HH:mm',
        defaultDate: dateNow,
    });

    // 'this.parent()' is the container and data-target  |  '_el' is the input
    $(this).parent().on('change.datetimepicker', function(e) {

        // HACK
        if (!e.oldDate) return;

        $(_el).val(e.date.format('YYYY-MM-DD HH:mm'));
    });
});

HTML

<div class="form-group">
    <label class="control-label"><i class="icon-right-open-outline"></i> Date</label>
    <div class="input-group" id="form_datetimepicker_1">

        <input name="date_selected"
               id="date_selected"
               class="form-control datetimepicker"
               type="text"
               data-toggle="datetimepicker"
               value="2019-11-22 22:55:00"
               data-target="#form_datetimepicker_1">

        <div class="input-group-append" data-target="#form_datetimepicker_1" data-toggle="datetimepicker">
            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
        </div>
    </div>
</div>