jQuery UI DatePicker - Changer le format de la date

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

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

Et le JS suivant:

$('#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. Existe-t-il un moyen de le récupérer dans le format DD-MM-YYYY?

En voici une spécifique à 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

à l'intérieur du code du script jQuery, collez simplement le code.

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

cela devrait fonctionner.

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

Vous devez formater la valeur retournée en une chaîne en utilisant votre format de date. Utilisez la formatDatefonction 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 .

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

Copiez le lien ci-dessous et collez la balise head:

   <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 voulez deux (2) entrée de type texte comme Start Dateet End Dateensuite utiliser ce script et le changement de 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"/>

format de date

Format des dates analysées et affichées. Cet attribut est l'un des attributs de régionalisation. Pour une liste complète des formats possibles, voir la fonction formatDate.

Exemples de code Initialisez un sélecteur de date avec l'option dateFormat spécifiée.

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

Obtenez ou définissez l'option dateFormat, après init.

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

getDaterenvoie une date JavaScript. Utilisez le code suivant pour formater cette date:

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

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

$.datepicker.formatDate( format, date, settings ) - Formatez une date dans une valeur de chaîne avec un format spécifié.

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

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

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

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

Essayez d'utiliser le

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

et il y a beaucoup d'options disponibles Pour le sélecteur de date, vous pouvez le trouver ici

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

C'est ainsi que nous appelons le sélecteur de date 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
        });
      });

<input type="text" id="datepicker"></p>

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 pris en charge 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 d'exécuter cette page HTML, vous pouvez voir plusieurs formats.

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Format date</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
    $( "#datepicker" ).datepicker();
    $( "#format" ).change(function() {
        $( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
    });
});
</script>
</head>
<body>

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

<p>Format options:<br />
<select id="format">
    <option value="mm/dd/yy">Default - mm/dd/yy</option>
    <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
    <option value="d M, y">Short - d M, y</option>
    <option value="d MM, y">Medium - d MM, y</option>
    <option value="DD, d MM, yy">Full - DD, d MM, yy</option>
    <option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
</select>
</p>


</body>
</html>

Cela fonctionne aussi:

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

<script>
    $(function() {  
        $("#datepicker").datepicker(); 
        $('#datepicker').datepicker('option', {dateFormat: 'd MM y'});
    }); 
    $("#startDate").datepicker({dateFormat: 'd MM y'}); 
</script>

Cela fonctionne bien. Essaye ça.

Collez ces liens dans votre section de tête.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

Voici le codage JS.

 <script>

        $(document).ready(function () {
            $('#completionDate').datepicker({
                dateFormat: 'yy-mm-dd', // enter date format you prefer (e.g. 2018-10-09)
                changeMonth: true,
                changeYear: true,
                yearRange: "-50:+10",
                clickInput: true,

                onSelect: function (date) {
                    loadMusterChit();
                }

            });
        });

    </script>

Si vous configurez un sélecteur de date sur un input[type="text"]élément, il se peut que vous n'obteniez pas une date au format cohérent, en particulier lorsque l'utilisateur ne suit pas le format de date pour la saisie de données.

Par exemple, lorsque vous définissez la dateFormat en tant que dd-mm-yyet les types d'utilisateurs 1-1-1. Le sélecteur de date le convertira en Jan 01, 2001interne mais l'appel val()à l'objet datepicker renverra la chaîne "1-1-1"- exactement ce qui est dans le champ de texte.

Cela implique que vous devez soit valider la saisie de l'utilisateur pour vous assurer que la date entrée est au format que vous attendez, soit ne pas autoriser l'utilisateur à saisir les dates sous forme libre (préférant plutôt le sélecteur de calendrier). Même ainsi, il est possible de forcer le code datepicker pour vous donner une chaîne formatée comme vous vous y attendez:

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, bien que la getDate()méthode du sélecteur de date renvoie une date, elle ne peut faire que des entrées utilisateur qui ne correspondent pas exactement au format de date. Cela signifie qu'en l'absence de validation, il est possible d'obtenir une date de retour différente de celle attendue par l'utilisateur. Caveat emptor .

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

<script src="jqueryCalendar/jquery-1.6.2.min.js"></script>
<script src="jqueryCalendar/jquery-ui-1.8.15.custom.min.js"></script>
<link rel="stylesheet" href="jqueryCalendar/jqueryCalendar.css">

Ensuite, vous suivez ce code,

<script>
     jQuery(function() {
     jQuery( "#date" ).datepicker({ dateFormat: 'dd/mm/yy' });
                });
</script>

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;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
</head>
<body>
<h3>Japanese JQuery UI Datepicker</h3>
<input type="text" id="japaneseCalendar"/>

</body>
</html>

Enfin obtenu la réponse pour la méthode de changement de date 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 Jan 18, 2012.

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

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Datepicker - Display month &amp; year menus</title>
    <link rel="stylesheet" href="jquery-ui.css" />
    <script src="jquery-1.8.3.js"></script>
    <script src="jquery-ui.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script>
    function pickDate(DateObject){
//      alert(DateObject.name)
       $(function() {
               $("#"+DateObject.name).datepicker({ dateFormat: "dd/mm/yy" }).val()
       });
    }
/*
    $(function() {
        $( "#datepicker" ).datepicker({
            changeMonth: true,
            changeYear: true
        });
    });
*/
    </script>
</head>
<body>

<p>From Date: <input type="text" name="FromDate" id="FromDate" size="9" onfocus="pickDate(this)"/></p>
<p>To Date: <input type="text" name="ToDate" id="ToDate" size="9" onfocus="pickDate(this)" /></p>


</body>
</html>

Je pense que la bonne façon de procéder 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 n'est définie qu'une seule fois et vous utilisez le même formateur pour traduire la chaîne de formatage en la date formatée.

Voici un extrait de date à l'épreuve du temps. Firefox utilise par défaut jquery ui datepicker. Sinon, le sélecteur de date HTML5 est utilisé. Si FF prend jamais en charge HTML5 type = "date", le script sera simplement redondant. N'oubliez pas que les trois dépendances sont nécessaires dans la balise head.

<script>
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<link rel="stylesheet"href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">  
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!--Form element uses HTML 5 type="date"-->
<div class="form-group row">
    <label for="date" class="col-sm-2 col-form-label"Date</label>
    <div class="col-sm-10">          
       <input type="date" class="form-control" name="date" id="date" placeholder="date">
    </div>
</div>

<!--if the user is using FireFox it          
autoconverts type='date' into type='text'. If the type is text the 
script below will assign the jquery ui datepicker with options-->
<script>
$(function() 
{
  var elem = document.createElement('input');
  elem.setAttribute('type', 'date');

  if ( elem.type === 'text' ) 
  {
    $('#date').datepicker();
    $( "#date" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );     
  }
});

vous devez utiliser data-date-format="yyyy-mm-dd"dans votre champ de saisie html et sélecteur de données initial dans JQuery comme simple

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

Vous pouvez ajouter et essayer de cette façon:

Fichier HTML :

<p><input type="text" id="demoDatepicker" /></p>

Fichier JavaScript :

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

C'est ce qui a fonctionné pour moi:

$.fn.datepicker.defaults.format = 'yy-mm-dd'

J'ai donc lutté avec cela et j'ai pensé que je devenais fou, le truc c'est que le datpicker bootstrap était implémenté et non jQuery donc les options étaient différentes;

$('.dateInput').datepicker({  format: 'dd/mm/yyyy'})