bootstrap-datepicker vacía el campo después de seleccionar la date actual

Si tengo habilitada la autoclose, y selecciono el campo del calendar que ya se eligió, vacía el campo y luego cierra el datepicker como se esperaba. ¿Cómo puedo seguir teniendo la característica de cierre automático, pero no dejarla vacía?

Mire la demostración para ver un ejemplo, http://eternicode.github.io/bootstrap-datepicker/?markup=input&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&todayBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&autoclose=on&keyboardNavigation = on & forceParse = on # sandbox

  1. Asegúrate de que esté habilitado el autoclose
  2. Selecciona una date
  3. abra el marcador de date nuevamente, select la date actualmente seleccionada de nuevo.
  4. el campo está vacío otra vez

Gracias

4 Solutions collect form web for “bootstrap-datepicker vacía el campo después de seleccionar la date actual”

Bootstrap Datepicker ofrece events que puede aprovechar para lograr su objective.

Aquí hay una manera de hacerlo:

$('#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); } }); 

No necesariamente el más elegante, pero como se puede ver aquí, hace el truco:

http://jsfiddle.net/klenwell/LcqM7/ (probado en Chrome)

Solución rápida: en la línea pnetworkingeterminada @ línea 1394, agregue una nueva opción, allowDeselection

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

En la function _toggle_multidate @ line 1015, modifique la instrucción "else if (ix !== -1)" a:

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

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

En caso de que alguien quiera implementar todos los events en "una línea", aquí estoy compartiendo el código que uso en el proyecto ASP.NET MVC .

¡Y gracias a @klenwell por su solución!

 $('#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); } }); 

Tenga en count que el Model es el Model ASP.NET MVC.

Puedes leer más sobre esos events aquí http://bootstrap-datepicker.readthedocs.org/en/release/events.html

Y sobre bootstrap-datepicker.js

Esta parece ser la solución más genérica, ya que hubo un problema cuando hacemos clic en el text de input y hacemos clic en algún otro componente en la página web, aparte de la selección de date:

 //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); } }); 

amablemente sugerir si alguna modificación es necesaria

  • El button JavaScript de input de text deja de funcionar en Bootstrap cuando agrego mi CSS. ¿Algún consejo?
  • Cómo agregar desplazamiento a jquery scrolltop
  • Twitter Bootstrap: cómo agregar un poco más de margen entre emergente emergente y elemento
  • Twitter Bootstrap Carousel Slide no funciona
  • Cambie la configuration modal del background de Bootstrap mientras está abierto
  • No se puede get un modo de arranque simple para trabajar
  • ui angular modal después del evento cerrado
  • Establecer el map en pantalla completa de leaflet.js usando bootstrap
  • Bootstrap modal hace que la barra de desplazamiento desaparezca después del cierre
  • Pestañas Bootstrap automáticas
  • Twitter Bootstrap Transition Conflict prototypejs
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.