jQuery UI DatePicker – Cambiar formato de fecha

Estoy usando el UI DatePicker de jQuery UI como selector independiente. Tengo este código:

Y el siguiente JS:

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

Cuando trato de devolver el valor con este código:

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

Me devolvieron esto:

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

Cuál es totalmente el formato incorrecto. ¿Hay alguna manera de que pueda devolverlo en el formato DD-MM-YYYY ?

Aquí hay uno específico para su código:

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

Información más general disponible aquí:

dentro del código de script de jQuery solo pega el código.

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

Esto debería funcionar.

El método getDate de datepicker devuelve un tipo de fecha, no una cadena.

Necesita formatear el valor devuelto en una cadena usando su formato de fecha. Use la función formatDate ‘s formatDate :

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

La lista completa de especificadores de formato está disponible aquí .

Aquí complete el código para el selector de fecha con formato de fecha (aa / mm / dd).

Copie el enlace a continuación y pegue en la etiqueta principal:

      

Copie el código debajo y pegue entre la etiqueta del cuerpo:

  Date:  

Si desea dos (2) texto tipo de entrada como Start Date y End Date finalización, utilice este script y cambie el formato de fecha.

      

Dos entradas de texto como:

  Start Date:  End Date:  

getDate función getDate devuelve una fecha de JavaScript. Use el siguiente código para formatear esta fecha:

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

Utiliza una función de utilidad que está integrada en datepicker:

$.datepicker.formatDate( format, date, settings ) – Formatea una fecha en un valor de cadena con un formato especificado.

La lista completa de especificadores de formato está disponible aquí .

formato de fecha

El formato para las fechas analizadas y visualizadas. Este atributo es uno de los atributos de regionalización. Para obtener una lista completa de los posibles formatos, consulte la función formatDate.

Ejemplos de código Inicializa un datepicker con la opción dateFormat especificada.

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

Obtenga o configure la opción dateFormat, después de init.

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

$("#datepicker").datepicker("getDate") devuelve un objeto de fecha, no una cadena.

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

Intenta usar el

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

y hay muchas opciones disponibles Para el datepicker lo puedes encontrar aquí

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

Esta es la forma en que llamamos a datepicker con el parámetro

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

simplemente puede usar este formato en su función al igual que

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

Esto también funciona:

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

Si necesita la fecha en formato aa-mm-dd, puede usar esto: –

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

Puede encontrar todo el formato compatible https://jqueryui.com/datepicker/#date-formats

Necesitaba 06, diciembre de 2015, hice esto: –

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

Simplemente ejecute esta página HTML. Puede ver varios formatos.

    jQuery UI Datepicker - Format date        

Date:

Format options:

Estoy usando jquery para datepicker. Estas jqueries se usan para eso

    

Entonces sigues este código,

  

Finalmente obtuve la respuesta para el método de cambio de fecha datepicker:

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

Yo uso esto:

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

Que devuelve una fecha de formato como ” 20120118 ” para el Jan 18, 2012 .

El siguiente código puede ayudar a verificar si el formulario obtuvo más de 1 campo de fecha:

 < !doctype html>    jQuery UI Datepicker - Display month & year menus        

From Date:

To Date:

Si configura un selector de fecha en un elemento de input[type="text"] , es posible que no obtenga una fecha de formato uniforme, particularmente cuando el usuario no sigue el formato de fecha para la entrada de datos.

Por ejemplo, cuando configura dateFormat como dd-mm-yy y el usuario escribe 1-1-1 . Datepicker lo convertirá a Jan 01, 2001 internamente, pero al llamar a val() en el objeto datepicker se devolverá la cadena "1-1-1" , exactamente lo que está en el campo de texto.

Esto implica que debe validar la entrada del usuario para asegurarse de que la fecha ingresada está en el formato que espera o no permite al usuario ingresar las fechas de forma libre (prefiriendo en su lugar el selector de calendario). Aun así, es posible obligar al código datepicker a darle una cadena formateada como espera:

 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" 

Sin embargo, tenga en cuenta que aunque el método getDate() del datepicker devolverá una fecha, solo puede hacer mucho con la entrada del usuario que no coincide exactamente con el formato de fecha. Esto significa que, en ausencia de validación, es posible obtener una fecha diferente de la que espera el usuario. Caveat Emptor .

Mi opción se da a continuación:

 $(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; } 
 < !DOCTYPE html>          

Japanese JQuery UI Datepicker

Aquí hay un fragmento de fecha de prueba futura fuera de la caja. Firefox se predetermina a jquery ui datepicker. De lo contrario, se utiliza el marcador de fecha HTML5. Si FF alguna vez admite HTML5 type = “date”, el script simplemente será redundante. No te olvides de las tres dependencias que se necesitan en la etiqueta de la cabeza.

     

deberías usar data-date-format="yyyy-mm-dd" en tu campo de entrada html y selector de datos inicial en JQuery como simple

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

Creo que la forma correcta de hacerlo sería algo como esto:

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

De esta manera, asegúrese de que la cadena de formato esté definida solo una vez y use el mismo formateador para traducir la cadena de formato a la fecha formateada.

Puede agregar y probar de esta manera:

Archivo HTML :

  

Archivo JavaScript :

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