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

  • Registrar un controller de events de arranque en el controller angular
  • React bootstrap: agregar propiedad bsStyle personalizada al button
  • Problemas de "popover" en twitter bootstrap css / javascript library
  • Cómo crear un Dynamic Bootstrap Multiselect
  • ¿Cómo adjuntar events "deslizar" y "deslizar" al carrusel del kit de herramientas de Bootstrap?
  • Angular-ui-bootstrap acordeón y queuepsar animation no funciona
  • ¿CÓMO PUBLICAR los datos de una forma modal de bootstrap?
  • Bootstrap .downdown li color de background
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.