Comment préremplir une zone de texte jQuery Datepicker avec la date d'aujourd'hui?

J'ai un calendrier jQuery Datepicker très simple:

$(document).ready(function(){
    $("#date_pretty").datepicker({ 
    });
});

et bien sûr dans le HTML ...

<input type="text" size="10" value="" id="date_pretty"/>

La date d'aujourd'hui est bien mise en évidence pour l'utilisateur lorsqu'il affiche le calendrier, mais comment puis-je obtenir jQuery pour préremplir la zone de texte elle-même avec la date d'aujourd'hui au chargement de la 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.

Mise à jour: certains rapports indiquent que cela ne fonctionne plus dans Chrome.

C'est concis et fait le travail (obsolète):

$(".date-pick").datepicker('setDate', new Date());

C'est moins concis, l'utilisation du chaînage lui permet de fonctionner en chrome (2019-06-04):

$(".date-pick").datepicker().datepicker('setDate', new Date());

Vous devez d'abord appeler datepicker ()> puis utiliser 'setDate' pour obtenir la date actuelle.

$(".date-pick").datepicker();
$(".date-pick").datepicker("setDate", new Date());

OU enchaînez votre appel à la méthode setDate après votre initialisation de datepicker, comme indiqué dans un commentaire sur cette réponse

$('.date-pick').datepicker({ /* optional option parameters... */ })
               .datepicker("setDate", new Date());

Cela ne fonctionnera PAS avec juste

$(".date-pick").datepicker("setDate", new Date());

REMARQUE : les paramètres setDate acceptables 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 là-bas ..

La setDate()méthode définit 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 avec plaisir l'objet Date JavaScript, un numéro ou une chaîne:

La nouvelle date peut être un objet Date ou une chaîne au format de date actuel (par exemple '01 / 26/2009 '), un nombre de jours à partir d'aujourd'hui (par exemple +7) ou une chaîne de valeurs et de périodes (' y 'pour ans, 'm' pour les mois, 'w' pour les semaines, 'd' pour les jours, par exemple '+ 1m + 7d'), ou null pour effacer la date sélectionnée.

Au cas où vous vous poseriez la question, la définition de la defaultDatepropriété dans le constructeur ne met pas à 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 n'importe quel nombre de jours avant ou après la date d'aujourd'hui .

Voir Interface utilisateur jQuery ›Méthodes› 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!

Celui-ci a fonctionné pour moi.

$('#inputName')
  .datepicker()
  .datepicker('setDate', new Date());

Ce code vous assurera d'utiliser le format de votre datepicker:

$('#date-selector').datepicker('setDate', new Date());

Pas besoin de réappliquer le format, il utilise le datepicker prédéfini par vous lors de l'initialisation de datepicker (si vous l'avez attribué!);)

Le code de David K ​​Egghead a parfaitement fonctionné, merci!

$(".date-pick").datepicker(); 
$(".date-pick").datepicker("setDate", new Date()); 

J'ai aussi réussi à le couper un peu et ça 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 datepicker à une certaine heure par défaut (la date actuelle dans mon cas) lors du chargement, ET puis avoir la possibilité 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 
        });
  });

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

Je pensais juste ajouter mes deux cents. Le sélecteur est utilisé sur un formulaire d'ajout / mise à jour, il devait donc afficher la date provenant de la base de données si vous modifiez un enregistrement existant, ou afficher la date d'aujourd'hui dans le cas contraire. Ci-dessous fonctionne 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; ?>
  });

Vous avez 2 options:

OPTION A) Marque comme "actif" dans votre calendrier, uniquement 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;
        }​

OPTION B) Entrée par défaut avec aujourd'hui. Vous devez d'abord remplir le sélecteur de date.

$ ("input.datepicker"). datepicker (). datepicker ("setDate", new Date ());

var prettyDate = $.datepicker.formatDate('dd-M-yy', new Date());
alert(prettyDate);

Attribuez la prettyDate au contrôle nécessaire.

Essaye ça

$(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 pour appeler .datepicker('setDate', new Date());car cela gâche si si le sélecteur de date est déjà configuré avec des paramètres.

$("#myDateText").val(moment(new Date()).format('DD/MM/YYYY'));

Utilisez ceci:

$(".datepicker").datepicker({ dateFormat: 'dd-M-yy' }).datepicker('setDate', new Date());

Pour obtenir la date au format Par exemple: 10 octobre 2019, ce qui sera plus compréhensible pour les utilisateurs.

$(function()
{
$('.date-pick').datePicker().val(new Date().asString()).trigger('change');
});

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