Comment puis-je pré-remplir une boîte de texte jQuery Datepicker avec la date d'aujourd'hui?
j'ai un calendrier très simple jQuery Datepicker:
$(document).ready(function(){
$("#date_pretty").datepicker({
});
});
et bien sûr en HTML...
<input type="text" size="10" value="" id="date_pretty"/>
la date D'Aujourd'hui est bien mise en évidence pour l'utilisateur quand ils soulèvent le calendrier, mais comment puis-je obtenir jQuery pour pré-remplir la boîte de texte elle-même avec la date d'aujourd'hui sur la charge de page, sans que l'utilisateur ne fasse quoi que ce soit? 99% du temps, la date par défaut d'aujourd'hui sera ce qu'ils veulent.
18 réponses
mise à Jour: Il y a des rapports cela ne fonctionne plus dans Chrome.
C'est concis et fait le travail:
$(".date-pick").datepicker('setDate', new Date());
vous devez d'abord appeler datepicker () > puis utilisez 'setDate' pour obtenir la date courante.
$(".date-pick").datepicker();
$(".date-pick").datepicker("setDate", new Date());
ou enchaînez l'appel de la méthode setDate après l'initialisation de votre datepicker, comme indiqué dans un commentaire sur cette réponse
$('.date-pick').datepicker({ /* optional option parameters... */ })
.datepicker("setDate", new Date());
Il PAS travailler avec
$(".date-pick").datepicker("setDate", new Date());
NOTE : Acceptable les paramètres de setDate sont décrits ici
var myDate = new Date();
var prettyDate =(myDate.getMonth()+1) + '/' + myDate.getDate() + '/' +
myDate.getFullYear();
$("#date_pretty").val(prettyDate);
semblait fonctionner, mais il pourrait y avoir une meilleure façon..
la méthode setDate()
fixe la date et met à jour le contrôle associé. Voici comment:
$("#datepicker1").datepicker({
dateFormat: "yy-mm-dd"
}).datepicker("setDate", "0");
comme mentionné dans la documentation, setDate()
accepte volontiers L'objet Date JavaScript, le numéro ou une chaîne de caractères:
la nouvelle date peut être un objet Date ou une chaîne de caractères dans la date courante format (p. ex. '01/26/2009'), un certain nombre de jours à partir d'aujourd'hui (par exemple, +7) ou un chaîne de valeurs et de périodes ("y" pour les années, " m "pour les mois," w " pour semaines, 'd' pour les jours, par exemple '+1m +7d), ou null pour effacer sélectionnés date.
dans le cas où vous vous demandez, le réglage defaultDate
propriété dans le constructeur ne met pas mettre à jour le contrôle associé.
mis à aujourd'hui :
$('#date_pretty').datepicker('setDate', '+0');
mis à hier :
$('#date_pretty').datepicker('setDate', '-1');
et ainsi de suite avec un nombre quelconque de jours avant ou après date d'aujourd'hui .
voir" 1519270920 › jQuery UI " Methods › setDate .
la solution est:
$(document).ready(function(){
$("#date_pretty").datepicker({
});
var myDate = new Date();
var month = myDate.getMonth() + 1;
var prettyDate = month + '/' + myDate.getDate() + '/' + myDate.getFullYear();
$("#date_pretty").val(prettyDate);
});
Merci grayghost!
ce code vous assure d'utiliser le format de votre lecteur de données:
$('#date-selector').datepicker('setDate', new Date());
pas besoin de ré-appliquer le format, il utilise le datepicker prédéfini-un par vous sur l'initialisation du datepicker (si vous l'avez assigné!);)
celui-ci travaillait pour moi.
$('#inputName')
.datepicker()
.datepicker('setDate', new Date());
le code de David Kinghead a fonctionné parfaitement, merci!
$(".date-pick").datepicker();
$(".date-pick").datepicker("setDate", new Date());
j'ai aussi réussi à le couper un peu et il a aussi fonctionné:
$(".date-pick").datepicker().datepicker("setDate", new Date());
$('input[name*="date"]').datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
beforeShow: function(input, instance) {
$(input).datepicker('setDate', new Date());
}
});
afin de définir le curseur de données à une certaine heure par défaut (la date courante dans mon cas) lors du chargement, et ensuite avoir l'option de choisir une autre date la syntaxe est:
$(function() {
// initialize the datapicker
$("#date").datepicker();
// set the time
var currentDate = new Date();
$("#date").datepicker("setDate",currentDate);
// set the options for the button
$("#date").datepicker("option",{
dateFormat: 'dd/mm',
showOn: "button",
// whatever option Or event you want
});
});
j'ai pensé ajouter mes deux cents. Le picker est utilisé sur un formulaire add / update, il devait donc afficher la date provenant de la base de données si vous éditez un enregistrement existant, ou afficher la date d'aujourd'hui si ce n'est pas le cas. Ci-dessous fonctionne très bien pour moi:
$( "#datepicker" ).datepicker();
<?php if (!empty($oneEVENT['start_ts'])): ?>
$( "#datepicker" ).datepicker( "setDate", "<?php echo $startDATE; ?>" );
<? else: ?>
$("#datepicker").datepicker('setDate', new Date());
<?php endif; ?>
});
pour pré-remplir la date, vous devez d'abord initialiser datepicker, puis passer la valeur du paramètre setDate.
$("#date_pretty").datepicker().datepicker("setDate", new Date());
vous avez 2 options:
OPTION a) marque" actif " dans votre calendrier, seulement lorsque vous cliquez sur l'entrée.
Js :
$('input.datepicker').datepicker(
{
changeMonth: false,
changeYear: false,
beforeShow: function(input, instance) {
$(input).datepicker('setDate', new Date());
}
}
);
Css :
div.ui-datepicker table.ui-datepicker-calendar .ui-state-active,
div.ui-datepicker table.ui-datepicker-calendar .ui-widget-content .ui-state-active {
background: #1ABC9C;
border-radius: 50%;
color: #fff;
cursor: pointer;
display: inline-block;
width: 24px; height: 24px;
}
l'OPTION B) Entrée par défaut aujourd'hui. Vous devez d'abord remplir le lecteur de données .
$("input.datepicker").datepicker().datepicker("setDate", new Date());
var prettyDate = $.datepicker.formatDate('dd-M-yy', new Date());
alert(prettyDate);
Assigner le prettyDate au contrôle nécessaire.
Essayez cette
$(this).datepicker("destroy").datepicker({
changeMonth: false, changeYear: false,defaultDate:new Date(), dateFormat: "dd-mm-yy", showOn: "focus", yearRange: "-5:+10"
}).focus();
cela fonctionne mieux pour moi car j'ai parfois des problèmes à appeler .datepicker('setDate', new Date());
car cela gâche si j'ai déjà configuré le curseur de données avec les paramètres.
$("#myDateText").val(moment(new Date()).format('DD/MM/YYYY'));
$(function()
{
$('.date-pick').datePicker().val(new Date().asString()).trigger('change');
});
Source: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerDefaultToday.html