简体   繁体   中英

if statement within jQuery timepicker

I'm pretty new to javascript and jQuery, but I managed to get Trent Richardson's jQuery Timepicker, http://trentrichardson.com/examples/timepicker/ .

I added constraints for limiting dates the user can select, but I now need to change those limits based on the current time. Adding a day if the current time is before 3pm, and adding 2 days if it's after 3pm.

I have it working, but I feel that the code is a little bulky and poorly thought out. Does anyone know if there's a more elegant way of achieving this? Thank in advance :)

var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if(hours > 15){
    //document.write("too late buster!")
    $('#datepicker').datetimepicker({
    minDate: +2,
    maxDate: +30, 
    dateFormat: "d/M", 
    timeFormat: 'hh:mm', 
    hourMin: 11, 
    hourMax: 19, 
    hourGrid: 4, 
    minuteGrid: 10, 
    stepMinute: 5, 
    separator: ' @ '});
} else {
    $('#datepicker').datetimepicker({
    minDate: +1,
    maxDate: +30, 
    dateFormat: "d/M", 
    timeFormat: 'hh:mm', 
    hourMin: 11, 
    hourMax: 19, 
    hourGrid: 4, 
    minuteGrid: 10, 
    stepMinute: 5, 
    separator: ' @ '});
}

I think I'm right in saying that the only difference is the minDate property. It's easy to set this conditionally with a ternary expression using the conditional operator :

$('#datepicker').datetimepicker({
minDate: (new Date().getHours() > 15 ? +2 : +1),
maxDate: +30, 
dateFormat: "d/M", 
timeFormat: 'hh:mm', 
hourMin: 11, 
hourMax: 19, 
hourGrid: 4, 
minuteGrid: 10, 
stepMinute: 5, 
separator: ' @ '});

Here is your code.

var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if(hours > 15){
    //document.write("too late buster!")
    $('#datepicker').datetimepicker({
    minDate: +2,
    maxDate: +30, 
    dateFormat: "d/M", 
    timeFormat: 'hh:mm', 
    hourMin: 11, 
    hourMax: 19, 
    hourGrid: 4, 
    minuteGrid: 10, 
    stepMinute: 5, 
    separator: ' @ '});
} else {
    $('#datepicker').datetimepicker({
    minDate: +1,
    maxDate: +30, 
    dateFormat: "d/M", 
    timeFormat: 'hh:mm', 
    hourMin: 11, 
    hourMax: 19, 
    hourGrid: 4, 
    minuteGrid: 10, 
    stepMinute: 5, 
    separator: ' @ '});
}

Here is elegant (at least more elegant)

var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
var options = {
    minDate: +1,
    maxDate: +30, 
    dateFormat: "d/M", 
    timeFormat: 'hh:mm', 
    hourMin: 11, 
    hourMax: 19, 
    hourGrid: 4, 
    minuteGrid: 10, 
    stepMinute: 5, 
    separator: ' @ '
}
if (hours > 15) {
    options.minDate = +2
}

Then of course pass the options into the timepicker

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM