github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

style(laydate): 格式化示例代码

pull/1523/head
贤心 11 months ago
parent
c15f466b99
commit
53ae5bb204
1 changed files with 176 additions and 140 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 286
      examples/laydate.html

286
examples/laydate.html
Unescape View File

@ -145,9 +145,7 @@ body{padding: 50px 100px;}
<script src="../src/layui.js" src1="http://local.res.layui.com/layui/release/laydate/dist/laydate.js" charset="utf-8"></script> <script src="../src/layui.js" src1="http://local.res.layui.com/layui/release/laydate/dist/laydate.js" charset="utf-8"></script>
<script> <script>
layui.use('laydate', function (laydate) {
layui.use('laydate', function(laydate){
//全局配置 //全局配置
laydate.set({ laydate.set({
//trigger: 'focus' //trigger: 'focus'
@ -159,21 +157,20 @@ layui.use('laydate', function(laydate){
min: 0, min: 0,
shade: [0.1, '#000'], shade: [0.1, '#000'],
//max: '2016-12-30', //max: '2016-12-30',
done: function(){ done: function () {
console.log('done',arguments); console.log('done', arguments);
}, },
onConfirm: function(){ onConfirm: function () {
console.log('confirm',arguments); console.log('confirm', arguments);
}, },
onNow: function(){ onNow: function () {
console.log('now',arguments); console.log('now', arguments);
}, },
onClear: function(){ onClear: function () {
console.log('clear',arguments); console.log('clear', arguments);
} }
}); });
// 范围选择1 // 范围选择1
laydate.render({ laydate.render({
elem: '#test1', // 指定元素 elem: '#test1', // 指定元素
@ -187,12 +184,12 @@ layui.use('laydate', function(laydate){
// max: '2021-5-9', // max: '2021-5-9',
// value: '2021-05-09 12:06:09', // value: '2021-05-09 12:06:09',
// value: '2021-05-08 - 2021-03-27', // value: '2021-05-08 - 2021-03-27',
done: function(value, date, endDate){ done: function (value, date, endDate) {
console.log(value, date, endDate); console.log(value, date, endDate);
//this.elem.val(123); //this.elem.val(123);
}, },
change: function(value, date, endDate){ change: function (value, date, endDate) {
console.log(value, date, endDate); console.log(value, date, endDate);
} }
}); });
@ -202,7 +199,7 @@ layui.use('laydate', function(laydate){
// 范围选择2 // 范围选择2
laydate.render({ laydate.render({
elem: '#test1-2', elem: '#test1-2',
type: 'date', type: 'datetime',
range: ['#test-startDate-1', '#test-endDate-1'], range: ['#test-startDate-1', '#test-endDate-1'],
rangeLinked: true, // 是否开启日期范围选择时的区间联动标注模式 rangeLinked: true, // 是否开启日期范围选择时的区间联动标注模式
// value: ['2022-05-01', '2022-10-01'], // value: ['2022-05-01', '2022-10-01'],
@ -214,27 +211,26 @@ layui.use('laydate', function(laydate){
} }
}); });
// 日期选择器（单面板） // 日期选择器（单面板）
laydate.render({ laydate.render({
elem: '#test2' elem: '#test2',
//,format: 'yyyy年MM月dd日' //,format: 'yyyy年MM月dd日'
,value: new Date(1534766888000) value: new Date(1534766888000),
//,isInitValue: false //,isInitValue: false
,format: 'yyyy/MM/dd' format: 'yyyy/MM/dd',
,min: 7 min: 7,
//,max: 0 //,max: 0
//,min: '2016-10-14' //,min: '2016-10-14'
//,max: -1 //,max: -1
//,value: '1989年10月14日' //,value: '1989年10月14日'
,ready: function(date){ ready: function (date) {
console.log(date); console.log(date);
} },
,done: function(value, date, endDate){ done: function (value, date, endDate) {
console.log(value, date, endDate); console.log(value, date, endDate);
//this.elem.val(111111); //this.elem.val(111111);
} },
,change: function(value){ change: function (value) {
console.log(value); console.log(value);
} }
}); });
@ -244,16 +240,16 @@ layui.use('laydate', function(laydate){
elem: '#test2-1', elem: '#test2-1',
shortcuts: [ shortcuts: [
{ {
text: "昨天", text: '昨天',
value: (function () { value: (function () {
var now = new Date(); var now = new Date();
now.setDate(now.getDate() - 1); now.setDate(now.getDate() - 1);
return now; return now;
})() })()
}, },
{ text: "今天", value: Date.now() }, { text: '今天', value: Date.now() },
{ {
text: "明天", text: '明天',
value: (function () { value: (function () {
var now = new Date(); var now = new Date();
now.setDate(now.getDate() + 1); now.setDate(now.getDate() + 1);
@ -261,7 +257,7 @@ layui.use('laydate', function(laydate){
})() })()
}, },
{ {
text: "上个月", text: '上个月',
value: (function () { value: (function () {
var now = new Date(); var now = new Date();
// now.setDate(now.getDate() - 1); // now.setDate(now.getDate() - 1);
@ -270,7 +266,7 @@ layui.use('laydate', function(laydate){
})() })()
}, },
{ {
text: "上个月的前一天", text: '上个月的前一天',
value: (function () { value: (function () {
var now = new Date(); var now = new Date();
now.setMonth(now.getMonth() - 1); now.setMonth(now.getMonth() - 1);
@ -279,69 +275,67 @@ layui.use('laydate', function(laydate){
})() })()
}, },
{ {
text: "某一天", text: '某一天',
value: "2020-12-12" value: '2020-12-12'
} }
] ]
}) });
//年选择器 //年选择器
laydate.render({ laydate.render({
elem: '#test3' elem: '#test3',
,type: 'year' type: 'year',
//,range: true //,range: true
//,trigger: 'click' //,trigger: 'click'
//,min:'2021-01-01' //,min:'2021-01-01'
//,max:'2022-12-31' //,max:'2022-12-31'
,done: function(value, date, endDate){ done: function (value, date, endDate) {
console.log(value, date, endDate); console.log(value, date, endDate);
} },
,change: function(value, date, endDate){ change: function (value, date, endDate) {
//this.elem.val(value) //this.elem.val(value)
} }
}); });
//年月选择器 //年月选择器
laydate.render({ laydate.render({
elem: '#test4' elem: '#test4',
,type: 'month' type: 'month',
,range: true range: true,
,trigger: 'click' trigger: 'click',
,min:'2022-03-01' min: '2022-03-01',
,max:'2022-05-31' max: '2022-05-31',
,done: function(value, date, endDate){ done: function (value, date, endDate) {
console.log(value, date, endDate); console.log(value, date, endDate);
} },
,change: function(value, date, endDate){ change: function (value, date, endDate) {
this.elem.val(value) this.elem.val(value);
} }
}); });
//时间选择器 //时间选择器
laydate.render({ laydate.render({
elem: '#test5' elem: '#test5',
,type: 'time' type: 'time',
//,range: true //,range: true
//,trigger: 'click' //,trigger: 'click'
,min: '09:30:00' min: '09:30:00',
,max: '17:30:00' max: '17:30:00',
,done: function(value, date, endDate){ done: function (value, date, endDate) {
console.log(value, date, endDate); console.log(value, date, endDate);
} },
,change: function(value, date, endDate){ change: function (value, date, endDate) {
//this.elem.val(value) //this.elem.val(value)
} }
}); });
//时间范围选择器 //时间范围选择器
laydate.render({ laydate.render({
elem: '#test55' elem: '#test55',
,type: 'time' type: 'time',
,range: true range: true,
//,trigger: 'click' //,trigger: 'click'
,done: function(value, date, endDate){ done: function (value, date, endDate) {
console.log(value, date, endDate); console.log(value, date, endDate);
} }
}); });
@ -362,21 +356,22 @@ layui.use('laydate', function(laydate){
//自定义重要日 //自定义重要日
var ins555 = laydate.render({ var ins555 = laydate.render({
elem: '#test555' elem: '#test555',
//,calendar: true //是否开启公历重要节日 //,calendar: true //是否开启公历重要节日
,mark: { //标记重要日子 mark: {
'0-10-14': '生日' //0代表：每年 //标记重要日子
,'0-0-15': '中旬' '0-10-14': '生日', //0代表：每年
,'2017-8-20': 'v2' '0-0-15': '中旬',
,'2017-8-31': '月底' '2017-8-20': 'v2',
} '2017-8-31': '月底'
,done: function(value, date, endDate){ },
if(date.year == 2016 && date.month == 10 && date.date == 14){ done: function (value, date, endDate) {
if (date.year == 2016 && date.month == 10 && date.date == 14) {
//console.log('Layui 诞生日'); //console.log('Layui 诞生日');
} }
} },
,change: function(value, date, endDate){ change: function (value, date, endDate) {
console.log(value) console.log(value);
} }
}); });
@ -385,101 +380,142 @@ layui.use('laydate', function(laydate){
elem: '#test5555', elem: '#test5555',
value: '2022-5-21', value: '2022-5-21',
holidays: [ holidays: [
['2022-1-1', '2022-1-2', '2022-1-3', '2022-1-31', '2022-2-1', '2022-2-2', '2022-2-3', '2022-2-4', '2022-2-5', '2022-2-6', '2022-4-3', '2022-4-4', '2022-4-5', '2022-4-30', '2022-5-1', '2022-5-2', '2022-5-3', '2022-5-4', '2022-6-3', '2022-6-4', '2022-6-5', '2022-9-10', '2022-9-11', '2022-9-12', '2022-10-1', '2022-10-2', '2022-10-3', '2022-10-4', '2022-10-5', '2022-10-6', '2022-10-7'], [
'2022-1-1',
['2022-1-29', '2022-1-30', '2022-4-2', '2022-4-24', '2022-5-7', '2022-10-8', '2022-10-9'] '2022-1-2',
'2022-1-3',
'2022-1-31',
'2022-2-1',
'2022-2-2',
'2022-2-3',
'2022-2-4',
'2022-2-5',
'2022-2-6',
'2022-4-3',
'2022-4-4',
'2022-4-5',
'2022-4-30',
'2022-5-1',
'2022-5-2',
'2022-5-3',
'2022-5-4',
'2022-6-3',
'2022-6-4',
'2022-6-5',
'2022-9-10',
'2022-9-11',
'2022-9-12',
'2022-10-1',
'2022-10-2',
'2022-10-3',
'2022-10-4',
'2022-10-5',
'2022-10-6',
'2022-10-7'
],
[
'2022-1-29',
'2022-1-30',
'2022-4-2',
'2022-4-24',
'2022-5-7',
'2022-10-8',
'2022-10-9'
]
] ]
}); });
//墨绿主题 //墨绿主题
laydate.render({ laydate.render({
elem: '#test6-1' //指定元素 elem: '#test6-1', //指定元素
,type: 'datetime' type: 'datetime',
,theme: 'molv' theme: 'molv',
,value: 20180115 value: 20180115,
,isInitValue: true isInitValue: true,
,lang: 'en' lang: 'en',
//,range: true //,range: true
,trigger: 'click' trigger: 'click'
}); });
//自定义背景色主题 //自定义背景色主题
laydate.render({ laydate.render({
elem: '#test6-2' //指定元素 elem: '#test6-2', //指定元素
,type: 'datetime' type: 'datetime',
,theme: '#393D49' theme: '#393D49',
//,range: true //,range: true
,trigger: 'click' trigger: 'click'
}); });
//格子主题 //格子主题
laydate.render({ laydate.render({
elem: '#test6-3' //指定元素 elem: '#test6-3', //指定元素
//,type: 'datetime' //,type: 'datetime'
,theme: 'grid' theme: 'grid',
//,range: true //,range: true
,trigger: 'click' trigger: 'click'
}); });
//其它元素触发 //其它元素触发
laydate.render({ laydate.render({
elem: '#test6' //指定元素 elem: '#test6', //指定元素
,eventElem: '#test7' //绑定执行事件的元素 eventElem: '#test7', //绑定执行事件的元素
,lang: 'en' lang: 'en'
}); });
//外部事件 //外部事件
lay('#test9').on('click', function(e){ lay('#test9').on('click', function (e) {
laydate.render({ laydate.render({
elem: '#test8' elem: '#test8',
,type: 'datetime' type: 'datetime',
,show: true show: true,
//,min: '2017-08-12 00:10:00' //,min: '2017-08-12 00:10:00'
//,max: '2017-08-12 23:10:10' //,max: '2017-08-12 23:10:10'
,closeStop: '#test9' //点击 #test6 所在元素区域不关闭控件 closeStop: '#test9', //点击 #test6 所在元素区域不关闭控件
,change: function(value, date){ change: function (value, date) {
console.log(value, date) console.log(value, date);
} },
,done: function(value, date){ done: function (value, date) {
console.log(value, date) console.log(value, date);
} }
}); });
}); });
//直接嵌套在指定容器中 //直接嵌套在指定容器中
var ins10 = laydate.render({ var ins10 = laydate.render({
elem: '#test10' elem: '#test10',
,position: 'static' position: 'static',
,calendar: true //是否开启公历重要节日 calendar: true, //是否开启公历重要节日
,mark: { //标记重要日子 mark: {
'2021-8-20': '' //标记重要日子
,'2021-8-21': '' '2021-8-20': '',
} '2021-8-21': ''
,done: function(value, date, endDate){ },
if(date.year == 2021 && date.month == 8 && date.date == 20){ done: function (value, date, endDate) {
if (date.year == 2021 && date.month == 8 && date.date == 20) {
ins10.hint(value + '，活动日'); ins10.hint(value + '，活动日');
} }
} },
,change: function(value, date, endDate){ change: function (value, date, endDate) {
console.log(value,date) console.log(value, date);
} }
}); });
laydate.render({ laydate.render({
elem: '#test11' elem: '#test11',
,position: 'static' position: 'static',
,lang: 'en' lang: 'en',
,type: 'datetime' type: 'datetime',
,calendar: true //是否开启公历重要节日 calendar: true, //是否开启公历重要节日
,done: function(value, date, endDate){ done: function (value, date, endDate) {
//console.log(value, date, endDate); //console.log(value, date, endDate);
} },
,change: function(value, date, endDate){ change: function (value, date, endDate) {
console.log(value) console.log(value);
} }
}); });
}); });
</script> </script>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save