web-dev-qa-db-fra.com

Comment pré-renseigner une zone 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 sur 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 faire en sorte que jQuery préremplisse la zone de texte elle-même avec la date d'aujourd'hui au chargement de la page, sans que l'utilisateur fasse quoi que ce soit? 99% du temps, la date du jour par défaut sera ce qu'ils veulent.

javascriptjqueryjquery-uidatejquery-ui-datepicker
226
Marcus

Mise à jour: Il y a des rapports que cela ne fonctionne plus dans Chrome.

C'est concis et fait le travail:

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

Vous devez d'abord appeler datepicker ()> alors utilisez 'setDate' pour obtenir la date du jour.

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

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

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

Cela fonctionnera PAS avec seulement 

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

NOTE: Les paramètres setDate acceptables sont décrits ici

218
Ravi Ram
var myDate = new Date();
var prettyDate =(myDate.getMonth()+1) + '/' + myDate.getDate() + '/' +
        myDate.getFullYear();
$("#date_pretty").val(prettyDate);

semblait fonctionner, mais il pourrait y avoir un meilleur moyen là-bas ..

71
lucas

La méthode setDate() 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 indiqué dans la documentation, setDate() accepte avec joie l'objet, la date et le numéro JavaScript, ainsi qu'une chaîne:

La nouvelle date peut être un objet Date ou une chaîne dans la date actuelle format (par exemple '01/26/2009 '), un nombre de jours à compter 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 le. sélectionné . rendez-vous amoureux.

Si vous le souhaitez, définissez defaultDate property dans le constructeur ne le fait pas mettez à jour le contrôle associé.

56
Salman A

Régler sur aujourd'hui:

$('#date_pretty').datepicker('setDate', '+0');

Réglé sur hier:

$('#date_pretty').datepicker('setDate', '-1');

Et ainsi de suite avec un nombre quelconque de jours avant ou après _ ​​date du jour.

Voir jQuery UI ›Méthodes› setDate .

25
KirilleXXI

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
Marcus

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-un par vous lors de l'initialisation du datepicker (si vous l'avez attribué!);)

7
Jeff Girard

Celui-ci a fonctionné pour moi.

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

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 cela a également fonctionné:

$(".date-pick").datepicker().datepicker("setDate", new Date());
5
Gary Medina
$('input[name*="date"]').datepicker({
        dateFormat: 'dd-mm-yy',
        changeMonth: true,
        changeYear: true,
        beforeShow: function(input, instance) { 
            $(input).datepicker('setDate', new Date());
        }
    });
4
quocnguyen

Pour pré-renseigner la date, vous devez d'abord initialiser datepicker, puis transmettre la valeur du paramètre setDate.

$("#date_pretty").datepicker().datepicker("setDate", new Date());
2
Nadir

Vous avez 2 options:

OPTION A) Marque comme "actif" dans votre calendrier, uniquement lorsque vous cliquez dans 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 today . Vous devez d'abord renseigner le datepicker.

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

Je pensais juste ajouter mes deux sous. Le sélecteur est utilisé sur un formulaire d'ajout/mise à jour. Il était donc nécessaire d'afficher la date provenant de la base de données si vous modifiez un enregistrement existant ou la date du jour sinon. 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; ?>
  });
1
Les Mizzell

Afin de régler le sélecteur de date sur une certaine heure par défaut (la date actuelle dans mon cas) lors du chargement, ET avoir ensuite la possibilité de choisir une autre date, la syntaxe est la suivante:

    $(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
maozx
var prettyDate = $.datepicker.formatDate('dd-M-yy', new Date());
alert(prettyDate);

Attribuez la valeur prettyDate au contrôle nécessaire.

0
gmail user

Essaye ça 

$(this).datepicker("destroy").datepicker({
            changeMonth: false, changeYear: false,defaultDate:new Date(), dateFormat: "dd-mm-yy",  showOn: "focus", yearRange: "-5:+10"
        }).focus();
0
thejustv

Cela fonctionne mieux pour moi, car j’ai parfois de la difficulté à appeler .datepicker('setDate', new Date());, car cela gêne si j’ai le datepicker déjà configuré avec des paramètres. 

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