JQuery Datepicker – nessuna data predefinita

Voglio rimuovere la data predefinita nel mio JQuery Datepicker.

Provo il seguente codice:

$(this).datepicker({defaultDate: ''}); 

Ma non sembra funzionare. La data odierna è ancora selezionata come predefinita.

Ho risolto il problema usando un campo nascosto nascosto:

 

e il seguente script:

  

Quindi, ho usato il campo #Date nascosto nelle mie routine di validazione.

Nessuna delle risposte al momento di questa scrittura ha funzionato davvero per me, quindi la mia soluzione è stata messa in chiaro da un paio di risposte (per un datepicker in linea).

  $('.calendar').datepicker("setDate", null); // this unsets the datepicker's internal selected date; it still shows a highlight on today's date that looks like a selected date though $('.calendar').find(".ui-datepicker-current-day").removeClass("ui-datepicker-current-day"); // this actually removes the highlight 

Questo è in realtà un problema aperto con jQuery UI Datepicker . Ecco il ticket per il problema:

Biglietto 8159

Il fulcro di questo problema è il fatto che Datepicker gestisce in modo errato un valore di defaultDate di null . Tra le soluzioni offerte qui, mi piace quella di j-polfer la migliore e la ho migliorata per questo motivo. Il motivo per cui questa soluzione funziona, tuttavia, è dovuto al fatto che esiste una patch integrata nel metodo setDate per cancellare la selezione se viene passato un valore nullo nel parametro date. Ma volevo scoprire perché Datepicker non rispondeva correttamente al defaultDate: null nelle opzioni, quindi ho dato un’occhiata all’origine.

Ho scoperto che dovevo apportare tre modifiche al codice sorgente di Datepicker per risolvere questo problema. Ecco i cambiamenti che ho fatto:

  1. Il metodo _getDefaultDate ha restituito la data corrente quando l’ opzione defaultDate era nullo o mancante (questo è il nocciolo del problema).

Ho cambiato questo metodo da questo …

  _getDefaultDate: function(inst) { return this._restrictMinMax(inst,this._determineDate(inst,this._get(inst, "defaultDate"), new Date())); } 

a questa….

 _getDefaultDate: function(inst) { var def = this._get(inst, "defaultDate"); return def !== null ? this._restrictMinMax(inst, this._determineDate(inst, def , new Date())): null; }, 
  1. Il metodo _setDate stava impostando il giorno selezionato sul giorno corrente quando è stato passato il valore nullo al parametro date. Ho modificato le righe per correggere questo:

Ho cambiato questa linea …

 inst.selectedDay = inst.currentDay = newDate.getDate(); 

a…

 inst.selectedDay = date == null? 0: inst.currentDay = newDate.getDate(); 

e questa linea …

 this._adjustInstDate(inst); 

a…

 if (date != null) { this._adjustInstDate(inst); } 
  1. Infine, il metodo _generateHTML non ha gestito un valore di ritorno di null da _getDefaultDate .

Così ho cambiato questa linea …

  (defaultDate.getTime() === printDate.getTime() && defaultDate.getTime() === selectedDate.getTime()) ? 

a…

 (defaultDate != null && (defaultDate.getTime() === printDate.getTime() && defaultDate.getTime() === selectedDate.getTime())) ? 

Questo è tutto. Ora l’opzione DateData predefinita di Datepicker risponde in modo più intuitivo a un valore di null che viene passato o a questa opzione mancante.

 $('#test').datepicker({ altField: '#alt'}); // No date selected $('#test').datepicker({ altField: '#alt', defaultDate: null}); // No date selected $('#test').datepicker({ altField: '#alt', defaultDate: 0}); // Today selected $('#test').datepicker({ altField: '#alt', defaultDate: +1}); // Tomorrow selected $('#test').datepicker({ altField: '#alt', defaultDate: -1}); // Yesterday selected 

Ecco una demo in JSFIDDLE : Datepicker demo con defaultDate null

Nota: queste modifiche non sono state testate in modo esaustivo, quindi potrebbero esserci altri problemi derivanti dal fatto che il metodo _getDefaultDate ora potrebbe restituire null. Quindi fai i tuoi test prima! 😉

Spero che questo aiuti qualcuno! 🙂

Sulla base delle risposte pubblicate qui, sono riuscito a creare qualcosa che funzionasse. Per i miei scopi, ho avuto un calendario sempre visibile. Se hai bisogno di questo per un calendario popup, dovresti essere in grado di utilizzare il gestore onSelect esistente per eseguire qualcosa di simile la prima volta che viene aperto.

 $("selector").datepicker(/* options */).find(".ui-state-active").removeClass("ui-state-active"); 

Per fortuna, è davvero così semplice con l’ultima versione di jQuery UI (1.10.2 al momento in cui scrivo). Non sembra interferire con il corretto funzionamento del widget. L’unica avvertenza è che l’utilizzo del getDate getter risulta in quella che sarebbe stata normalmente la data selezionata di default.

Ai fini del mio codice, questo è accettabile in quanto i miei utenti non possono continuare (non hanno nemmeno il pulsante continua) finché non hanno fatto clic su una data valida dal selettore. Se questo non è il tuo caso, qualcosa come la risposta di Florian Peschka dovrebbe procurarti ciò di cui hai bisogno.

Per aprire la finestra di dialogo DatePicker, deve essere aperto tra qualche mese di qualche anno. Voglio dire, vuoi mostrare questo dialogo ed essere vuoto? …

