jQuery UI DatePicker – Modifier le format de date

J’utilise l’interface utilisateur DatePicker de l’interface utilisateur jQuery comme sélecteur autonome. J’ai ce code:

Et les JS suivants:

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

Lorsque j’essaie de renvoyer la valeur avec ce code:

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

Je suis retourné ceci:

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

Ce qui est totalement le mauvais format. Y a-t-il un moyen de le récupérer dans le format DD-MM-YYYY ?

En voici un spécifique à votre code:

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

Plus d’informations générales disponibles ici:

Dans le code du script jQuery, il suffit de coller le code.

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

cela devrait fonctionner.

La méthode getDate de datepicker renvoie un type de date, pas une chaîne.

Vous devez formater la valeur renvoyée dans une chaîne en utilisant votre format de date. Utilisez la fonction formatDate de datepicker:

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

La liste complète des spécificateurs de format est disponible ici .

Code complet pour le sélecteur de date avec format de date (aa / mm / jj).

Copier le lien ci-dessous et coller dans la balise head:

      

Copier le code ci-dessous et coller entre la balise body:

  Date:  

Si vous souhaitez deux (2) types de texte de saisie comme Start Date et End Date utilisez ce script et modifiez le format de date.

      

Deux textes de saisie comme:

  Start Date:  End Date:  

getDate fonction getDate renvoie une date JavaScript. Utilisez le code suivant pour formater cette date:

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

Il utilise une fonction utilitaire intégrée à datepicker:

$.datepicker.formatDate( format, date, settings ) – Formate une date en une valeur de chaîne avec un format spécifié.

La liste complète des spécificateurs de format est disponible ici .

format de date

Le format pour les dates analysées et affichées. Cet atsortingbut est l’un des atsortingbuts de régionalisation. Pour une liste complète des formats possibles, voir la fonction formatDate.

Exemples de code Initialisez un datpicker avec l’option dateFormat spécifiée.

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

Obtenir ou définir l’option dateFormat, après init.

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

$("#datepicker").datepicker("getDate") renvoie un object date, pas une chaîne.

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

Essayez d’utiliser le

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

et il y a beaucoup d’options disponibles Pour le datepicker vous pouvez le trouver ici

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

C’est la façon dont nous appelons le datepicker avec le paramètre

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

vous pouvez simplement utiliser ce format dans votre fonction comme

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

Cela fonctionne aussi:

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

Si vous avez besoin de la date au format aa-mm-jj, vous pouvez utiliser ceci: –

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

Vous pouvez trouver tous les formats supportés https://jqueryui.com/datepicker/#date-formats

J’avais besoin de 06, décembre 2015, j’ai fait ceci: –

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

Il suffit de lancer cette page HTML, vous pouvez voir plusieurs formats.

    jQuery UI Datepicker - Format date        

Date:

Format options:

J’utilise jquery pour datepicker.Ces jqueries sont utilisées pour cela

    

Ensuite, vous suivez ce code,

  

Enfin, j’ai obtenu la réponse à la méthode de changement de date de datepicker:

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

J’utilise ceci:

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

Qui renvoie une date de format comme ” 20120118 ” pour le Jan 18, 2012 .

Le code ci-dessous peut aider à vérifier si le formulaire a plus d’un champ de date:

     jQuery UI Datepicker - Display month & year menus        

From Date:

To Date:

Si vous configurez un datepicker sur un élément input[type="text"] , vous risquez de ne pas obtenir une date au format cohérent, en particulier lorsque l’utilisateur ne suit pas le format de date pour la saisie des données.

Par exemple, lorsque vous définissez le format de date comme dd-mm-yy et que l’utilisateur 1-1-1 . Le datpicker le convertira au Jan 01, 2001 interne, mais appeler val() sur l’object datepicker renverra la chaîne "1-1-1" – exactement ce qui se trouve dans le champ de texte.

Cela signifie que vous devez soit valider la saisie de l’utilisateur pour vous assurer que la date saisie est dans le format attendu ou ne permet pas à l’utilisateur d’entrer des dates freeform (préférant le sélecteur de calendrier). Même dans ce cas, il est possible de forcer le code datepicker à vous donner une chaîne formatée comme prévu:

 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" 

Sachez cependant que si la méthode getDate() du datpicker renvoie une date, elle ne peut en faire autant avec une saisie utilisateur qui ne correspond pas exactement au format de date. Cela signifie qu’en l’absence de validation, il est possible d’obtenir une date différente de celle attendue par l’utilisateur. Caveat emptor .

Mon option est donnée ci-dessous:

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

Voici un extrait de date prédéfini. Firefox utilise par défaut jquery ui datepicker. Sinon, le datepicker HTML5 est utilisé. Si FF supporte déjà HTML5 type = “date”, le script sera simplement redondant. N’oubliez pas que les trois dépendances sont nécessaires dans la balise head.

     

Vous devez utiliser data-date-format="yyyy-mm-dd" dans votre champ de saisie html et le sélecteur de données initial dans JQuery comme si c’était simple

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

Je pense que la bonne façon de faire serait quelque chose comme ceci:

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

De cette façon, vous vous assurez que la chaîne de formatage est définie une seule fois et que vous utilisez le même formateur pour traduire la chaîne de format dans la date formatée.

Vous pouvez append et essayer de cette façon:

Fichier HTML :

  

Fichier JavaScript :

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