web-dev-qa-db-fra.com

Obtenir la valeur de JQUERY datepicker

Si je veux afficher le sélecteur de date JQUERY UI en ligne en l'attachant à un DIV comme $("div#someID").datepicker() - comment accéder à la date choisie? Je suppose que s'il n'est pas lié à un INPUT, il ne sera pas soumis avec le formulaire.

Je suppose que si je dois le lier à un élément INPUT, existe-t-il un moyen de contrôler le positionnement du sélecteur de date par rapport à l'élément INPUT? Si je voulais que le sélecteur de date apparaisse au-dessus ou sur le côté de l'élément plutôt qu'en dessous, comment faire?

Pardonnez-moi si cette réponse est quelque part vraiment évidente.

jqueryjquery-uijquery-ui-datepicker
29
David Grenier

Si vous souhaitez obtenir la date à laquelle l'utilisateur la sélectionne, vous pouvez le faire:

$("#datepicker").datepicker({
    onSelect: function() { 
        var dateObject = $(this).datepicker('getDate'); 
    }
});

Je ne suis pas sûr de la deuxième partie de votre question. Mais, avez-vous essayé d'utiliser des feuilles de style et un positionnement relatif?

48
chapa

Vous pouvez utiliser la méthode getDate:

var d = $('div#someID').datepicker('getDate');

Cela vous donnera un objet Date dans d.

Il n'y a pas options de positionnement le popup mais vous pourriez être capable de faire quelque chose avec CSS ou l'événement beforeShow si nécessaire.

9
mu is too short
$('div#someID').datepicker({
   onSelect: function(dateText, inst) { alert(dateText); }
});

vous devez le lier à l'élément d'entrée uniquement

6
run

Vous pouvez supprimer l'attribut name de cette entrée afin qu'elle ne soit pas soumise.

Pour accéder à la valeur de ce contrôleur:

$("div#someID").datepicker( "getDate" )

et vous pouvez consulter le document dans http://jqueryui.com/demos/datepicker/

5
Bright

Vous pouvez le faire comme suit - avec validation juste pour vous assurer que le sélecteur de date est lié à l'élément.

var dt;

if ($("div#someID").is('.hasDatepicker')) {
    dt = $("div#someID").datepicker('getDate');
}
2
John Gathogo

Si vos éléments sélectionnés n'en font pas partie, vous devez utiliser cette méthode:

$('[type="date"]').datepicker();
$('[type="date"]').change(function() {
    var date = $(this).datepicker("getDate");
    console.log(date);
});
1
evan.z

Pour positionner le sélecteur de date à côté du champ de saisie, vous pouvez utiliser le code suivant.

$('#datepicker').datepicker({
    beforeShow: function(input, inst)
    {
        inst.dpDiv.css({marginLeft: input.offsetWidth + 'px'});
    }
});
0
TeeDeJee