Establecer fecha para estar inicialmente vacío en bootstrap-datepicker

Question

Estoy usando el bootstrap-datepicker en mi sitio. El datepicker se usará para definir los filtros de búsqueda. Necesito que el valor inicial del elemento de entrada datepicker esté vacío, por lo que no introducirá el filtro de fecha para los resultados de la búsqueda. Cuando el usuario hace clic en la entrada de texto vinculada a Datepicker, el cuadro emergente Datepicker debe seleccionar el primer día del mes siguiente.

Problema: Si tuviera que establecer una fecha inicial (como se muestra a continuación), la entrada de texto se rellenará con la fecha de hoy que no es lo que quiero. Sin embargo, si no configuro la fecha inicial, el selector de fecha mostrará los años 70. ¿Que debería hacer?

similares a: La demo de jQueryUI Datepicker

Código JS

var now = new Date(); 
var nextMonth = new Date(); 
nextMonth.setDate(1); 
nextMonth.setMonth(now.getMonth() + 1); 
var prettyDate = nextMonth.getMonth() + '/' + nextMonth.getDate() + '/' + nextMonth.getFullYear(); 
$('#listing_filter_available').val(prettyDate); 
$('#listing_filter_available').datepicker(); 

Código HTML

<input type="text" id="listing_filter_available" class="input-small" placeholder="Date Available" /> 

intento fallido

selector de fechas no emergente al hacer clic en la entrada de texto el

$(function() { 

    var now = new Date(); 
    var nextMonth = new Date(); 
    nextMonth.setDate(1); 
    nextMonth.setMonth(now.getMonth() + 1); 
    var prettyDate = nextMonth.getMonth() + '/' + nextMonth.getDate() + '/' + nextMonth.getFullYear(); 
    $('#listing_filter_available').val(''); // clear the date filter 
    $('#listing_filter_available').click(function() { 
     $('#listing_filter_available').val(prettyDate); 
     $('#listing_filter_available').datepicker(); 
    }); 

}); 

Answer 1

yo sólo encontré con un caso de uso muy similar. Con un par de ajustes para bootstrap-datepicker.js, creo que lo tengo funcionando.

Deberá editar el script en dos lugares.

Para el campo de fecha, estoy verificando si la fecha (this.date) está configurada en la fecha de inicio de Unix (.e.g fecha en blanco). Si es así, salga y deje el campo en blanco.

(línea: 95 - aprox)

setValue: function() { 
     // EDIT - Don't setValue if date = unix date start 
     if (DPGlobal.formatDate(this.date, this.format) == DPGlobal.formatDate(new Date(1970, 1, 1, 0, 0, 0), this.format)) return false; 
     // END EDIT 

Para el calendario desplegable, también estoy comprobando para ver si la fecha (this.date) se establece en la fecha de inicio de Unix. Si es así, configure la fecha para hoy. Hago esto para que cuando un usuario haga clic en el campo de fecha, muestre el mes actual en lugar de febrero de 1970.

(línea: 144 - aprox)

relleno: function() {

 // EDIT - Set date in fill to today if date is "blank" (eg Unix start date) 
      var d = ((DPGlobal.formatDate(this.date, this.format) == DPGlobal.formatDate(new Date(1970, 1, 1, 0, 0, 0), this.format))) ? new Date() : new Date(this.viewDate), 
     // original code 
      // var d = new Date(this.viewDate), 
     // END EDIT 

Creo que es todo lo que necesita hacer. Acabo de implementar esto en mi solución, por lo que si alguien encuentra algún problema o tiene alguna sugerencia mejor, me encantaría saberlo.

Answer 2

No va a ser posible sin edición de arranque-datepicker.js

la fecha predeterminada provenir de valor = y si deja está vacío, corresponde al 01-01-1970 (inicio de fecha de Unix).

Incluso si coloca una gran cantidad de grasa en la pregunta, hay demasiado trabajo.

Te recomiendo que encuentres un plugin diferente.

no estoy tan seguro acerca de la interfaz de usuario jQuery selector de fechas ya que no hay incompatibilidad con boostrap Twitter https://github.com/twitter/bootstrap/issues/156

Answer 3

prueba este ...

http://aymkdn.github.com/Datepicker-for-Bootstrap/

Answer 4

¡Hay una manera mucho más fácil de hacer esto! Para establecer un valor

$('#listing_filter_available').datepicker(); 
$('#listing_filter_available').datepicker('setValue', nextMonth); 

para establecer un valor en blanco

$('#listing_filter_available').datepicker(); 
$('#listing_filter_available').val(''); 

Answer 5

que tenía el mismo problema, me encontré con esta solución, hice una función para recuperar la fecha:

getDate: function (input) { 
    if ($(input).val() == '') { 
    return ''; 
    } 

    return $(input).data('datepicker').date; 
} 

Nota: estoy tratando de estandarizar cada getter y setter para tener la posibilidad de cambiar el plugin datepicker en el futuro

Answer 6

estoy trabajando con v3.1.1 arranque y

$('#listing_filter_available').datepicker('setValue', nextMonth); 

no funcionó para mí.

usted tiene que utilizar

$('#listing_filter_available').datepicker('setDate', nextMonth); 

para rellenar el control selector de fecha

Answer 7

me encontré con un problema similar y esto funciona para mí.

$(".date-picker").datepicker("setDate", ""); 

Así que ahora cuando mis página se carga el valor predeterminado es vacío, el campo no es necesaria para que no se tienen que elegir una fecha y mi controlador se encargará de eso, o pueden elegir una fecha y el controlador también se encargará de eso.

Answer 8

Si no puede encontrar tal funcionalidad, no edite las fuentes. Se inteligente. Busque la clase CSS 'activa' y elimínela dinámicamente o anule la regla en la hoja de estilos.

Por ejemplo, anular esta regla (selector de usar más fuerte para su selector de fechas):

datepicker td.active, .datepicker td.active:hover { 
    background-color: #006dcc; 
    background-image: linear-gradient(to bottom, #0088cc, #0044cc); 
    background-repeat: repeat-x; 
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
    color: #fff; 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 
} 

o eliminar dinámicamente esta clase, usando js.

Answer 9

En versiones recientes de arranque, estoy usando V3.3.6 Bootstrap & V0.5 boostrap-TimePicker.2, las siguientes obras agradable y simple:

$('#txtTimepicker').timepicker().val(''); 

Por mi caso personal que hago una comprobación de condición dentro de la Val Set utilizando la sintaxis de la maquinilla de afeitar MVC para distinguir entre un "complemento" y "editar" de esta manera:

$('#txtTimepicker').timepicker().val('@(Model.Created_Date == null ? "" : Model.Created_Date.ToString("H:mm tt"))'); 

Para hacer la mía funciona al 100% como se requiere, que establece explícitamente el valor de entrada y las siguientes opciones:

.timepicker({ format: 'HH:mm:ss', 'defaultTime' : 'value', 'showMeridian': false, 'showSeconds': true, 'disableFocus' : false}) 

Para obtener más opciones, o bien comprobar el archivo de código fuente o this enlace

Answer 10

Para la última versión

$("input[type=date]").datepicker({ defaultViewDate: {} }); 

Fuente: http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#defaultviewdate