jQuery-UI datepicker data predefinita

Question

Ho un problema con il datepicker jQuery-UI, ho cercato e cercato ma non ho trovato la risposta. Ho il seguente codice:

<script type="text/javascript"> 
$(function() {    
    $("#birthdate").datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     yearRange: '1920:2010', 
     dateFormat : 'dd-mm-yy', 
     defaultDate: '01-01-1985' 
    }); 
}); 
</script> 

voglio che quando l'utente clicca nell'input #birthdate che la data selezionata per essere 01-01-1985, ora è l'impostazione della data corrente.

Answer 1

Provare a passare in un oggetto Date. Non riesco a capire perché non funziona nel formato che ha inserito:

<script type="text/javascript"> 
$(function() {    
    $("#birthdate").datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     yearRange: '1920:2010', 
     dateFormat : 'dd-mm-yy', 
     defaultDate: new Date(1985, 00, 01) 
    }); 
}); 
</script> 

http://api.jqueryui.com/datepicker/#option-defaultDate

specificare una data effettiva tramite un oggetto Data o come una stringa nel data correnteFormato o un numero di giorni da oggi (ad esempio +7) o una stringa di valori e punti ('y' per anni, 'm' per mesi, 'w' per settimane, 'd' per giorni, ad es. '+ 1m + 7d'), o null per oggi.

Answer 2

Si può provare con il codice che è di seguito.

Farà in modo che la data predefinita diventi la data che stai cercando.

$('#birthdate').datepicker("setDate", new Date(1985,01,01)); 

Answer 3

Vedendo che:

Impostare la data per evidenziare sulla prima apertura se il campo è vuoto. Specificare una data effettiva tramite un oggetto Date o una stringa nel dataform corrente o un numero di giorni da oggi (ad esempio +7) o una stringa di valori e punti ('y' per anni, 'm' per mesi, 'w' per settimane, 'd' per giorni, es. '+ 1m + 7d'), o null per oggi.

Se il dateFormat corrente non viene riconosciuto, è comunque possibile utilizzare l'oggetto Date utilizzando new Date(year, month, day)

Nel tuo esempio, questo dovrebbe funzionare (non ho provato):

<script type="text/javascript"> 
$(function() {    
    $("#birthdate").datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     yearRange: '1920:2010', 
     dateFormat : 'dd-mm-yy', 
     defaultDate: new Date(1985,01,01) 
    }); 
}); 
</script> 

Answer 4

jQuery UI Datepicker è codificato per evidenziare sempre la data locale dell'utente utilizzando la classe ui-state-highlight. Non esiste alcuna opzione integrata per cambiarlo.

Un metodo, descritto in modo simile in altre risposte alle domande relative, è quello di ignorare il CSS per quella classe per abbinare ui-state-default del vostro tema, ad esempio:

.ui-state-highlight { 
    border: 1px solid #d3d3d3; 
    background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x; 
    color: #555555; 
} 

Tuttavia questo non è molto utile se si stanno usando temi dinamici, o se il tuo intento è quello di evidenziare un giorno diverso (ad esempio, per avere "oggi" basarsi sull'orologio del tuo server piuttosto che sul client).

Un approccio alternativo consiste nell'override del prototipo DatePicker responsabile dell'evidenziazione del giorno corrente.

Supponendo che si stia utilizzando una versione ridotta del javascript dell'interfaccia utente, i seguenti frammenti possono risolvere questi problemi.

---

Se il vostro obiettivo è quello di prevenire mettendo in evidenza il giorno corrente del tutto:

// copy existing _generateHTML method 
var _generateHTML = jQuery.datepicker.constructor.prototype._generateHTML; 
// remove the string "ui-state-highlight" 
_generateHtml.toString().replace(' ui-state-highlight', ''); 
// and replace the prototype method 
eval('jQuery.datepicker.constructor.prototype._generateHTML = ' + _generateHTML); 

Questo cambia il relativo codice (unminimized per migliorare la leggibilità) da:

[...](printDate.getTime() == today.getTime() ? ' ui-state-highlight' : '') + [...] 

a

[...](printDate.getTime() == today.getTime() ? '' : '') + [...] 

---

Se il vostro obiettivo è quello di cambiare la definizione di datepicker di "oggi":

var useMyDateNotYours = '07/28/2014'; 
// copy existing _generateHTML method 
var _generateHTML = jQuery.datepicker.constructor.prototype._generateHTML; 
// set "today" to your own Date()-compatible date 
_generateHTML.toString().replace('new Date,', 'new Date(useMyDateNotYours),'); 
// and replace the prototype method 
eval('jQuery.datepicker.constructor.prototype._generateHTML = ' + _generateHTML); 

Questo cambia il relativo codice (unminimized per migliorare la leggibilità) da:

[...]var today = new Date();[...] 

a

[...]var today = new Date(useMyDateNotYours);[...] 
// Note that in the minimized version, the line above take the form `L=new Date,` 
// (part of a list of variable declarations, and Date is instantiated without parenthesis) 

anziché useMyDateNotYours ovviamente potresti anche iniettare una stringa, una funzione o qualsiasi altra cosa che soddisfi le tue esigenze.

Answer 5

Se si desidera aggiornare il giorno evidenziato in un giorno diverso in base all'ora del server, è possibile sovrascrivere il codice del Raccoglitore di data per consentire una nuova opzione personalizzata denominata localToday o qualsiasi altra cosa si desideri denominarla.

Un piccolo tweak per la risposta selezionata nel jQuery UI DatePicker change highlighted "today" date

// Get users 'today' date 
var localToday = new Date(); 
localToday.setDate(tomorrow.getDate()+1); // tomorrow 

// Pass the today date to datepicker 
$("#datepicker").datepicker({ 
    showButtonPanel: true, 
    localToday: localToday // This option determines the highlighted today date 
}); 

ho sovrascritto 2 metodi DatePicker utilizzare per condizionalmente una nuova impostazione per la data "oggi", invece di un new Date(). La nuova impostazione è denominata localToday.

Override $.datepicker._gotoToday e $.datepicker._generateHTML come questo:

$.datepicker._gotoToday = function(id) { 
    /* ... */ 
    var date = inst.settings.localToday || new Date() 
    /* ... */ 
} 

$.datepicker._generateHTML = function(inst) { 
    /* ... */ 
    tempDate = inst.settings.localToday || new Date() 
    /* ... */ 
} 

Ecco un demo che mostra il codice e pieno utilizzo: http://jsfiddle.net/NAzz7/5/

Answer 6

Jquery Datepicker defaultDate solo impostare la data predefinita che si è scelto sul calendario che si apre quando fai clic sul tuo campo. Se vuoi che la data predefinita APPARE sul tuo input prima che l'utente faccia clic sul campo, devi dare un val() al tuo campo. Qualcosa di simile a questo:

$("#searchDateFrom").datepicker({ defaultDate: "-1y -1m -6d" }); 
$("#searchDateFrom").val((date.getMonth()) + '/' + (date.getDate() - 6) + '/' + (date.getFullYear() - 1)); 

Answer 7

$("#birthdate").datepicker("setDate", new Date(1985,01,01))