Comment puis-je pré-remplir un Datepicker de jQuery zone de texte avec la date d'aujourd'hui?

J'ai une question très simple Datepicker de jQuery calendrier:

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

et bien sûr dans le code HTML...

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

La date d'aujourd'hui est bien mis en évidence pour l'utilisateur quand ils mettent en place le calendrier, mais comment puis-je obtenir jQuery pour pré-remplir la zone de texte avec la date d'aujourd'hui au chargement de la page, sans que l'utilisateur de faire quoi que ce soit? 99% du temps, la date du jour par défaut sera ce qu'ils veulent.

La réponse la plus populaire est mieux que accepté de répondre. il est préférable de changer la accepté de répondre.
ma question relative à la stackoverflow.com/questions/25602649/...
tous les autres). Actuellement accepté solution a été acceptée sur 2015-05-07.

InformationsquelleAutor Marcus | 2008-10-24

555

Mise à jour: Il y a des rapports 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, en utilisant le chaînage permet de travailler en chrome (2019-06-04):
```
$(".date-pick").datepicker().datepicker('setDate', new Date());
```
- C'est tellement plus agréable de la solution que la solution retenue!
- Cette solution est élégante
- Beaucoup mieux que la solution retenue!
- Veuillez voir mes mises à jour de code ci-dessous .. Il a quelques corrections mineures
- C'est celle qui a effectivement travaillé pour moi et pas de la solution retenue. Merci
- J'ai essayé avec cela, mais la saisie de texte est maintenant mis à jour 🙁
- Je voudrais suggérer si le stackoverflow pourrait juste mettre le haut voté réponse sur le dessus, plutôt que comme il est. E. g comme ce que Youtube n'est bon.
- +1, à l'aide de l'objet Date est beaucoup plus propre & bug-preuve. Notez que vous pouvez utiliser des choses comme var myDate = new Date(); myDate.setFullYear(1985); myDate.setMonth(0); /* month is zero-based */ myDate.setDate(28); voir plus developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
- Cela ne fonctionne pas, vous devez d'abord appeler $(".date-pick").datepicker(); puis $(".date-pick").datepicker('setDate", new Date());
- Ne fonctionne plus en Chrome après navigateur de dernière génération mise à jour
- Merci - je suis l'ajout d'un avertissement à ma réponse.
- Ne fonctionne pas dans Firefox ou IE, soit
- Des œuvres. Je suis $(".date-pick").datepicker().datepicker('setDate', new Date()); tho
InformationsquelleAutor CiscoIPPhone
219

