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


238

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.


7
La réponse la plus populaire est meilleure que la réponse acceptée. il vaut mieux changer la réponse acceptée.
ahmadali shafiee


1
@ahmadalishafiee (et tout le monde). La solution actuellement acceptée a été acceptée le 2015-05-07.
Teepeemm

Réponses:


569

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

3
Cette solution est élégante
cachée le

2
C'est celui qui a réellement fonctionné pour moi et non la solution acceptée. Merci
Mehdiway

7
Cela ne fonctionnera pas, vous devez d'abord appeler $ (". Date-pick"). Datepicker (); puis $ (". date-pick"). datepicker ('setDate', new Date ());
Misha Akopov

9
Ne fonctionne plus dans Chrome après la récente mise à jour du navigateur
Max Flex

3
Travaux. Je mets le $(".date-pick").datepicker().datepicker('setDate', new Date()); tho
seebiscuit

221

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


3
En utilisant jQueryUI 1.8, j'ai trouvé que cette solution était la seule (saine) façon d'y parvenir.
brianz

13
$ (". selector"). datepicker (). datepicker ("setDate", new Date ()); fonctionnera et ne fera pas jQuery rechercher le DOM deux fois.
abc123

1
Grande réponse acceptée dit seulement $ (". Date-pick"). Datepicker ("setDate", new Date ()); et cela ne fonctionne pas sans le premier appel $ (". date-pick"). datepicker (); votre réponse est bien meilleure
Misha Akopov

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


Cela fonctionne assez bien, sauf pour deux choses: 1) J'espérais utiliser la méthode jQuery pour obtenir la date actuelle, mais cela n'a peut-être pas d'importance. 2) cette solution produit une valeur exactement un mois avant la date d'aujourd'hui!
Marcus

2
OH - tu as raison! check it out - w3schools.com/jsref/jsref_obj_date.asp - le mois est 0-11 - vous devrez ajouter 1 .. curieusement, getDate est 1-31, mais getMonth est 0-11 ..
lucas

3
Il existe un moyen plus simple .. voir mon article ci-dessous.
Ravi Ram

Cette solution permet d'afficher le texte directement et de définir la date simultanément tandis que la solution de CiscoIPPhone a besoin d'une autre étape pour afficher la valeur sans ouvrir le sélecteur.
Afshar Mohebbi

4
Car setDatevous pouvez également utiliser la notation relative habituelle de datepicker, par exemple pour obtenir le lendemain, tapez simplement .datepicker('setDate', '+1d').
kosii

59

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


1
Pourquoi est-ce que cela fonctionne dans votre démo? Lorsque je copie ce code dans mon site, la boîte de dialogue continue d'apparaître lorsque le pg se charge.
chobo2

1
Cela a fonctionné pour moi - la réponse acceptée et les autres options ci-dessus ne l'ont pas fait.
lydiat

Il s'agit d'une solution beaucoup, bien meilleure que n'importe laquelle des solutions ci-dessus.
adamj

Meilleure réponse pour cette question à l'heure actuelle, même si j'avais besoin que le format de la date soit "mm-jj-aa" pour correspondre au sélecteur de date.
John81

26

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 .


1
Super, comme d'autres l'ont mentionné, vous devez avoir appelé datepicker () une fois déjà,$(".date-pick").datepicker("setDate", '+0');
jwbensley

Cela a également fonctionné comme je le souhaitais, car ma dateFormat doit correspondre au format de date de MySQL (aa-mm-jj). Ce setDate n'ajoute aucun remplissage au mois et au jour.
jjohn

9

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!


7

Celui-ci a fonctionné pour moi.

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

6

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


5

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

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

2

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

cette solution a fonctionné pour moi dans le chrome, d'autres répertoriés ici ne l'ont pas fait
Mike Volmar

2

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

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; ?>
  });

1

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

1
l'option A est bonne car le sélecteur de date peut rester vide jusqu'à ce qu'une date soit sélectionnée, date à laquelle il est par défaut la date actuelle
waxingsatirical

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

Attribuez la prettyDate au contrôle nécessaire.


0

Essaye ça

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

0

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

0

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.


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

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


Mon navigateur n'a pas reconnu la fonction asString (). Je l'ai fait comme ceci: $ (". Date-pick"). Datepicker ('setDate', new Date ());
CiscoIPPhone

1
Je pense que asString () devrait être toString ().
rg88

1
DatePicker de Kevin Luck et DatePicker Jquery UI sont deux datpickers très différents.
Craig Hooghiem

@gamerzfuse jQuery UI datepicker est basé sur celui de Kevin Luck.
Mathias Bynens
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.