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

Question

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

$(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 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 ne fasse quoi que ce soit? 99% du temps, la date du jour sera celle par défaut.

Answer 1

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

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

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

C’est moins concis, car l'enchaînement lui permet de fonctionner en chrome (2019 -06-04):

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

Answer 2

Vous devez d'abord appeler datepicker () > puis 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 NE fonctionnera PAS avec seulement

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

REMARQUE : les paramètres setDate acceptables sont décrits ici

Answer 3

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

Answer 4

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 mentionné dans la documentation, setDate () accepte avec plaisir l'objet, le numéro ou une chaîne de données JavaScript Date:

  

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' pendant des jours, par exemple '+ 1m + 7d') ou null pour effacer la sélection   date.

Si vous le souhaitez, définissez defaultDate . La propriété du constructeur ne ne met pas à jour le contrôle associé.

Answer 5

Défini sur aujourd'hui :

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

Défini sur hier :

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

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

Voir jQuery UI & # 8250; Méthodes & # 8250; setDate .

Answer 6

La solution est la suivante:

$(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!

Answer 7

Ce code vous assurera d'utiliser le format de votre sélecteur de date:

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

Pas besoin de réappliquer le format, il utilise le datepicker prédéfini, celui que vous avez défini lors de l’initialisation du datepicker (si vous l’avez assigné!);)

Answer 8

Celui-ci a fonctionné pour moi.

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

Answer 9

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

Answer 10

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

Answer 11

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 puis l'option 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 
        });
  });

Answer 12

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

Answer 13

Je pensais juste ajouter mes deux sous. Le sélecteur est utilisé dans 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; ?>
  });

Answer 14

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) Saisissez par défaut avec aujourd'hui. Vous devez d'abord renseigner le sélecteur de date.

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

Answer 15

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

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

Answer 16

Essayez ceci

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

Answer 17

Cela fonctionne mieux pour moi car j'ai parfois des difficultés à appeler .datepicker ('setDate', new Date ()); ) car cela gâche le fouillis si j'ai le datepicker déjà configuré avec des paramètres.

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

Answer 18

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

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