手机端的日期选择的插件

由于开发主要是Freamwork7来开发 ，所以大部分插件都是从此开发，介绍的也是F7的日期插件使用方法。

html

<div class="orStartTime">
发货开始日期 ：<input type="text" placeholder="Your birth date" readonly id="calendar-default">
</div>
<div class="orEndTime">
发货结束日期：：<input type="text" placeholder="Your birth date" readonly id="calendar-default1">
</div>

实现的效果就是选择开始日期和结束日期，开始日期选择完成后，结束日期不能早于开始日期，反之一样。

js 引用Freamwork官网js文件 http://framework7.cn/Index/get_started.html（f7官网）

var calendarDefault;
var calendarDefault1;
$(function() {
calendarDefault = myApp.calendar({
input: '#calendar-default',
onChange: function(p, values, displayValues) {
var params = calendarDefault1.params;//每创建的一个对象都有一个params属性，根据此特性，创建全局变量calendarDefault和calendarDefault1
// console.log(calendarDefault1.params.input);
// console.log(calendarDefault.value);
params.minDate = values;
calendarDefault1.params = params;
calendarDefault.close();//这句话意思为选择后立马关闭唤出的菜单
},
});
calendarDefault1 = myApp.calendar({
input: '#calendar-default1',
onChange: function(p, values, displayValues) {
var params = calendarDefault.params;
params.maxDate = values;
calendarDefault.params = params;
calendarDefault1.close();
}

});

})

 

转载于:https://www.cnblogs.com/gaozexiong/p/7274526.html