时间日期选择器
<div class="content" type="type - 控件选择类型">
<!--
year 年选择器 只提供年列表选择
month 年月选择器 只提供年、月选择
date 日期选择器 可选择:年、月、日。type默认值,一般可不填
time 时间选择器 只提供时、分、秒选择
datetime 日期时间选择器 可选择:年、月、日、时、分、秒
-->
年选择器 <input id="date1" type="text"> <br>
年月选择器 <input id="date2" type="text"> <br>
年月日选择器 <input id="date3" type="text"> <br>
时间选择器 <input id="date4" type="text"> <br>
日期时间选择器 <input id="date5" type="text"> <br>
</div>
<script>
layui.use(["laydate","jQuery","layer"],function(){
var laydate =layui.laydate;
var $ = layui.jquery;
var layer =layui.layer;
// 日期时间选择器
laydate.render({
elem: '#date5',
type: "datetime"
});
// 时间选择器
laydate.render({
elem: '#date4',
type: "time"
});
// 年月日选择器
laydate.render({
elem: '#date3'
// type: "date" // 默认值,可以省略
});
// 年月选择器
laydate.render({
elem: '#date2',
type: "month"
});
// 年选择器
laydate.render({
elem: '#date1', // 用于绑定执行日期渲染的元素
type: "year"
});
})
</script>
<div class="content" type="range - 开启左右面板范围选择">
年月日范围选择 <input id="date6" type="text">
</div>
<div class="content" type="format - 自定义格式">
年月日选择器 <input id="date7" type="text"> <br>
年月日时分秒选择器 <input id="date8" style="width: 250px" type="text">
</div>
<div class="content" type="min/max - 最小/大范围内的日期时间值">
日期有效范围只限定在:2017年 <input id="date10" type="text"> <br>
日期有效范围限定在:过去一周到未来一周 <input id="date11" type="text"> <br>
时间有效范围设定在: 上午九点半到下午五点半 <input id="date12" type="text"> <br>
日期时间有效范围的设定: <input id="date13" type="text"> <br>
</div>
<script>
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"
});
</script>