You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
layui/examples/laydate.html

375 lines
8.4 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>日期模块 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body{padding: 50px 100px;}
.layui-inline{margin-right: 15px;}
</style>
</head>
<body>
范围选择1
<div class="layui-inline">
<input type="text" class="layui-input" id="test1">
</div>
<br><hr>
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">范围选择2</label>
<div class="layui-inline" id="test1-2">
<div class="layui-input-inline">
<input type="text" autocomplete="off" id="test-startDate-1" class="layui-input" placeholder="开始日期">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline">
<input type="text" autocomplete="off" id="test-endDate-1" class="layui-input" placeholder="结束日期">
</div>
</div>
</div>
</div>
</div>
<br><hr>
日期选择器:
<div class="layui-inline">
<input type="text" class="layui-input" id="test2">
</div>
<br><br><hr><br>
年选择器:
<div class="layui-inline">
<input type="text" class="layui-input" id="test3">
</div>
年月选择器:
<div class="layui-inline">
<input type="text" class="layui-input" id="test4">
</div>
时间时间器:
<div class="layui-inline">
<input type="text" class="layui-input" id="test5">
</div>
<br><br><hr><br>
时间范围选择
<div class="layui-inline">
<input type="text" class="layui-input" id="test55">
</div>
自定义重要日:
<div class="layui-inline">
<input type="text" class="layui-input" id="test555">
</div>
<br><br><hr><br>
同时绑定多个:
<div class="layui-inline">
<input type="text" class="layui-input test-item">
</div>
<div class="layui-inline">
<input type="text" class="layui-input test-item">
</div>
<div class="layui-inline">
<input type="text" class="layui-input test-item">
</div>
<br><br><hr><br>
墨绿主题:
<div class="layui-inline">
<input type="text" class="layui-input" id="test6-1">
</div>
自定义头部背景色:
<div class="layui-inline">
<input type="text" class="layui-input" id="test6-2">
</div>
格子主题:
<div class="layui-inline">
<input type="text" class="layui-input" id="test6-3">
</div>
<br><br><hr><br>
<button class="layui-btn" id="test7">其它元素触发</button>
<div class="layui-inline">
<input type="text" class="layui-input" id="test6">
</div>
<textarea></textarea>
<button class="layui-btn" id="test9">外部事件触发</button>
<div class="layui-inline">
<input type="text" class="layui-input" id="test8">
</div>
<br><br><hr><br>
直接嵌套在指定容器中:<br><br>
<div class="layui-inline" id="test10"></div>
<div class="layui-inline" id="test11" style="margin-left: 30px;"></div>
<script src="../src/layui.js" src1="http://local.res.layui.com/layui/release/laydate/dist/laydate.js" charset="utf-8"></script>
<script>
layui.use('laydate', function(laydate){
//全局配置
laydate.set({
//trigger: 'focus'
})
//范围选择1
laydate.render({
elem: '#test1' //指定元素
,type: 'datetime'
,trigger: 'click'
//,lang: 'en'
//,theme: 'grid'
,range: true //开启日期范围,默认使用“-”分割
//,min: '1970-1-1'
//,max: '2021-5-9'
//,value: '2021-05-09 12:06:09'
//,value: '2021-05-08 - 2021-03-27'
,done: function(value, date, endDate){
console.log(value, date, endDate);
//this.elem.val(123);
}
,change: function(value, date, endDate){
console.log(value, date, endDate);
}
});
//return;
//范围选择2
laydate.render({
elem: '#test1-2'
,type: 'date'
,range: ['#test-startDate-1', '#test-endDate-1']
//,value: ['2022-05-01', '2022-06-01']
//,value: '2022-05-01 - 2022-06-01'
});
//单控件
laydate.render({
elem: '#test2'
//,format: 'yyyy年MM月dd日'
,value: new Date(1534766888000)
//,isInitValue: false
,format: 'yyyy/MM/dd'
,min: 7
//,max: 0
//,min: '2016-10-14'
//,max: -1
//,value: '1989年10月14日'
,ready: function(date){
console.log(date);
}
,done: function(value, date, endDate){
console.log(value, date, endDate);
//this.elem.val(111111);
}
,change: function(value){
console.log(value);
}
});
//年选择器
laydate.render({
elem: '#test3'
,type: 'year'
//,range: true
//,trigger: 'click'
//,min:'2021-01-01'
//,max:'2022-12-31'
,done: function(value, date, endDate){
console.log(value, date, endDate);
}
,change: function(value, date, endDate){
//this.elem.val(value)
}
});
//年月选择器
laydate.render({
elem: '#test4'
,type: 'month'
,range: true
,trigger: 'click'
,min:'2022-03-01'
,max:'2022-05-31'
,done: function(value, date, endDate){
console.log(value, date, endDate);
}
,change: function(value, date, endDate){
this.elem.val(value)
}
});
//时间选择器
laydate.render({
elem: '#test5'
,type: 'time'
//,range: true
//,trigger: 'click'
,min: '09:30:00'
,max: '17:30:00'
,done: function(value, date, endDate){
console.log(value, date, endDate);
}
,change: function(value, date, endDate){
//this.elem.val(value)
}
});
//时间范围选择器
laydate.render({
elem: '#test55'
,type: 'time'
,range: true
//,trigger: 'click'
,done: function(value, date, endDate){
console.log(value, date, endDate);
}
});
//同时绑定多个
lay('.test-item').each(function(){
laydate.render({
elem: this
,trigger: 'click'
});
});
//自定义重要日
var ins555 = laydate.render({
elem: '#test555'
//,calendar: true //是否开启公历重要节日
,mark: { //标记重要日子
'0-8-15': '纪念' //0代表每年
,'0-0-15': '中旬'
,'2017-8-20': '发布'
,'2017-8-31': '月底'
}
,done: function(value, date, endDate){
if(date.year == 2017 && date.month == 8 && date.date == 15){
//console.log('中国人民战胜日本法西斯纪念日');
}
}
,change: function(value, date, endDate){
console.log(value)
}
});
//墨绿主题
laydate.render({
elem: '#test6-1' //指定元素
,type: 'datetime'
,theme: 'molv'
,value: 20180115
,isInitValue: true
,lang: 'en'
//,range: true
,trigger: 'click'
});
//自定义背景色主题
laydate.render({
elem: '#test6-2' //指定元素
,type: 'datetime'
,theme: '#393D49'
//,range: true
,trigger: 'click'
});
//格子主题
laydate.render({
elem: '#test6-3' //指定元素
//,type: 'datetime'
,theme: 'grid'
//,range: true
,trigger: 'click'
});
//其它元素触发
laydate.render({
elem: '#test6' //指定元素
,eventElem: '#test7' //绑定执行事件的元素
,lang: 'en'
});
//外部事件
lay('#test9').on('click', function(e){
laydate.render({
elem: '#test8'
,type: 'datetime'
,show: true
//,min: '2017-08-12 00:10:00'
//,max: '2017-08-12 23:10:10'
,closeStop: '#test9' //点击 #test6 所在元素区域不关闭控件
,change: function(value, date){
console.log(value, date)
}
,done: function(value, date){
console.log(value, date)
}
});
});
//直接嵌套在指定容器中
var ins10 = laydate.render({
elem: '#test10'
,position: 'static'
,calendar: true //是否开启公历重要节日
,mark: { //标记重要日子
'2021-8-20': ''
,'2021-8-21': ''
}
,done: function(value, date, endDate){
if(date.year == 2021 && date.month == 8 && date.date == 20){
ins10.hint(value + ',活动日');
}
}
,change: function(value, date, endDate){
console.log(value,date)
}
});
laydate.render({
elem: '#test11'
,position: 'static'
,lang: 'en'
,type: 'datetime'
,calendar: true //是否开启公历重要节日
,done: function(value, date, endDate){
//console.log(value, date, endDate);
}
,change: function(value, date, endDate){
console.log(value)
}
});
});
</script>
</body>
</html>