Eonasdan/bootstrap-datetimepicker datetime picker reset through external javascript call

问题

I have use Eonasdan/bootstrap-datetimepicker version : 4.17.47, now explain scenario when I open bootstrap-datetimepicker from text box & selected date after that I have one clear button onclick I have clear that value, but when I am going back to open datetimepicker its shows previously selected date as highlighted. So issue is datetimepicker is not reset, I want to reset that datetime picker on cancel click external JavaScript call.

I have use below but non of them is working

$('#myDatepicker').data('datepicker').setDate(null);

$('#myDatepicker').data().DateTimePicker.date(null);

And also if I have two datetimepicker like fromdate to todate it's not working.

回答1:

You can use:

clear(): Clears the datepicker by setting the value to null

Instead, if you need only to reset the selected day you can:

save a property: if true the reset button has been clicked, if not no reset
on show and update events of datepicker you can test if the reset button has been clicked.. If yes, remove the active class for selected day
on change event of datepicker the previous property set can be reset.

$('#myDatepicker').datetimepicker().prop("resetDatePicker", false).on('dp.update dp.show', function(e) {
    if ($('#myDatepicker').prop("resetDatePicker")) {
        $(this).find('td.day.active').removeClass('active today');
    }
}).on('dp.change', function(e) {
    $('#myDatepicker').prop("resetDatePicker", false);
});


$('#resetDatePicker').on('click', function(e) {
    $('#myDatepicker').data("DateTimePicker").date(moment());
    $('#myDatepicker').prop("resetDatePicker", true).find(':input').val('');
});

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css"/>




<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='myDatepicker'>
                    <input type='text' class="form-control"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class='col-sm-6'>
            <button id="resetDatePicker" class="btn btn-default" type="button">Clear</button>
        </div>
    </div>
</div>

来源：https://stackoverflow.com/questions/43780734/eonasdan-bootstrap-datetimepicker-datetime-picker-reset-through-external-javascr

标签

javascript

jquery

twitter-bootstrap

eonasdan-datetimepicker