jQuery UI DatePicker - Modifier le format de la date

Question

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

 <div id="datepicker"></div>
 

Et le suivant JS

 $('#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 at-il un moyen que je puisse retourner le JJ-MM-AAAA ??

Answer 1

En voici une spécifique pour votre code:

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

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

• http://api.jqueryui.com/datepicker/#option-dateFormat
• http://api.jqueryui.com/datepicker/#utility-formatDate

Answer 2

Dans le code du script jQuery, collez simplement le code.

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

cela devrait fonctionner.

Answer 3

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

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

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

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

Answer 4

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

Copiez le lien ci-dessous et collez le tag principal:

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>  
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

   <script type="text/javascript">
       $(function() {
               $("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()
       });
   </script>
 

Copiez le code ci-dessous et collez-le entre les balises body:

       Date: <input type="text" id="datepicker" size="30"/>    
 

Si vous souhaitez deux (2) types de texte d'entrée comme Start Date et End Date utilisez ce script et modifiez le format de la date.

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>  
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

   <script type="text/javascript">
       $(function() {
               $("#startdate").datepicker({ dateFormat: "dd-mm-yy" }).val()
               $("#enddate").datepicker({ dateFormat: "dd-mm-yy" }).val()
       });

   </script>  
 

Deux textes d'entrée comme:

       Start Date: <input type="text" id="startdate" size="30"/>    
      End Date: <input type="text" id="enddate" size="30"/>