web-dev-qa-db-fra.com

jQuery Datepicker et Timepicker pour que le même champ de saisie apparaisse l'un après l'autre

J'ai un Datepicker et un Timepicker dans 2 champs d'entrée séparés mais je dois combiner les 2 entrées de champs en un pour un appel de base de données. Je voulais savoir si je ne pouvais utiliser qu'un seul champ de saisie pour les deux commandes?

appelez d'abord le sélecteur de date et l'utilisateur cliquerait sur la date souhaitée et entrerait la valeur, puis le sélecteur de temps surgirait et ajouterait la date sélectionnée par l'utilisateur dans la première action.

J'utilise les plug-ins jQuery UI Datepicker et Timepickr

J'ai donc quelque chose comme ça

<input class="datepicker">2009-06-22</input>
<input class="timepicker">12:00:00</input>

Mais aimerait quelque chose comme ça

<input class="datetimepicker">2009-06-22 12:00:00</input>

<script type="text/javascript">
// Date and Time picker same input field
$("#datepicker").datepicker( {
   dateFormat: 'yy-mm-dd',
   onClose: function(dateText, inst) {
      var tempDate = $("#datepicker").val(dateText);
      $("#datepicker").timepickr({
         onClose: function(timeText, inst) {
            var tempTime = $("#datepicker").val(dateText);  
            alert("Temp Time: '" + tempTime.val() + "'");
            $("#datepicker").val(tempDate.val() + ' ' + tempTime.val());
         }  
      });                                   
   }
});             
</script>
jquerydatepickerdatetimepickertimepicker
15
Phill Pafford

Je voudrais recommander Any + Time (TM) , dans lequel vous pouvez combiner la date/heure dans un seul champ avec une seule date/heure facile à utiliser (et rapide!) sélecteur combo.

16
Andrew M. Andrews III

Vous pouvez lier un événement à l'événement onClose () du sélecteur de date. Demandez-lui d'ouvrir votre sélecteur de temps. Laissez le sélecteur de date écrire la valeur de base de l'entrée et demandez au timepicker d'ajouter sa valeur après un espace à la même entrée.

  1. Lier le sélecteur de date à l'entrée.
  2. Attachez la méthode pour ouvrir timepicker à l'événement .onClose () du sélecteur de date.
  3. Ajoutez la valeur du sélecteur de temps (avec un espace précédent) à la valeur d'entrée.

Mis à jour: ce qui suit est une mise à jour résultant d'une question mise à jour.

La documentation donne un bref exemple sur la façon de lier un événement/une action à la fermeture du sélecteur de date:

$('.selector').datepicker({
   onClose: function(dateText, inst) { ... }
});

Dans cet exemple, vous pouvez utiliser votre fonction suivant "onClode:" pour écrire la valeur dans l'entrée et faire apparaître le timepicker.

$(".selector").datepicker({
  onClose: function(dateText, inst) {
    $(".selector").val(dateText);
    // Raise Timepickr
  }
});
1
Sampson

Pas jQuery, mais cela fonctionne bien pour un calendrier avec l'heure: Sélecteur de date et heure JavaScript .

Liez simplement l'événement click pour le faire apparaître:

$("#date").click(function() {
    NewCssCal($(this).attr('id'), 'mmddyyyy', 'dropdown', true, 12);
});

Personnellement, je trouve cela beaucoup plus facile à suivre. Mais évidemment, vous avez tellement d'options avec plusieurs plugins jquery disponibles pour faire votre travail.

1
Bat_Programmer

Veuillez vérifier le lien.

J'ai mis à jour un problème de mise en page et ajouté un deuxième curseur, qui sera actif si {showTime:true, time24h:true}

Vous pouvez trouver l'original à Google Code.

0
sakhunzai

Voici une alternative:

http://www.r-ip.ru/dev/datetimepicker/index.html

$('#datetimepicker').datetimepicker({ 
  dateFormat: 'yy-mm-dd',
  timeFormat: ' hh:ii:ss' 
});
0
AlexC

Vous pouvez essayer de combiner les entrées des deux commandes en une seule comme

$("#datetime").focus(function() {
    var mydate = $("#date").val();
    var mytime = $("#time").val();
    if(mydate && mytime && !this.value) {
        this.value = mydate + " " + mytime;
    }
});
0
dhaval