做项目时候经常用用到前端时间插件，一般都会手上积累几套方案用作各种情况，但个别项目比较麻烦，深度使用下来还是https://github.com/xdan/datetimepicker

功能更加强大。

首先明确需求：

预约时间的选择：

日期必须今天（不能选今天）之后的7（这个数要能后台设定）天，双休日不能选，可以时间段由后台设定，如果有用户选择了某个时间段其他用户就不能再选。

方案1：

用Vue.js写个控件，感觉比较费时间。

方案2：

使用jQuery DateTimePicker

var datatimepicker=$('#datetimepicker').datetimepicker({

format:'Y-m-d H:i',inline:true,lang:'zh',minDate:dateFns.addDays(new Date(), 1),maxDate:dateFns.addDays(new Date(), 7),allowTimes:[后台设置的时间段，数组形式],initTime:true,disabledWeekDays:[0,6],timepickerScrollbar:true,beforeShowDay:function(ct){ console.log(ct);},onSelectDate:function (ct,$i) { var that=this;var room_id=$("#room_id").val();$.post("后台时间段调用地址",{selectday:dateFns.format(ct,'MM/DD/YYYY')},function (data) { that.setOptions({ allowTimes:data.leftime});})},onShow:function (ct,insert) { console.log("show");}});