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.

224
demandé sur Salman A 2008-10-24 17:33:42

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());
551
répondu CiscoIPPhone 2015-11-13 18:20:52

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

216
répondu Ravi Ram 2014-04-10 17:17:59
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..

71
répondu lucas 2011-01-17 16:25:03

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

Démo

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

56
répondu Salman A 2013-06-28 09:40:04

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 .

25
répondu KirilleXXI 2012-06-23 18:38:34

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!

9
répondu Marcus 2012-03-10 00:01:07

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é!);)

7
répondu Jeff Girard 2011-01-17 16:23:00

celui-ci travaillait pour moi.

$('#inputName')
  .datepicker()
  .datepicker('setDate', new Date());
7
répondu Celestz 2013-04-08 03:44:07

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()); 
5
répondu Gary Medina 2012-10-23 23:58:39
$('input[name*="date"]').datepicker({
        dateFormat: 'dd-mm-yy',
        changeMonth: true,
        changeYear: true,
        beforeShow: function(input, instance) { 
            $(input).datepicker('setDate', new Date());
        }
    });
4
répondu quocnguyen 2011-02-16 08:16:30

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 
        });
  });
1
répondu maozx 2012-07-10 22:52:16

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; ?>
  });
1
répondu Les Mizzell 2014-01-08 14:25:21

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());
1
répondu Nadir 2015-07-05 10:58:02

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());
1
répondu Vero O 2015-09-03 12:45:43
var prettyDate = $.datepicker.formatDate('dd-M-yy', new Date());
alert(prettyDate);

Assigner le prettyDate au contrôle nécessaire.

0
répondu gmail user 2011-01-17 16:21:58

Essayez cette

$(this).datepicker("destroy").datepicker({
            changeMonth: false, changeYear: false,defaultDate:new Date(), dateFormat: "dd-mm-yy",  showOn: "focus", yearRange: "-5:+10"
        }).focus();
0
répondu thejustv 2015-02-26 15:08:44

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'));
0
répondu Alpha2k 2016-03-22 13:35:55
$(function()
{
$('.date-pick').datePicker().val(new Date().asString()).trigger('change');
});

Source: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerDefaultToday.html

-1
répondu 2008-12-29 15:23:54