用的较为舒服的时间插件jQuery DateTimePicker

做项目时候经常用用到前端时间插件,一般都会手上积累几套方案用作各种情况,但个别项目比较麻烦,深度使用下来还是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");}});

相关文章
相关标签/搜索