jQuery UI DatePicker – Alterar formato de data

Eu estou usando o UI DatePicker da interface do usuário do jQuery como o selecionador autônomo. Eu tenho esse código:

E o seguinte JS:

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

Quando tento devolver o valor com este código:

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

Eu sou retornado isto:

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

Qual é totalmente o formato errado. Existe uma maneira que eu possa obtê-lo retornado no formato DD-MM-YYYY ?

Aqui está um específico para o seu código:

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

Mais informações gerais disponíveis aqui:

dentro do código do script jQuery, cole o código.

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

isso deve funcionar.

O método getDate do datepicker retorna um tipo de data, não uma string.

Você precisa formatar o valor retornado para uma string usando o formato de data. Use a function formatDate do datepicker:

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

A lista completa de especificadores de formato está disponível aqui .

Aqui código completo para selecionador de data com formato de data (aa / mm / dd).

Copie o link abaixo e cole na tag head:

      

Copie o código abaixo e cole entre a tag body:

  Date:  

Se você quiser dois (2) tipos de texto de input, como Start Date e End Date , use este script e altere o formato de data.

      

Dois texto de input como:

  Start Date:  End Date:  

getDate function getDate retorna uma data JavaScript. Use o código a seguir para formatar esta data:

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

Ele usa uma function de utilidade que é embutida no datepicker:

$.datepicker.formatDate( format, date, settings ) – Formata uma data em um valor de string com um formato especificado.

A lista completa de especificadores de formato está disponível aqui .

Formato de data

O formato das datas analisadas e exibidas. Este atributo é um dos atributos de regionalização. Para uma lista completa dos possíveis formatos, veja a function formatDate.

Exemplos de código Inicialize um datepicker com a opção dateFormat especificada.

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

Obter ou definir a opção dateFormat, após o init.

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

$("#datepicker").datepicker("getDate") retorna um object de data, não uma string.

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

Tente usar o

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

e há muita opção disponível Para o datepicker você pode encontrá-lo aqui

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

É assim que chamamos o datepicker com o 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 } }); }); 

você pode simplesmente usar este formato em você funcionar como

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

Isso funciona também:

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

Se você precisar da data no formato aa-mm-dd, você pode usar isto: –

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

Você pode encontrar todo o formato suportado https://jqueryui.com/datepicker/#date-formats

Eu estava precisando de 06 de dezembro de 2015, eu fiz isso: –

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

Basta executar esta página HTML, você pode ver vários formatos.

    jQuery UI Datepicker - Format date        

Date:

Format options:

Eu estou usando jquery para datepicker.Estes jqueries são usados ​​para isso

    

Então você segue este código,

  

Finalmente tenho a resposta para o método de mudança de data do datepicker:

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

Eu uso isso:

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

Que retorna uma data de formato como ” 20120118 ” para Jan 18, 2012 .

O código abaixo pode ajudar a verificar se o formulário recebeu mais de um campo de data:

     jQuery UI Datepicker - Display month & year menus        

From Date:

To Date:

Se você configurar um datepicker em um elemento de input[type="text"] , poderá não obter uma data formatada de forma consistente, especialmente quando o usuário não seguir o formato de data para a input de dados.

Por exemplo, quando você define o dateFormat como dd-mm-yy e o usuário digita 1-1-1 . O datepicker irá converter isso para Jan 01, 2001 internamente, mas chamar val() no object datePicker retornará a string "1-1-1" – exatamente o que está no campo de texto.

Isso significa que você deve validar a input do usuário para garantir que a data inserida esteja no formato esperado ou não, permitindo que o usuário insira datas de forma livre (preferindo o seletor de calendar). Mesmo assim, é possível forçar o código do datepicker a fornecer uma string formatada como você 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" 

Entretanto, esteja ciente de que, embora o método getDate() do datepicker retorne uma data, ele pode fazer tanto com a input do usuário que não corresponde exatamente ao formato da data. Isso significa que, na ausência de validação, é possível obter uma data de retorno diferente do que o usuário espera. Emptor de advertência .

Minha opção é dada abaixo:

 $(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

Aqui está um trecho de data de prova futuro pronto para uso. O padrão do Firefox é jquery ui datepicker. Caso contrário, o datepicker HTML5 é usado. Se o FF já suportar o tipo HTML5 = “date”, o script será simplesmente redundante. Não esqueça que as três dependencies são necessárias na tag head.

     

você deve usar data-date-format="yyyy-mm-dd" em seu campo de input html e selecionador de dados inicial em JQuery assim como simples

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

Eu acho que a maneira correta de fazer isso seria algo assim:

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

Dessa forma, você garante que a string de formato seja definida apenas uma vez e use o mesmo formatador para converter a string de formatação na data formatada.

Você pode adicionar e tentar desta maneira:

Arquivo HTML :

  

Arquivo JavaScript :

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