jQuery UI DatePicker - Modifier le format de la date
J'utilise l'UI DatePicker de jQuery UI en tant que 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. Est-il possible de le faire retourner au format DD-MM-YYYY?
Voici un spécifique pour votre code:
var date = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' }).val();
Plus d'informations générales disponibles ici:
dans le code de script jQuery, collez simplement le code.
$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });
ça devrait marcher.
La méthode getDate de datepicker renvoie un type de date et non une chaîne.
Vous devez formater la valeur renvoyée en 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 .
Voici le code complet pour le sélecteur de date avec le format de date (aa/mm/jj).
Copiez le lien ci-dessous et collez la balise principale:
<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) entrées de texte comme Start Date et End Date, utilisez ce script et modifiez le format 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 texte 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 retourne 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 )- 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 .
Le 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 datepicker avec l'option dateFormat spécifiée.
$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });Récupère ou définit l'option dateFormat après init.
//getter var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" ); //setter $( ".selector" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
<script type="text/javascript">
$(function() {
$( "#date" ).datepicker( {minDate: '0', dateFormat: 'yy-dd-mm' } );
});
</script>
$("#datepicker").datepicker("getDate") renvoie un objet de 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
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 ainsi que nous appelons 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, tout 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 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" });
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>
Il suffit de lancer 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>
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()
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>
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>
Si vous configurez un sélecteur de date sur un élément input[type="text"], il se peut que la date ne soit pas systématiquement formatée, en particulier lorsque l'utilisateur ne respecte pas le format de date pour la saisie de données.
Par exemple, lorsque vous définissez dateFormat sur dd-mm-yy et que l'utilisateur saisit 1-1-1. Datepicker convertira ceci en Jan 01, 2001 en interne mais l'appelant val() sur l'objet datepicker renverra la chaîne "1-1-1" - exactement ce qui se trouve dans le champ de texte.
Cela implique que vous devez soit valider la saisie de l'utilisateur pour vous assurer que la date saisie est dans le format que vous attendez, soit ne pas permettre à l'utilisateur de saisir des dates en format libre (préférant le sélecteur de calendrier). Même ainsi, il est possible de forcer le code datepicker pour vous donner une chaîne au format conforme à vos attentes:
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 méthode getDate() du sélecteur de date renvoie une date, elle ne peut en faire que beaucoup avec une entrée 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 de retour différente de celle attendue par l'utilisateur. Caveat emptor .
Enfin obtenu la réponse pour la méthode de changement de date datepicker:
$('#formatdate').change(function(){
$('#datpicker').datepicker("option","dateFormat","yy-mm-dd");
});
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>J'utilise ceci:
var strDate = $("#dateTo").datepicker('getDate').format('yyyyMMdd');
Ce qui retourne une date de format comme "20120118" pour Jan 18, 2012.
Le code ci-dessous peut aider à vérifier si le formulaire a plus d'un champ de date:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Display month & 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 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 format n'est définie qu'une seule fois et que vous utilisez le même outil de formatage pour traduire la chaîne de format en date formatée.
C'est ce qui a fonctionné pour moi:
$.fn.datepicker.defaults.format = 'yy-mm-dd'
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 de rien n'était
$("#issue_date").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true
});
Vous pouvez ajouter et essayer de cette façon:
HTML fichier:
<p><input type="text" id="demoDatepicker" /></p>
JavaScript fichier:
$(function() {
$("#demoDatepicker").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
constrainInput: false
});
});
Voici un extrait de date de preuve future prêt à l'emploi. Firefox utilise par défaut jquery ui datepicker. Sinon, datepicker HTML5 est utilisé. Si jamais FF supporte 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' );
}
});