年月日范围选择
年月日选择器
年月日时分秒选择器
日期有效范围只限定在:2017年
日期有效范围限定在:过去一周到未来一周
时间有效范围设定在: 上午九点半到下午五点半
日期时间有效范围的设定:
layui.use(["jquery","layer","laydate"],function(){
var $ =layui.jquery;
var layer =layui.layer;
var laydate =layui.laydate;
laydate.render({
elem:"#date6";
range:true;//开启返回选择 })
/*** value 初始值* 可以设置字符串,但是字符串必须遵循format参数设定的格式* 还可以设置日期对象,例如:new Date()*/
laydate.render({
elem: "#date9",
format: "yyyy年MM月dd日",
// value: '2018年08月18日' // 必须遵循format参数设定的格式 value: new Date()
});
// 自定义格式 laydate.render({
elem: "#date8",
type: "datetime",
format: "yyyy年MM月dd日 HH时mm分ss秒"
});
laydate.render({
elem:"#date7";
format:"yyyy年MM月dd日"
});
/**最小/大范围内的日期时间值如果值为字符类型,则:年月日必须用 -(中划线)分割、时分秒必须用 :(半角冒号)号分割。如果值为整数类型,且数字<86400000,则数字代表天数,如:min: -7,即代表最小日期在7天前,正数代表若干天后*/
// 日期时间有效范围的设定 laydate.render({
elem: "#date13",
type: "datetime",
min: "2019-04-01 09:30:00",
max: "2019-04-30 18:30:00"
});
// 时间有效范围设定在: 上午九点半到下午五点半 : laydate.render({
elem: "#date12",
type: "time",
min: "09:30:00",
max: "18:30:00"
});
// 日期有效范围限定在:过去一周到未来一周 laydate.render({
elem: "#date11",
min: -7,
max: 7
});
// 日期有效范围只限定在:2017年 laydate.render({
elem: "#date10",
min: "2017-01-01",
max: "2017-12-31"
});
})
/*** mark - 标注重要日子* 每年的日期 {'0-9-18': '国耻'} 0 即代表每一年每月的日期 {'0-0-15': '中旬'} 0-0 即代表每年每月(layui 2.1.1/layDate 5.0.4 新增)特定的日期 {'2017-8-21': '发布')*/
laydate.render({
elem: "#date20",
type: "date",
mark: {
'0-10-14': '生日'
,'0-0-10': '工资'
,'2017-8-21': '结婚'
}
// 点击某一个日期,响应的回调函数 ,done: function(value, date){
console.log(date);
if(date.year === 2017 && date.month === 8 && date.date === 21){
layer.msg('结婚纪恋日快乐,记得买花');
}
}
});
// calendar - 是否显示公历节日 // 我们内置了一些我国通用的公历重要节日,通过设置 true 来开启。国际版不会显示。 laydate.render({
elem: "#date19",
type: "date",
calendar: true
});
// theme - 主题 // default(默认简约)、molv(墨绿背景)、#颜色值(自定义颜色背景)、grid(格子主题) laydate.render({
elem: "#date18",
type: "date",
theme: "#3c3c3c"
});
/*** lang - 语言* lang="en"国际版, lang="cn"中文版(默认)*/
laydate.render({
elem: "#date17",
type: "date",
lang: "en"
});
/*** btns - 工具按钮* 'clear': 对应“清空”按钮* 'now':对应“现在”按钮* 'confirm':对应“确定”按钮*/
laydate.render({
elem: "#date16",
type: "date",
btns: ["confirm", "now"]
});
// showBottom - 是否显示底部栏 laydate.render({
elem: "#date15",
type: "date",
showBottom: false
});
// 自定义弹出控件的事件 laydate.render({
elem: "#date14",
type: "date",
trigger: "mouseenter"
});