Penso che se non vuoi passare nessuna data predefinita, il meglio che puoi fare è ottenere la data corrente con:

 $(document).ready(function() { $('#datepicker').datepicker(); }); 

Passare questo fallirà, a causa del dato defaultDate, non nullo ma vuoto

 $(this).datepicker({defaultDate: ''}); 

Questo è qualcosa che farà ciò che è inteso nel codice precedente

 $(this).datepicker({defaultDate: null}); 

ma il suo comportamento è lo stesso del primo blocco di codice in questa risposta.

Ho lo stesso probleme usando datepicker in linea . Il plugin aggiunge sulla cella di oggi / td la class .ui-datepicker-current-day e .ui-state-active. La mia soluzione è utilizzare una class personalizzata come .ui-datepicker-selected-day e implementa beforeShowDay per gestire da sola la visualizzazione del giorno selezionato. Qualcosa del genere:

 $("datepicker").datepicker({ beforeShowDay: function(date) { var dateIso = $.datepicker.formatDate("yy-mm-dd", date); var dateSelected = $("input").val(); var classDate = ""; if(dateSelected === dateIso){ return [false,"ui-datepicker-selected-day"]; }else{ return [true]; } } 

Esempio di css da mettere in “evidenza” della cella:

 .ui-widget-content .ui-datepicker-selected-day .ui-state-active{ background-color: red; } + disable some css from the plugin 

Ho usato $('.datefield').val('') per mostrare vuoto invece di mostrare la data predefinita.

So che questa è una vecchia domanda e l’ho trovata perché avevo lo stesso requisito; non visualizzare una data nell’input (casella di testo), fare in modo che l’utente selezioni una data dal datepicker.

The Markup (MVC)

 
@Html.TextBox("DateShipOn", Nothing, New With {.class = "DateShipOn", .readonly = "readonly"})

Output HTML:

 

Script (nel documento pronto):

 $('.DateShipOn').datepicker({ constrainInput: true, display: true, border: true, background: true, maxDate: "+1m", minDate: new Date('@minDate') }); $('.DateShipOn').datepicker("setDate", new Date()); 

L’effetto del codice precedente è che la casella di input ha il valore della variabile ‘minDate’ in essa visualizzata E quando si fa clic sull’input, il datepicker scende e il ‘minDate’ è selezionato per impostazione predefinita.

Nota: non è consentito l’inserimento manuale, questo è il motivo dell’attributo ‘readonly’.

Risoluzione:

Tutto quello che dovevo fare, nel mio caso, era commentare / rimuovere la riga:

 $('.DateShipOn').datepicker("setDate", new Date()); 

Il risultato:

L’effetto è quello in mostra;

  • Non c’è un valore di data predefinito nell’input (casella di testo)
  • L’utente non può digitare l’input (casella di testo)
  • Il selettore della data scende senza alcuna data predefinita selezionata
  • Il minDate impedisce le date precedenti alla selezione del valore minDate
  • MaxDate impedisce date dopo la selezione del valore maxDate

Nota: per il mio requisito, ‘+ 1m’ per maxDate limita la selezione della data ai soli 30 giorni dal valore minDate.

Spero che questo aiuti qualcuno fuori.

Ho avuto un problema simile, ma con un comportamento specifico.

(Come nota a margine, penso che il comportamento previsto dovrebbe essere quello di iniziare con la data corrente nel calendario, ma non selezionarlo.)

La mia implementazione includeva un calendario in linea con un altField input nascosto. Quello che ho fatto è stato rimuovere l’opzione altField e aggiungere una funzione onSelect che l’ha aggiornata. In questo modo la data odierna sembra ancora selezionata, ma il campo nascosto che rappresenta il valore reale rimane vuoto.

La mia soluzione prevede di sovrascrivere l’aggiunta di jQuery in modo che possiamo rimuovere gli elementi ogni volta che l’HTML viene rigenerato e aggiunto al div. Questo risolve un lampeggiare della data predefinita quando si cambia mese e si cancella anche il passaggio del mouse.

 (function($) { var origAppend = $.fn.append; $.fn.append = function () { return origAppend.apply(this, arguments).trigger("append"); }; })(jQuery); var datePickerDiv = $("#date-picker"); datePickerDiv.bind("append", function() { $(this).find(".ui-datepicker-days-cell-over").removeClass("ui-datepicker-days-cell-over"); $(this).find(".ui-datepicker-today a ").removeClass("ui-state-highlight ui-state-active ui-state-hover"); }); datePickerDiv.datepicker(); 

Per me va bene:

 $(document).ready(function() { $("#datepicker .ui-state-active").removeClass("ui-state-active"); $("#datepicker .ui-state-highlight").removeClass("ui-state-highlight"); $("#datepicker .ui-datepicker-today").removeClass("ui-datepicker-today"); }); 

Cosa intendi volendo “rimuovere” la data predefinita?

Come pensi che il datepicker si aprirà quando non ha un mese da cui partire ?! Devi avere una data predefinita.

Modifica sul tuo commento

Imposta una data predefinita come vuoi e verifica, se l’utente lo ha cambiato. In tal caso, ha selezionato una data personalizzata.

Un altro approccio potrebbe essere quello di creare una variabile impostata su true non appena l’utente fa clic sul campo datepicker.

Se l’utente invia il modulo, verifichi la presenza di quella variabile. Se è true , l’utente ha selezionato una data. In caso contrario, non ha toccato il campo DatePicker.