jquery datetimepicker每个日期的次数

时间:2015-10-19 18:48:47

标签: jquery datetimepicker

我希望让jquery datetimepicker显示每个日期特定的不同可用时间数组。我有datetimepicker在一些允许的时间内显示我的可用日期:

var array = ["2015-10-23","2015-10-24","2015-10-25"];
$('#datepicker').datetimepicker({
    startDate:  '2015/10/23',
    allowTimes:['17:00','17:30','18:00','18:30'],
    beforeShowDay: function(date) {
    if($.inArray($.datepicker.formatDate('yy-mm-dd', date ), array) > -1)
    {
        return [true,"","available"];
    }
    else
    {
        return [false,'',"booked"];
    }
}
});

但是,我希望显示特定日期的不同可用时间集。对于exapme我的日期数组:

2015-10-23,2015-10-24,2015-10-25

我希望2015-10-23允许'17:00','17:30','18:00','18:30'次 2015-10-24允许'17:30','18:00' 2015-1025允许'17:00'

1 个答案:

答案 0 :(得分:0)

我也在寻找同一个问题的答案。通过尝试弄清楚datetimepicker插件如何工作以及一些试验和错误,我想出了下面的内容,这似乎对我有用。希望这会对你有所帮助。

突出问题:

  • 如果用户未选择可用时间,则使用当前时间。
  • 今天按钮很有用,但即使没有可用的时间,也可以选择今天。
  • 我的字符串处理相当笨重。

我欢迎对代码进行任何改进 - 与此同时,它是:

  var free_slots = { // object containing all available slots
    // date        // array containing times for each date
    "2016-03-09" : ["12:00", "13:00"],
    "2016-03-16" : ["14:00", "15:00"]
  }

  function pad(n, width, z) {
    z = z || '0';
    n = n + '';
    return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
  }

  $ ("#datefield") .datetimepicker ({
    allowTimes: ['00:00'],
    beforeShowDay: function (date) {
      ymd = date.getFullYear() + "-" + pad(date.getMonth()+1,2) + "-" + pad(date.getDate(),2);  
      if (ymd in free_slots)
        return [true, "", "appointments available"];
      else
        return [false, "", "fully booked"];
    },
    onSelectDate: function () {
      // The below options seem to be appended to the existing datetimepicker:
      $ ("#datefield") .datetimepicker ({
        allowTimes: free_slots [$ ("#datefield") .val () .substr (0,10) .replace (/\//g, "-")],
      });
    }
  });