Need Date/Time Picker avec des fonctions spécifiques

Question

J'ai regardé autour, et je vois des questions précédentes où les gens posent des questions sur les sélecteurs de Date/Heure; Malheureusement, aucun de ces sujets ne correspondait à mes besoins spécifiques. Je vois beaucoup de gens qui recommandent Any + Time, mais il semble un peu "lourd" et je suis à la recherche de poids léger.

Fondamentalement, j'ai besoin d'un sélecteur de date/heure pour les "événements". Le sélecteur de recherche d'événement ici (http://jqueryui.com/demos/datepicker/#event-search) est très agréable, mais il ne gère pas le temps. Mon formulaire est construit sur jQuery, donc je suis d'accord pour l'utiliser.

• Doit être en mesure de sélectionner les deux date et l'heure
• forme de temps de fin doit être caché jusqu'à ce que le temps de démarrage est sélectionné.
• Après le temps de démarrage est sélectionné, l'heure de fin doit être réglé automatiquement pour 6 heures plus tard
• Ne devrait pas être en mesure de choisir une heure de fin qui a lieu avant l'heure de début
• devrait être capable de gérer les fuseaux horaires, et par défaut le fuseau horaire actuel de l'utilisateur
• devrait être en mesure d'envoyer un horodatage UTC (je stocker dans un champ caché; ex: 1291004863)

Vos recommandations sont appréciées ... Je ne sais pas beaucoup sur Javascript .

Answer 1

Je voudrais essayer l'extension de la datepicker jQuery UI avec les modifications apportées à la page suivante: http://addyosmani.com/blog/the-missing-date-time-selector-for-jquery-ui/

Le code exemple de recherche d'événement jQuery UI aurait besoin que les nouveaux paramètres ajoutés pour le faire fonctionner.

Espérons que ça aide!

Edit: Exemple de code pour datepicker plage (en utilisant le code de lien ci-dessus):

-HTML-

<p> 
    <label for="from">From:</label> <input class="datetime" type="text" name="from" id="from" value="" /> 
    <label for="to">To:</label> <input class="datetime" type="text" name="to" id="to" value="" /> 
</p> 

-js-

$(function() { 
    $('.datetime').datepicker({ 
     duration: '', 
     showTime: true, 
     constrainInput: false 
    }); 
}); 

Voici un lien pour voir action: http://bit.ly/hZTR84