3

How to autoclose a datetimepicker on date select only. I am using the dp.change event but it closes the datetimepicker even on changing the time.

$('.datetimepicker').each(function () {
    $(this).on('dp.change', function (ev) {

       $(this).data('DateTimePicker').hide();

    });
});

What will be the className for the timePicker? What if I get the class and tell datetimepicker not to close if the className is equal to the className of timepicker?

And what is the latest version for the datetimepicker?

1 is the this: http://eonasdan.github.io/bootstrap-datetimepicker/

2nd is this with autoClose property.

http://www.malot.fr/bootstrap-datetimepicker/

Thanks.

Nosheen
  • 135
  • 1
  • 3
  • 14

1 Answers1

5

Using eonasdan datetimepicker you can check if the new selected date is the same of the previous selected date (using moment isSame).

Note the dp.change receives oldDate and date as parameter.

Here a working example:

$('.datetimepicker').datetimepicker().on('dp.change', function(e){
  if( !e.oldDate || !e.date.isSame(e.oldDate, 'day')){
    $(this).data('DateTimePicker').hide();
  }
});
<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.42/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.42/js/bootstrap-datetimepicker.min.js"></script>

<div class="input-group date datetimepicker">
  <input type="text" class="form-control" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>
VincenzoC
  • 30,117
  • 12
  • 90
  • 112
  • It works fine when i change the time first and then the date. But when i change the date first and then time, and coming back to calendar does not closes automatically. – Nosheen Oct 29 '16 at 06:26
  • @Nosheen I did not fully understand what is the workflow that is giving you trouble. In my snippet datepicker closes when you select date and not when you select time (that is what I understood from your original question) – VincenzoC Oct 29 '16 at 10:58
  • Yes i really appreciate your effort and its working fine as well. There is one scenario in which its not working, like selecting time after changing date. Is it possible to detect if calendar icon is clicked after selecting time? – Nosheen Oct 31 '16 at 03:53
  • 1
    This did not work for me as is however with a slight modification it works perfectly. Add an if statement: if( $(this).data('DateTimePicker') ){ $(this).data('DateTimePicker').hide(); } – Jim Dandy BOA May 31 '19 at 17:49