2017-05-09 1 views
0

Lorsque je mets minDate est "2017/05/09 10:16:00", si j'utilise la flèche pour régler l'heure mineure supérieure (ex: 11h), je peux régler les minutes de moins de minutes min (par exemple: 10m). Mais si je mets l'heure en utilisant le tableau de sélection, je ne peux pas sélectionner les minutes qui durent moins de minutes. Quelqu'un at-il une solution à ce problème? S'il vous plaît aidez-moi, désolé pour mon mauvais anglais. enter image description hereDatetimepicker: Impossible de sélectionner les minutes inférieures à la minute actuelle bien que l'heure soit supérieure à l'heure actuelle

mon réglage datetimepicker:

$(".datepicker").datetimepicker({ 
    useCurrent: false, 
    format: "YYYY/MM/DD HH:mm ZZ", 
    locale: "ja", 
    sideBySide: true, 
    toolbarPlacement: "bottom", 
    showClose: true, 
    widgetPositioning:{ 
     horizontal: "auto", 
     vertical: "top" 
    }, 
    icons: { 
     close: "btn-info date-time-close-text" 
    } 
    }); 

Vues:

<div class="time-picker-wrapper"> 
    <div class="form-group"> 
    <%= f.text_field :public_time, class: "form-control datepicker time-public", 
     placeholder: t(".public_time"), readonly: notification.public_time.nil? && is_edit_page %> 
    <%= f.text_field :created_at, class: "datepicker hidden" %> 
    </div> 
    <button type="button" class="icon-time-picker-wrapper"> 
    <i class="mp-icon-time-picker"></i> 
    </button> 
</div> 
+0

Vous utilisez beaucoup d'options là-dedans. J'ai récupéré une application que j'ai avec datetimepicker et elle n'a pas le problème que vous avez. Ce que je recommande est de commencer avec la configuration la plus basique et de commencer à ajouter des options jusqu'à ce que le problème commence, au moins vous savez quelle option est à l'origine. –

+0

je vais essayer, merci pour votre suggestion! –

+0

Je pense que je vois un problème aussi. Vous avez deux champs datetimepicker utilisant la même fonction JavaScript. Essayez de leur donner des #ids différents et faites deux fonctions JavaScript. Un pour chaque. Ils peuvent interagir entre eux et vous donner des résultats inattendus. –

Répondre

0

Voici une configuration de base qui fonctionne pour moi sans la question que vous avez mentionné. Comme je l'ai dit dans le commentaire, il y a deux champs date/heure - début et fin. Et le minDate pour la fin est la date de début, et la date maximale pour le début est la date de fin. Voyez si cela fonctionne pour vous. Je laisse mes noms de champs pour que vous puissiez les changer.

fichier JavaScript:

$(document).on('turbolinks:load', function() { 
    $('#event_start').datetimepicker({ 
    format: 'YYYY-MM-DD hh:mm a' 
    }); 
    $('#event_end').datetimepicker({ 
    useCurrent: false, 
    format: 'YYYY-MM-DD hh:mm a' 
    }); 
    $('#event_start').on("dp.change", function (e) { 
    $('#event_end').data("DateTimePicker").minDate(e.date); 
    }); 
    $("#event_end").on("dp.change", function (e) { 
    $('#event_start').data("DateTimePicker").maxDate(e.date); 
    }); 
}); 

Les champs

<div class="form-group"> 
    <%= f.label :start, 'Start Date-Time', class: 'control-label' %> 
    <div class='input-group date' id='event_start'> 
    <%= f.text_field :start, class: "form-control" %> 
    <span class="input-group-addon"> 
     <span class="glyphicon glyphicon-calendar"></span> 
    </span> 
    </div> 
</div> 
<div class='form-group'> 
    <%= f.label :end, 'End Time (Optional)', class: 'control-label' %> 
    <%= f.text_field :end, class: "form-control" %> 
</div> 
+0

Je supprime déjà second text_field mais ce problème persiste. –

+0

J'ai utilisé la même gemme pour que la gemme fonctionne. Peut-être commencer avec une configuration très basique. Je vais changer ma réponse à celle qui fonctionne pour moi. Vous pouvez commencer avec cela et voir si cela fonctionne. –

+0

cela arrive encore, avez-vous défini minDate dans votre datetimepicker? Je pense que c'est un bug Datetimepicker. –

0

j'ai faire hardwork toute la journée et enfin trouver une solution pour mon problème

$(document).ready(function(){ 
    var default_time = null; 

    $(".datepicker").datetimepicker({ 
    useCurrent: false, 
    format: "YYYY/MM/DD HH:mm ZZ", 
    locale: "ja", 
    sideBySide: true, 
    toolbarPlacement: "bottom", 
    showClose: true, 
    widgetPositioning:{ 
     horizontal: "auto", 
     vertical: "top" 
    }, 
    icons: { 
     close: "btn-info date-time-close-text" 
    } 
    }).on("dp.show", function(){ 
    default_time = moment(); 
    }); 

    $(".datepicker").on("dp.change", function(){ 
    var time_set = $(".datepicker").val(); 
    var date_time_set = new Date(time_set); 
    if (date_time_set.getHours() > default_time.hours()){ 
     $("td.minute.disabled").removeClass("disabled"); 
    } 
    else if (date_time_set.getDate() > default_time.date()){ 
     $("td.minute.disabled").removeClass("disabled"); 
     $("td.hour.disabled").removeClass("disabled"); 
    } 
    else if (date_time_set.getDate() == default_time.date()){ 
     $(".datepicker").data("DateTimePicker").minDate(moment()); 
    } 
    }); 

j'espère cette réponse c un aide quelqu'un et si vous avez des commentaires et des commentaires sur mon code, dites-moi. Je vous remercie!

+0

Cool, heureux que vous l'ayez corrigé. –