jQuery UI DatePicker-Change Date Format

dans le code de script jQuery il suffit de coller le code.

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

ça devrait marcher.

la méthode du getDate retourne un type de date, pas une chaîne.

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

ici code complet pour dattier avec le format de date (yy/mm/jj).

copier le lien ci-dessous et coller dans l'étiquette de tête:

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

copier ci-dessous le code et coller entre l'étiquette du corps:

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

si vous désirez deux(2) types de texte comme Start Date et End Date utilisez alors ce script et changez 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"/>

getDate la fonction renvoie 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 qui est intégrée dans datepicker:

$.datepicker.formatDate( format, date, settings ) - Formater 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 .

dateFormat

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

exemples de Code initialiser un curseur de données avec l'option dateFormat défini.

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

d'Obtenir ou de définir la dateFormat option, après init.

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

$("#datepicker").datepicker("getDate") retourne 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>

essayer d'utiliser le

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

et il ya beaucoup d'option disponible pour le lecteur de données, vous pouvez le trouver ici ""

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

c'est la façon dont nous appelons le curseur de données 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>

Cela fonctionne aussi:

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

si vous avez besoin de la date dans le format yy-mm-dd,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()

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

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>

si vous configurez un curseur de données sur un élément input[type="text"] , il se peut que vous n'obteniez pas une date formatée de façon uniforme, particulièrement lorsque l'utilisateur ne suit pas le format de la date pour la saisie des données.

par exemple, lorsque vous définissez le format de données comme dd-mm-yy et les types d'utilisateurs 1-1-1 . Le "datepicker" le convertira en Jan 01, 2001 en interne mais en appelant val() sur l'objet" datepicker "retournera la chaîne "1-1-1" -- exactement ce qui est dans le champ de texte.

cela implique que vous devriez soit valider la saisie de l'utilisateur pour vous assurer que la date saisie est dans le format que vous attendez ou ne pas permettre à l'utilisateur d'entrer des dates en format libre (préférant à la place le calendrier choisir). Malgré cela, il est possible de forcer le code datepicker pour vous donner une chaîne formatée comme vous 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"

soyez conscient cependant que bien que la méthode getDate() du curseur de données retournera une date, il peut seulement faire beaucoup avec l'entrée d'utilisateur qui ne correspond pas exactement au format de date. Cela signifie en l'absence de validation, il est possible d'obtenir une date de retour est différent de ce qu'attend l'utilisateur. Caveat emptor .

j'utilise jquery pour datepicker.Ces séries sont utilisées pour le

<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">

alors vous suivez ce code,

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

a finalement obtenu la réponse pour la méthode de changement de date de cliqueur de données:

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

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>

je pense que la bonne façon de faire ceci 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 format n'est définie qu'une seule fois et vous utilisez le même formatteur pour traduire la chaîne de format dans la date formatée.

voici un extrait de future preuve de date. Firefox par défaut à jQuery ui datepicker. Sinon, le curseur de données HTML5 est utilisé. Si FF supporte HTML5 type = "date" le script sera simplement redondant. N'oubliez pas 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 pouvez ajouter et essayer de cette façon:

HTML file:

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

JavaScript fichier:

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

vous devez utiliser data-date-format="yyyy-mm-dd" dans votre champ d'entrée html et capteur de données initial en JQuery tout comme simple

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