Imposta la data per essere inizialmente vuota in bootstrap-datepicker

Question

Sto usando il bootstrap-datepicker nel mio sito. Il datepicker verrà utilizzato per definire i filtri di ricerca. Ho bisogno che il valore iniziale dell'elemento di input datepicker sia vuoto, quindi non introdurrà il filtro data per i risultati della ricerca. Quando l'utente fa clic sull'input di testo collegato a Datepicker, la finestra a comparsa Datepicker dovrebbe selezionare il primo giorno del prossimo mese.

Problema: Se dovessi impostare una data iniziale (come illustrato di seguito), il metodo di scrittura sarà popolato con la data odierna, che non è quello che voglio. Tuttavia, se non imposto la data iniziale, datepicker mostrerà gli anni '70. Cosa dovrei fare?

Simile a: La demo per jQueryUI Datepicker

JS Codice

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(); 

codice HTML

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

Tentativo non riuscito

Datepicker non popup sul cliccando il metodo di scrittura 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

Ho appena incontrato un caso d'uso molto simile. Con un paio di modifiche a bootstrap-datepicker.js, credo di averlo funzionato.

È necessario modificare lo script in due punti.

Per il campo data, sto verificando se la data (questa data) è impostata sulla data di inizio Unix (.e.g data vuota). In tal caso, esci e lascia il campo vuoto.

(linea: 95 - ca.)

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 

Per la discesa del calendario, sono anche il controllo per vedere se la data (this.date) è impostato la data di inizio di Unix. In tal caso, imposta la data su oggi. Lo faccio in modo che quando un utente fa clic sul campo della data, visualizza il mese corrente anziché il febbraio 1970.

(linea: 144 - ca.)

riempimento: 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 

Credo che è tutto quello che devi fare. Ho appena implementato questo nella mia soluzione, quindi se qualcuno trova problemi o ha suggerimenti migliori, mi piacerebbe sentire.

Answer 2

Non sarà possibile senza editing di bootstrap-datepicker.js

la data predefinita provengono da value = e se si lascia lo svuota corrisponde al 01-01-1970 (data di inizio unix).

Anche se metti una taglia grossa sulla domanda, c'è troppo lavoro.

Ti consiglio di trovare un altro plug-in.

io non sono così sicuro circa la jQuery UI DatePicker dal momento che c'è incompatibilità con Twitter boostrap https://github.com/twitter/bootstrap/issues/156

Answer 3

provare questo ...

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

Answer 4

C'è un modo molto più semplice per farlo! Per impostare un valore

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

Per impostare un valore vuoto

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

Answer 5

Ho avuto lo stesso problema, sono uscito con questa soluzione, ho fatto una funzione per recuperare la data:

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

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

Nota: sto provando a standardizzare ogni getter e setter per avere la possibilità di cambiare il plug in datepicker in futuro

Answer 6

sto lavorando con bootstrap v3.1.1 e

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

non ha funzionato per me.

devi usare

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

per popolare il controllo DatePicker

Answer 7

mi sono imbattuto in un problema simile e questo funziona per me.

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

Così ora, quando i miei pagina carica il valore predefinito è vuoto, il campo non è necessaria in modo che non c'è bisogno di scegliere la data e il mio controller si prenderà cura di questo, oppure possono scegliere la data e anche il controller si prenderà cura di esso.

Answer 8

Se non è possibile trovare tale funzionalità, non modificare le origini. Essere intelligenti. Cerca la classe CSS 'attiva' e rimuovila dinamicamente o sovrascrivi la regola nel foglio di stile.

Ad esempio, ignorare questa regola (uso più forte di selezione per il vostro datepicker):

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 rimuovere in modo dinamico questa classe, utilizzando js.

Answer 9

Nelle versioni recenti di bootstrap, sto usando Bootstrap V3.3.6 & Boostrap-timepicker V0.5.2, i seguenti lavori bello e semplice:

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

Per il mio caso personale che faccio un assegno condizioni all'interno della val SET utilizzando la sintassi rasoio MVC di distinguere tra un "add" e "modifica" in questo modo:

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

Per rendere il mio lavoro al 100%, come richiesto, ho esplicitamente impostare il valore di ingresso e le seguenti opzioni:

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

Per ulteriori opzioni, o controllare il file di codice sorgente o this Link

Answer 10

Per l'ultima versione

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

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