仿美团外卖的一个送达时间选择控件
<script src="js/delivery-time-picker.js"></script>
<link type="text/css" rel="stylesheet" href="css/delivery-time-picker.css" />
// 在页面加载时初始化控件,参数1是控件选项,参数2是一个dom的id字符串且可以忽略
DeliveryTimePicker.init(
{
dayRange: 10, // 日期的显示数量,从今天起往后推
timeInterval: 60, // 时间的间隔,单位分钟
startTime: 8, // 时间范围的开始(开始营业的时间)
endTime: 24, // 时间范围的结束(结束营业的时间)
showDate: false, // 显示‘今天/明天/后天’还是全部显示日期
showWeekday: true, // 是否显示周几
clickOutside: true, // 点击选择器外部关闭,默认true开启
// 选择时间后的回调函数
callback: function(str, time) {
// 参数1是 “yyyy-MM-dd HH:mm”格式的字符串
// 参数2是js的一个Date()对象
console.log("选择了:", str, time);
document.getElementById("result").innerHTML = "选择了:" + str;
}
},
"#root" // 要将控件添加到指定的dom下面,注意要加#号,此参数如果不写默认添加到body最后
);
// 显示控件
DeliveryTimePicker.show();
// ~~~建议在不用时销毁控件
DeliveryTimePicker.destory();