web-dev-qa-db-fra.com

Définir la valeur initiale dans datepicker avec jquery?

J'essaie de définir une valeur initiale dans mon jquery ui datepicker. J'ai essayé plusieurs méthodes, mais rien ne semble afficher la date, c'est vide.

var idag = new Date();
$("#txtFrom").datepicker("setDate", idag - 2);
$("#txtTom").datepicker("setDate", idag);
$("#txtFrom").datepicker("refresh");
$("#txtTom").datepicker("refresh");
javascriptjqueryjquery-uidatepicker
41
kaze

Ce simple exemple fonctionne pour moi ...

[~ # ~] html [~ # ~] 

<input type="text" id="datepicker">

JavaScript 

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

J'ai pu créer ceci en regardant simplement @ le manuel et en lisant l'explication de setDate :

.datepicker ("setDate", date)
Définit la date actuelle du sélecteur de date. 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 à compter de ce jour (par exemple, +7) ou une chaîne de valeurs et de périodes (' y 'pour ans, 'm' pendant des mois, 'w' pendant des semaines, 'd' pendant des jours, par exemple '+ 1m + 7d') ou null pour effacer la date sélectionnée.

81
Andreas Niedermair

Vous pouvez définir la valeur dans le HTML, puis initier datepicker pour démarrer/mettre en surbrillance la date réelle

<input name="datefrom" type="text" class="datepicker" value="20-1-2011">
<input name="dateto" type="text" class="datepicker" value="01-01-2012">
<input name="dateto2" type="text" class="datepicker" >


$(".datepicker").each(function() {    
    $(this).datepicker('setDate', $(this).val());
});

Ce qui précède fonctionne même avec les formats de date danois

http://jsfiddle.net/DDsBP/2/

13
Henrik Stenbæk

De jQuery :

Définissez la date à mettre en surbrillance lors de la première ouverture si le champ est vide. Spécifiez soit une date réelle via un objet Date, soit une chaîne dans le dateFormat actuel, soit un nombre de jours à compter d'aujourd'hui (par exemple, +7) ou une chaîne de valeurs et de périodes ('y' pour les années, 'm' pour les mois, 'w' pour les semaines, 'd' pour les jours, par exemple '+ 1m + 7d') ou nul pour aujourd'hui.

Exemples de code

Initialisez un sélecteur de date avec l'option defaultDate spécifiée.

$(".selector").datepicker({ defaultDate: +7 });

Récupère ou définit l'option defaultDate, après init.

//getter
var defaultDate = $(".selector").datepicker("option", "defaultDate");
//setter
$(".selector").datepicker("option", "defaultDate", +7);

Une fois le sélecteur de date initialisé, vous devriez également pouvoir définir la date avec:

$(/*selector*/).datepicker("setDate" , date)
4
jb10210

tilisez ce code, il vous aidera.

<script>
InitializeDate();
</script>




<input type="text" id="txtFromDate" class="datepicker calendar-icon" placeholder="From Date" style="width: 100px; margin-right: 10px; padding: 0px 0px 0px 7px;">
        <input type="text" id="txtToDate" class="datepicker calendar-icon" placeholder="To Date" style="width: 100px; margin-right: 10px; padding: 0px 0px 0px 7px;">


function InitializeDate() {
    var date = new Date();
    var dd = date.getDate();             
    var mm = date.getMonth() + 1;
    var yyyy = date.getFullYear();

    var ToDate = mm + '/' + dd + '/' + yyyy;
    var FromDate = mm + '/01/' + yyyy;
    $('#txtToDate').datepicker('setDate', ToDate);
    $('#txtFromDate').datepicker('setDate', FromDate);
}
2
Raviender Singh Bisht

Utilisez setDate

.datepicker( "setDate" , date )

Définit la date actuelle du sélecteur de date. 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 à compter de ce jour (par exemple, +7) ou une chaîne de valeurs et de périodes (' y 'pour ans, 'm' pendant des mois, 'w' pendant des semaines, 'd' pendant des jours, par exemple '+ 1m + 7d') ou null pour effacer la date sélectionnée.

2
Pranav

Je ne suis pas tout à fait sûr d'avoir compris votre question, mais il semble que vous essayez de définir la valeur d'un type d'entrée Date.

Si vous souhaitez définir une valeur pour une date type d'entrée ' Date ', elle doit être formatée comme suit: "- aaaa-MM-jj "(Remarque: capital en majuscules pour le mois, minuscules en mm pour les minutes). Sinon, la valeur sera effacée et le sélecteur de date sera vide.

Supposons que vous avez un bouton appelé "DateChanger" et que vous souhaitez régler votre sélecteur de date sur " 22 déc 2012 " lorsque vous cliquez dessus.

<script>
    $(document).ready(function () {
        $('#DateChanger').click(function() {
             $('#dtFrom').val("2012-12-22");
        });
    });
</script>
<input type="date" id="dtFrom" name="dtFrom" />
<button id="DateChanger">Click</button>

N'oubliez pas d'inclure la référence JQuery.

1
E2rdo