jQuery UI DatePicker – Cambia il formato della data

Sto usando UI DatePicker dall’interfaccia utente di jQuery come selettore autonomo. Ho questo codice:

E il seguente JS:

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

Quando provo a restituire il valore con questo codice:

 var date = $('#datepicker').datepicker('getDate'); 

Sono restituito questo:

 Tue Aug 25 2009 00:00:00 GMT+0100 (BST) 

Che è totalmente il formato sbagliato. C’è un modo per ottenerlo restituito nel formato DD-MM-YYYY ?

Ecco uno specifico per il tuo codice:

 var date = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' }).val(); 

Ulteriori informazioni generali disponibili qui:

all’interno del codice dello script jQuery è sufficiente incollare il codice.

 $( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' }); 

questo dovrebbe funzionare

Il metodo getDate di datepicker restituisce un tipo di data, non una stringa.

È necessario formattare il valore restituito su una stringa utilizzando il formato della data. Usa la funzione dateDate di formatDate :

 var dateTypeVar = $('#datepicker').datepicker('getDate'); $.datepicker.formatDate('dd-mm-yy', dateTypeVar); 

L’elenco completo degli specificatori di formato è disponibile qui .

Qui il codice completo per la selezione della data con formato data (aa / mm / gg).

Copia il link sottostante e incolla il tag head:

      

Copia qui sotto il codice e incollalo tra tag del corpo:

  Date:  

Se si desidera inserire due (2) tipi di testo di testo come Start Date e End Date utilizzare questo script e modificare il formato della data.

      

Due testi di input come:

  Start Date:  End Date:  

getDate funzione getDate restituisce una data JavaScript. Utilizzare il seguente codice per formattare questa data:

 var dateObject = $("#datepicker").datepicker("getDate"); var dateString = $.datepicker.formatDate("dd-mm-yy", dateObject); 

Usa una funzione di utilità che è incorporata in DatePicker:

$.datepicker.formatDate( format, date, settings ) – Formatta una data in un valore stringa con un formato specificato.

L’elenco completo degli specificatori di formato è disponibile qui .

formato data

Il formato per le date analizzate e visualizzate. Questo attributo è uno degli attributi di regionalizzazione. Per un elenco completo dei possibili formati, vedere la funzione formatDate.

Esempi di codice Inizializza un datepicker con l’opzione dateFormat specificata.

 $( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' }); 

Ottieni o imposta l’opzione dateFormat, dopo init.

 //getter var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" ); //setter $( ".selector" ).datepicker( "option", "dateFormat", 'yy-mm-dd' ); 

$("#datepicker").datepicker("getDate") restituisce un object data, non una stringa.

 var dateObject = $("#datepicker").datepicker("getDate"); // get the date object var dateString = dateObject.getFullYear() + '-' + (dateObject.getMonth() + 1) + '-' + dateObject.getDate();// Ynj in php date() format 
  

Prova ad usare il

 $( ".selector" ).datepicker({ dateFormat: 'dd/mm/yy' }); 

e c’è un sacco di opzioni disponibili Per il datepicker puoi trovarlo qui

 http://api.jqueryui.com/datepicker/ 

Questo è il modo in cui chiamiamo il DatePicker con il parametro

 $(function() { $('.selector').datepicker({ dateFormat: 'dd/mm/yy', changeMonth: true, numberOfMonths: 1, buttonImage: 'contact/calendar/calendar.gif', buttonImageOnly: true, onSelect: function(selectedDate) { // we can write code here } }); }); 

puoi semplicemente usare questo formato nella tua funzione proprio come

  $(function() { $( "#datepicker" ).datepicker({ dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true }); });  

Anche questo funziona:

 $("#datepicker").datepicker({ dateFormat:'dm-yy' }); 

Se hai bisogno della data nel formato aa-mm-gg, puoi usare questo: –

 $("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }); 

Puoi trovare tutti i formati supportati https://jqueryui.com/datepicker/#date-formats

Avevo bisogno di 06, dic 2015, l’ho fatto: –

 $("#datepicker").datepicker({ dateFormat: "d M,y" }); 
 $("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val() 
  

Basta eseguire questa pagina HTML, è ansible vedere diversi formati.

    jQuery UI Datepicker - Format date        

Date:

Format options:

Sto usando jquery per datepicker. Queste jqueries sono usate per questo

    

Quindi segui questo codice,

  

Finalmente ho ottenuto la risposta per il metodo di modifica della data di datepicker:

 $('#formatdate').change(function(){ $('#datpicker').datepicker("option","dateFormat","yy-mm-dd"); }); 

Io uso questo:

 var strDate = $("#dateTo").datepicker('getDate').format('yyyyMMdd'); 

Che restituisce una data di formato come ” 20120118 ” per il Jan 18, 2012 .

Sotto il codice potrebbe aiutare a verificare se il modulo ha ottenuto più di 1 campo data:

     jQuery UI Datepicker - Display month & year menus        

From Date:

To Date:

Se si imposta un Datepicker su un elemento input[type="text"] potrebbe non essere ansible ottenere una data formattata in modo coerente, in particolare quando l’utente non segue il formato della data per l’immissione dei dati.

Ad esempio, quando imposti dateFormat come dd-mm-yy e l’utente digita 1-1-1 . Il datepicker convertirà internamente questo al Jan 01, 2001 ma chiamando val() sull’object datepicker restituirà la stringa "1-1-1" – esattamente ciò che è nel campo di testo.

Ciò implica che è necessario convalidare l’input dell’utente per garantire che la data inserita sia nel formato previsto o non consenta all’utente di inserire date di forma libera (preferendo invece il selettore di calendario). Anche così è ansible forzare il codice datepicker per darti una stringa formattata come ti aspetti:

 var picker = $('#datepicker'); picker.datepicker({ dateFormat: 'dd-mm-yy' }); picker.val( '1-1-1' ); // simulate user input alert( picker.val() ); // "1-1-1" var d = picker.datepicker( 'getDate' ); var f = picker.datepicker( 'option', 'dateFormat' ); var v = $.datepicker.formatDate( f, d ); alert( v ); // "01-01-2001" 

Si noti tuttavia che mentre il metodo getDate() di datepicker restituisce una data, può fare così tanto con l’input dell’utente che non corrisponde esattamente al formato della data. Ciò significa che in assenza di convalida è ansible ottenere una data diversa da quella che l’utente si aspetta. Caveat emptor .

La mia opzione è data qui sotto:

 $(document).ready(function () { var userLang = navigator.language || navigator.userLanguage; var options = $.extend({}, $.datepicker.regional["ja"], { dateFormat: "yy/mm/dd", changeMonth: true, changeYear: true, highlightWeek: true } ); $("#japaneseCalendar").datepicker(options); }); 
 #ui-datepicker-div { font-size: 14px; } 
           

Japanese JQuery UI Datepicker

Ecco uno snippet di date a prova di futuro. Il valore predefinito di Firefox è jquery ui datepicker. In caso contrario, viene utilizzato il DatePicker HTML5. Se FF supporta mai HTML5 type = “date” lo script sarà semplicemente ridondante. Non dimenticare che le tre dipendenze sono necessarie nel tag head.

     

dovresti usare data-date-format="yyyy-mm-dd" nel campo di immissione html e il selettore di dati iniziale in JQuery come se fosse semplice

 $("#issue_date").datepicker({ dateFormat: "yy-mm-dd", changeMonth: true, changeYear: true }); 

Penso che il modo corretto per farlo sarebbe qualcosa del genere:

 var picker = $('.date-picker'); var date = $.datepicker.formatDate( picker.datepicker('option', 'dateFormat'), picker.datepicker('getDate')); 

In questo modo ci si assicura che la stringa di formato sia definita una sola volta e si usi lo stesso formattatore per tradurre la stringa di formato nella data formattata.

Puoi aggiungere e provare in questo modo:

File HTML :

  

File JavaScript :

 $(function() { $("#demoDatepicker").datepicker({ dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, constrainInput: false }); });