jQuery的Timepicker - 從當前時間

我用一個jQuery timepicker，如下jQuery的Timepicker - 從當前時間

jQuery timepicker 下面安排一個時間6小時是我的代碼：

$('#timePicker').timepicker({ 
    'step': 15, 
    'forceRoundTime': true, 
    'timeFormat': 'H:i' 
}); 
$('#timePicker').timepicker('setTime', new Date(new Date().getTime()+6*3600*1000));

我的問題是，我得到6小時提前我目前的時間，但我也需要禁用前一次。

例如：

如果當前日期時間爲2016年4月4日上午11時50分 - 那麼時間選擇器應顯示2016年4月4日17.50點，如果今天的日期是不那麼時間選擇器應該允許所有的時間選擇。

請讓我知道我應該在我的代碼中做什麼修改？

來源

2016-04-04 Tanmay Mhatre

你有一個單獨的日期選擇器也 –

是的，我需要的日期選擇器及時間選擇單獨 –

@TanmayMhatre看我的回答可以幫助你。 –

，我認爲你是什麼之後是

var min = new Date(), 
 
    strMin = $.datepicker.formatDate("mm/dd/yy", min); 
 
min.setHours(min.getHours() + 6); 
 
$('#datePicker').datepicker({ 
 
    minDate: min, 
 
    onSelect: function(v) { 
 
    console.log(v == strMin ? formatTime(min) : '12:00am') 
 
    $('#timePicker').timepicker('option', 'minTime', v == strMin ? formatTime(min) : '12:00am'); 
 
    } 
 
}).datepicker('setDate', min); 
 

 
$('#timePicker').timepicker({ 
 
    'step': 15, 
 
    'forceRoundTime': true, 
 
    'timeFormat': 'H:i', 
 
    'minTime': formatTime(min) 
 
}); 
 
$('#timePicker').timepicker('setTime', min); 
 

 

 
function formatTime(dt) { 
 
    return dt.getHours() + ':' + ('0' + dt.getMinutes()).slice(-2) + (dt.getHours() >= 12 ? 'pm' : 'am') 
 
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css"> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.11/jquery.timepicker.css"> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.11/jquery.timepicker.js"></script> 
 
<input id="datePicker" /> 
 
<input id="timePicker" />

來源

2016-04-04 07:18:55

http：// jsfiddle .net/arunpjohny/rngwefrh/ –

感謝您提供此解決方案，但是我們可以使用IST而不是系統Time in timepicker嗎？隨着系統時間可以隨時更改和預約 –

@DhawalMhatre在這種情況下，當前時間必須從服務器傳遞到客戶端 –

要做到這一點的最佳方法是始終在該函數中調用onHourShow函數和validate the selected date。我覺得這樣比較好，因爲disabled hours are still visible給用戶而不是blank cells。

$('#date').datepicker({ 
    minDate: 0 
}); 
$('#time').timepicker({ 
    onHourShow: function(hour) { 
     var now = new Date(); 
     // compare selected date with today 
     if ($('#date').val() == $.datepicker.formatDate ('mm/dd/yy', now)) { 
      if (hour <= now.getHours()) { 
       return false; 
      } 
     } 
     return true; 
    } 
});

這裏是一個工作的例子：根據 http://jsfiddle.net/fgelinas/kUFgT/4/

來源

2016-04-04 06:31:58

我認爲他正在嘗試[jquery.timepicker]（http://jonthornton.github.io/jquery-timepicker/）而不是jquery.ui datetime選擇器 – kiro112

是的..即時通訊使用jquery.timpicker –

的documentation您可以通過使用DisableTimeRanges

function formatAMPM(date) { 
    var hours = date.getHours(); 
    var minutes = date.getMinutes(); 
    var ampm = hours >= 12 ? 'pm' : 'am'; 
    hours = hours % 12; 
    hours = hours ? hours : 12; // the hour '0' should be '12' 
    minutes = minutes < 10 ? '0'+minutes : minutes; 
    var strTime = hours + ':' + minutes + '' + ampm; 
    return strTime; 
} 

time_plus_6 = new Date(new Date().getTime()+6*3600*1000); 
$('#timePicker').timepicker({ 
     'step': 15, 
    'forceRoundTime': true, 
    'timeFormat': 'H:i', 
    'disableTimeRanges': [ 
     [0, formatAMPM(time_plus_6)] 
    ] 
}); 

$('#timePicker').timepicker('setTime', time_plus_6);

禁用之前的時間工作fiddle

來源

2016-04-04 07:15:15 kiro112

jQuery的Timepicker - 從當前時間

回答

相關問題