Datetimepicker：雖然小時數選擇爲高於當前小時，但無法選擇小於當前分鐘的分鐘數

當我設置minDate爲「2017/05/09 10:16:00」時，如果使用箭頭設置小時數高於分鐘數（例如：11小時），我可以設置小於分鐘的分鐘數（例如：10米）。但是，如果我通過使用從網格表中選擇設置小時，我不能選擇小於分鐘的分鐘。任何人都可以解決這個問題？請幫助我，對不起我的英語不好。 Datetimepicker：雖然小時數選擇爲高於當前小時，但無法選擇小於當前分鐘的分鐘數

我的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" 
    } 
    });

瀏覽：

<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>

來源

2017-05-09 Long Lý

您正在使用很多選項。我用datetimepicker取出了一個應用程序，它沒有你所做的問題。我推薦的是從最基本的設置開始，並開始添加選項，直到問題開始，然後至少你知道哪個選項導致它。 –

我會試試看，謝謝你的建議！ –

我想我也看到一個問題。您有兩個使用相同JavaScript函數的datetimepicker字段。嘗試給他們不同的#ids並製作兩個JavaScript函數。每個一個。他們可能會互相影響，給你意想不到的結果。 –

這是一個基本的設置，如果沒有你提到的問題對我的作品。正如我在評論中所說，這有兩個時間/日期字段 - 開始和結束。最後的minDate是開始日期，開始的最大日期是結束日期。看看這是否適合你。我要離開我的字段名稱，以便您可以更改它們。

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); 
    }); 
});

表單域

<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>

來源

2017-05-09 05:00:03

我已經刪除第二個text_field，但這個問題仍然發生。 –

我使用了相同的寶石，所以寶石的作品。也許從一個非常基本的設置開始。我會將我的答案改變爲適合我的最基本的答案。你可以從這開始，看看它是否有效。 –

它仍然發生，你是否在你的datetimepicker中設置了minDate？我認爲這是一個Datetimepicker錯誤。 –

我必須做勤勞一整天，終於找到我的問題的解決方案

$(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()); 
    } 
    });

我希望這個答案c幫助某人，如果您對我的代碼有任何反饋和評論，請告訴我。謝謝！

來源

2017-05-09 10:07:12

很酷，很高興你把它修好了。 –

Datetimepicker：雖然小時數選擇爲高於當前小時，但無法選擇小於當前分鐘的分鐘數

回答

相關問題