web-dev-qa-db-fra.com

jQuery datepicker sans entrée

J'ai une application web assez complexe à laquelle j'aimerais ajouter une interface utilisateur de sélection de date.

Le problème que je rencontre est que je ne suis pas parvenu à comprendre dans les documents comment prendre vraiment le contrôle de la date et de l'heure du sélecteur de date. Il n'y a aucun élément de formulaire impliqué (et non, je ne vais pas ajouter de champ de formulaire secret), donc l'approche simple et prête à l'emploi ne fonctionnera tout simplement pas.

J'espère que quelqu'un pourra fournir un peu de conseils sur un modèle qui me permettra d'invoquer le programme Datepicker par programmation. Je crois savoir comment j'utiliserais les événements personnalisés de datepicker pour l'initialiser et le positionner, ainsi que pour récupérer la valeur choisie lorsque l'utilisateur l'aurait rejetée. J'ai simplement du mal à instancier un datpicker, car je ne l'associe pas à un élément.

Voici ce que ne fonctionne pas ne fonctionne pas:

function doThing(sCurrent, event) { // sCurrent is the current value; event is an event I'm using for positioning information only
    var bIsDate = !isNaN( (new Date(sCurrent)).getTime() );

    jQuery.datepicker('dialog',
        (bIsDate ? new Date(sOriginal) : new Date()), // date
        function() { console.log('user picked a date'); }, // onSelect
        null, // settings (i haz none)
        event // position
    );

}

La raison en est que "jQuery.datepicker" n'est pas une fonction. (Je le fais mal.)

Je ne suis pas marié à l'approche de «dialogue» - c'était ma meilleure hypothèse d'invoquer une approche sans référence à un élément de formulaire.

J'utilise jQuery 1.4.3 et jQueryUI 1.8.6

javascriptjqueryjquery-uidatepicker
18
Tom

J'ai lu le code datepicker et il semble que, tel qu'il a été écrit, datepicker doit être attaché à une balise input, div ou span.

Donc, si votre seule objection est d'utiliser un élément de formulaire, attacher à une div ou à une étendue est probablement votre meilleur choix. Voici un exemple de la procédure à suivre: https://stackoverflow.com/a/1112135

Si vous cherchez un autre moyen de contrôler le sélecteur de date, vous devrez peut-être étendre le code de ce dernier pour faire ce que vous voulez, et si vous choisissez cette voie, je vous recommande de commencer par jeter un coup d'œil à _inlineDatepicker private method dans le code datepicker, qui est la méthode qui associe le datepicker à une balise div ou span.

9
jimmym715

Depuis la page du plugin: http://jqueryui.com/demos/datepicker/#inline

<script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });
</script>


<div class="demo">
    Date: <div id="datepicker"></div>
</div><!-- End demo -->

Affiche le sélecteur de date intégré dans la page plutôt que dans une superposition. Appelez simplement .datepicker () sur un div au lieu d’une entrée.

15
rcdmk

Vous devez définir le champ de saisie de manière dynamique, puis joindre le sélecteur de date à votre classe nouvellement créée. Sans champ Je ne le crois pas, cela fonctionnera.

<input type="hidden" id="yourField" />

et utilise

$("#yourField").datepicker({
        buttonImage: '../yourImage.png',
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true,
        showOn: 'both',
     });
0
Shehzad