Geek Answers Handbook

Bootstrap-datepicker clears the field after selecting the current date

If I have autoclose turned on and I select a field from an already selected calendar, it empties the field and then closes the datepicker, as expected. How can I still use the autoclose function, but not empty the field?

Take a look at the demo for an example, http://eternicode.imtqy.com/bootstrap-datepicker/?markup=input&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&todayBtn=false&language=en&orientation=auto&m&idate&m&idate&midate&m&&&&&& = on # sandbox

  • Make sure auto-click mode is on.
  • Select a date.
  • open the datepicker parameter again, select the current selected date again. Field
  • empty again.

thanks

+7
javascript jquery twitter-bootstrap datepicker bootstrap-datepicker
source share
4 answers

Bootstrap Datepicker provides events that you can use to achieve your goal.

Here is one way to do this:

$('#sandbox-container input').datepicker({ autoclose: true }); $('#sandbox-container input').on('show', function(e){ if ( e.date ) { $(this).data('stickyDate', e.date); } else { $(this).data('stickyDate', null); } }); $('#sandbox-container input').on('hide', function(e){ var stickyDate = $(this).data('stickyDate'); if ( !e.date && stickyDate ) { $(this).datepicker('setDate', stickyDate); $(this).data('stickyDate', null); } });

Not necessarily the most elegant, but as you can see here, it does the trick:

http://jsfiddle.net/klenwell/LcqM7/ (tested in Chrome)

+11
source share

Just in case, if someone wants to implement all the events in a "single line", I use the code here that I use in the ASP.NET MVC project.

And thanks @klenwell for his decision!

 $('#ExpectedEndingTimeDataPicker').datepicker({ startDate: "@Model.ExpectedEndingTimeAsString", language: "@Model.CurrentCultere2Letters", autoclose: true, todayHighlight: true, format: "@Model.CurrentDateFormat" }).on('changeDate', function (e) { RecalculateEstimationDate(); }).on('show', function (e) { if (e.date) { $(this).data('stickyDate', e.date); } else { $(this).data('stickyDate', null); } }).on('hide', function (e) { var stickyDate = $(this).data('stickyDate'); if (!e.date && stickyDate) { $(this).datepicker('setDate', stickyDate); $(this).data('stickyDate', null); } });

Note that Model is an ASP.NET MVC model.

You can learn more about this event here http://bootstrap-datepicker.readthedocs.org/en/release/events.html

And about bootstrap-datepicker.js

+1
source share

Quick fix: In the default settings of @line 1394 add a new option allowDeselection

 var defaults = $.fn.datepicker.defaults = { allowDeselection: false, ... };

In the _toggle_multidate @line 1015 function, change the "else if (ix !== -1)" to:

 else if (ix !== -1 && this.o.allowDeselection){ this.dates.remove(ix); }

Link: https://github.com/eternicode/bootstrap-datepicker/issues/816

+1
source share

This is apparently the most common solution, because there was a problem when we click on the input text and click on some other component on the web page separately from the date selection:

 //Date picker $('#datepickerInputId').datepicker({ autoclose : true, }).on('show', function(e){ if ( e.date ) { $(this).data('stickyDate', e.date); } else if($(this).val()){ /**auto-populate existing selection*/ $(this).data('stickyDate', new Date($(this).val())); $(this).datepicker('setDate', new Date($(this).val())); } else { $(this).data('stickyDate', null); } }).on('hide', function(e){ var stickyDate = $(this).data('stickyDate'); if ( !e.date && stickyDate ) { $(this).datepicker('setDate', stickyDate); $(this).data('stickyDate', null); } });

kindly suggest if any modification is required

+1
source share

More articles:


All Articles