Vous devez d'ABORD appeler datepicker() > puis utiliser 'setDate' pour obtenir la date du jour.
```
$(".date-pick").datepicker();
$(".date-pick").datepicker("setDate", new Date());
```
OU de la chaîne de votre setDate appel de la méthode après votre datepicker d'initialisation, comme indiqué dans un commentaire sur cette réponse
```
$('.date-pick').datepicker({ /* optional option parameters... */ })
               .datepicker("setDate", new Date());
```
Il PAS travail avec
```
$(".date-pick").datepicker("setDate", new Date());
```
NOTE : Acceptable setDate paramètres sont décrits ici
- À l'aide de jQueryUI 1.8 j'ai trouvé cette solution pour être le seul (sane) façon d'y parvenir.
- $(".sélecteur").datepicker().datepicker("setDate", new Date()); volonté de travailler et de ne pas faire de jQuery recherche les DOM à deux reprises.
- Grande, a accepté de répondre à dit seulement $(".date-pick").datepicker("setDate", new Date()); et il ne fonctionne pas sans le premier appel $(".date-pick").datepicker(); votre réponse est beaucoup mieux
InformationsquelleAutor Ravi Ram
71
```
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 de sortir de là..
- Cela fonctionne assez bien, sauf pour deux choses: 1) j'ai été un peu en espérant pouvoir utiliser jQuery méthode pour obtenir la date actuelle, mais peut-être qu'il n'a pas d'importance. 2) cette solution produit une valeur exactement un mois avant la date d'aujourd'hui!
- OH, vous avez raison! check it out - w3schools.com/jsref/jsref_obj_date.asp - mois 0-11 - vous devrez ajouter 1.. curieusement, getDate est de 1 à 31, mais getMonth est de 0 à 11..
- Il y a un moyen plus facile .. voir mon post ci-dessous.
- Cette solution nous allons montrer directement le texte et de définir la date simultanément tout en CiscoIPPhone la solution a besoin d'une autre étape pour montrer la valeur sans ouvrir le sélecteur.
- Pour setDate vous pouvez également utiliser l'habituel relative notation de datepicker, par exemple, pour obtenir le jour suivant, tapez simplement .datepicker('setDate', '+1d').
InformationsquelleAutor lucas
57

La setDate() méthode permet de définir la date et les mises à jour de la commande associée. Voici comment:
```
$("#datepicker1").datepicker({
    dateFormat: "yy-mm-dd"
}).datepicker("setDate", "0");
```
Démo

Comme mentionné dans la documentation, setDate() heureusement accepte le JavaScript objet Date, le nombre ou une chaîne de caractères:

La nouvelle date peut-être un objet Date, ou une chaîne de caractères dans le courant de la date
format (par exemple '01/26/2009'), un certain nombre de jours à partir d'aujourd'hui (par exemple, +7) ou un
chaîne de valeur et la durée ("y" pendant des années, " m " pendant des 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, réglage defaultDate propriété dans le constructeur ne pas mise à jour de la commande associée.
- Pourquoi est-il dans votre démonstration, il fonctionne. Quand je copie ce code dans mon site le dialogue ne cesse d'apparaître lorsque le pg charges.
- +1 fonctionne parfaitement bien .. merci
- Cela a fonctionné pour moi - la accepté de répondre et d'autres options ci-dessus n'a pas.
- C'est une bien meilleure solution que de tout ce qui précède.
- Meilleure réponse pour cette question à l'heure actuelle, bien que j'ai besoin de la date format "mm-jj-aa" pour correspondre à l'sélecteur de date.
InformationsquelleAutor Salman A
25

Ensemble de aujourd'hui:
```
$('#date_pretty').datepicker('setDate', '+0');
```
Ensemble de hier:
```
$('#date_pretty').datepicker('setDate', '-1');
```
Et ainsi de suite avec n'importe quel nombre de jours avant ou après date d'aujourd'hui.

Voir jQuery UI › Méthodes › setDate.
- Génial, comme d'autres l'ont mentionné, vous devez avoir appelé datepicker() une fois déjà, $(".date-pick").datepicker("setDate", '+0');
- Cela a également travaillé comme je le souhaite, depuis mon dateFormat doit correspondre à MySQL format de la date (aa-mm-jj). Cette setDate ajoute zéro de remplissage pour le mois et le jour.
InformationsquelleAutor 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);
});

Grâce grayghost!

InformationsquelleAutor Marcus

7

Ce code s'assurer d'utiliser votre datepicker du format:
```
$('#date-selector').datepicker('setDate', new Date());
```
Pas nécessaire de ré-appliquer le format, il utilise le datepicker prédéfinis-un par vous sur datepicker d'initialisation (si vous avez attribué!) 😉
- Celui-ci fonctionne. Droit au but! Merci beaucoup.
InformationsquelleAutor Jeff Girard

Ce a travaillé pour moi.

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

InformationsquelleAutor Celestz

5

David K Intellectuel du code a fonctionné parfaitement, merci!!!!
```
$(".date-pick").datepicker(); 
$(".date-pick").datepicker("setDate", new Date()); 
```
J'ai aussi réussi à couper un peu et il a également travaillé:
```
$(".date-pick").datepicker().datepicker("setDate", new Date()); 
```
- Il est appelé le chaînage
- Aussi cela a fonctionné pour moi....
InformationsquelleAutor Gary Medina

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

InformationsquelleAutor quocnguyen

Afin de définir le datepicker pour un certain temps par défaut (la date actuelle dans mon cas) sur le chargement, ET ont 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 
        });
  });

cette solution a fonctionné pour moi en chrome, d'autres énumérés ici ne pas

InformationsquelleAutor maozx

2

Pour pré-remplir la date, vous devez d'abord initialiser datepicker, puis passer setDate valeur de paramètre.
```
$("#date_pretty").datepicker().datepicker("setDate", new Date());
```
InformationsquelleAutor Nadir
1

Juste pensé que je voudrais ajouter mon grain de sel. Le sélecteur est utilisé sur une ajouter/formulaire de mise à jour, il est donc nécessaire d'afficher la date en provenance de la base de données si la modification d'un enregistrement existant, ou d'afficher la date d'aujourd'hui si ce n'. 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; ?>
  });
```
InformationsquelleAutor Les Mizzell

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) d'Entrée par défaut aujourd'hui.
Vous avez à remplir d'abord le datepicker .

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

l'option A est bon, car sélecteur de date peut rester vide jusqu'à ce qu'une date est sélectionné à quel point il prend par défaut la date du jour

InformationsquelleAutor Vero O

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

Affecter la prettyDate pour le contrôle nécessaire.

InformationsquelleAutor gmail user

Essayer cette

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

InformationsquelleAutor thejustv

0

Cela fonctionne mieux pour moi que parfois j'ai des problèmes l'appel de .datepicker('setDate', new Date()); comme il mess si si j'ai le datepicker déjà configuré avec des paramètres.
```
$("#myDateText").val(moment(new Date()).format('DD/MM/YYYY'));
```
InformationsquelleAutor Alpha2k
-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 ne reconnaît pas la asString() fonction. J'ai fait comme ceci: $(".date-pick").datepicker('setDate", new Date());
- Je pense que asString() doit être toString().
- Kevin a de la Chance de DatePicker et le Jquery UI DatePicker sont deux choses très différentes datepickers.
- jQuery UI datepicker est basée sur celle de Kevin Chance.
InformationsquelleAutor

Vous devez vous connecter pour publier un commentaire.