init
This commit is contained in:
25
public/frontend/layui-main/docs/laydate/examples/elem.md
Executable file
25
public/frontend/layui-main/docs/laydate/examples/elem.md
Executable file
@@ -0,0 +1,25 @@
|
||||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<input type="text" class="layui-input demo-laydate-item" lay-options="{}" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<input type="text" class="layui-input demo-laydate-item" lay-options="{}" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<input type="text" class="layui-input demo-laydate-item" lay-options="{}" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laydate = layui.laydate;
|
||||
|
||||
// 渲染
|
||||
laydate.render({
|
||||
elem: '.demo-laydate-item'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
78
public/frontend/layui-main/docs/laydate/examples/format.md
Executable file
78
public/frontend/layui-main/docs/laydate/examples/format.md
Executable file
@@ -0,0 +1,78 @@
|
||||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">请选择日期</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-format-1" placeholder="yyyy年MM月dd日">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">请选择日期</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-format-2" placeholder="dd/MM/yyyy">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">请选择月份</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-format-3" placeholder="yyyyMMdd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">请选择时间</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-format-4" placeholder="H点m分">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">请选择范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-format-5" placeholder=" ~ ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">请选择范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-format-6" placeholder="开始 到 结束">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laydate = layui.laydate;
|
||||
|
||||
// 自定义格式
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-format-1',
|
||||
format: 'yyyy年MM月dd日'
|
||||
});
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-format-2',
|
||||
format: 'dd/MM/yyyy'
|
||||
});
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-format-3',
|
||||
format: 'yyyyMMdd'
|
||||
});
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-format-4',
|
||||
type: 'time',
|
||||
format: 'H点m分'
|
||||
});
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-format-5',
|
||||
type: 'month',
|
||||
range: '~',
|
||||
format: 'yyyy-MM'
|
||||
});
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-format-6',
|
||||
type: 'datetime',
|
||||
range: '到',
|
||||
format: 'yyyy年M月d日H时m分s秒'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
58
public/frontend/layui-main/docs/laydate/examples/limit.md
Executable file
58
public/frontend/layui-main/docs/laydate/examples/limit.md
Executable file
@@ -0,0 +1,58 @@
|
||||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">限定可选日期</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-limit-1" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">前后若干天可选</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-limit-2" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">限定可选时间</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-limit-3" placeholder="HH:mm:ss">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">
|
||||
这里以控制在 9:30-17:30 为例
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laydate = layui.laydate;
|
||||
|
||||
// 限定可选日期
|
||||
var ins22 = laydate.render({
|
||||
elem: '#ID-laydate-limit-1',
|
||||
min: '2016-10-14',
|
||||
max: '2080-10-14',
|
||||
ready: function(){
|
||||
ins22.hint('日期可选值设定在 <br> 2016-10-14 到 2080-10-14');
|
||||
}
|
||||
});
|
||||
|
||||
// 前后若干天可选，这里以前后 7 天为例
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-limit-2',
|
||||
min: -7,
|
||||
max: 7
|
||||
});
|
||||
|
||||
// 限定可选时间
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-limit-3',
|
||||
type: 'time',
|
||||
min: '09:30:00',
|
||||
max: '17:30:00',
|
||||
btns: ['clear', 'confirm']
|
||||
});
|
||||
});
|
||||
</script>
|
||||
66
public/frontend/layui-main/docs/laydate/examples/mark.md
Executable file
66
public/frontend/layui-main/docs/laydate/examples/mark.md
Executable file
@@ -0,0 +1,66 @@
|
||||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">开启公历节日</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-calendar" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">自定义日子</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-mark" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">节假日标注</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-holidays" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laydate = layui.laydate;
|
||||
|
||||
// 渲染
|
||||
//开启公历节日
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-calendar',
|
||||
calendar: true
|
||||
});
|
||||
|
||||
//自定义重要日子
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-mark',
|
||||
mark: {
|
||||
'0-10-14': '生日',
|
||||
'0-12-31': '跨年', //每年的日期
|
||||
'0-0-10': '工资', //每月某天
|
||||
'0-0-15': '月中',
|
||||
'2017-8-15': '', //如果为空字符，则默认显示数字+徽章
|
||||
'2099-10-14': '呵呵'
|
||||
},
|
||||
done: function(value, date){
|
||||
// 点击每年的 10月14日，弹出提示语
|
||||
if(date.month === 10 && date.date === 14){
|
||||
layer.msg('这一天是：Layui 的生日');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 节假日和补班日标注
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-holidays',
|
||||
value: '2023-05-08',
|
||||
holidays: [ // v2.7.3 新增
|
||||
['2022-12-31', '2023-1-1', '2023-1-2', '2023-1-21', '2023-1-22', '2023-1-23', '2023-1-24', '2023-1-25', '2023-1-26', '2023-1-27', '2023-4-5', '2023-4-29', '2023-4-30', '2023-5-1', '2023-5-2', '2023-5-3', '2023-6-22', '2023-6-23', '2023-6-24', '2023-9-29', '2023-9-30', '2023-10-1', '2023-10-2', '2023-10-3', '2023-10-4', '2023-10-5', '2023-10-6'],
|
||||
// 2023 年的补班日
|
||||
['2023-1-28', '2023-1-29', '2023-4-23', '2023-5-6', '2023-6-25', '2023-10-7', '2023-10-8']
|
||||
]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
199
public/frontend/layui-main/docs/laydate/examples/more.md
Executable file
199
public/frontend/layui-main/docs/laydate/examples/more.md
Executable file
@@ -0,0 +1,199 @@
|
||||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">初始赋值</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-more-value" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">选中后的回调</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-more-done" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期切换的回调</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-more-change" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">不出现底部栏</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-more-bottom" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">只出现确定按钮</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-more-btns" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">自定义事件</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-more-trigger" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label" id="ID-laydate-more-event-1">点我触发</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-more-event" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label" id="ID-laydate-more-dblclick">双击我触发</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-more-dblclick-input" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期只读</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-more-readonly" readonly placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">非 input 元素</label>
|
||||
<div class="layui-input-inline">
|
||||
<div id="ID-laydate-more-div" style="height: 38px; line-height: 38px; cursor: pointer; border-bottom: 1px solid #e2e2e2;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">开启遮罩</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-more-shade" readonly placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-text-em">
|
||||
<sup>2.8+</sup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h5 style="margin-bottom: 15px; font-weight: 700;">
|
||||
覆盖实例与解除实例 <sup>2.8+</sup> :
|
||||
</h5>
|
||||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<div class="layui-form-label" style="padding: 0; text-align: left;">
|
||||
<select lay-filter="filter-demo-laydate-reset">
|
||||
<option value="year">年份</option>
|
||||
<option value="month">月份</option>
|
||||
<option value="date" selected>日期</option>
|
||||
<option value="time">时间</option>
|
||||
<option value="other">解除</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-more-reset" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laydate = layui.laydate;
|
||||
var form = layui.form;
|
||||
|
||||
// 初始赋值
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-more-value',
|
||||
value: '2016-10-14',
|
||||
isInitValue: true
|
||||
});
|
||||
|
||||
// 选中后的回调
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-more-done',
|
||||
done: function(value, date){
|
||||
layer.alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
|
||||
}
|
||||
});
|
||||
|
||||
// 日期切换的回调
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-more-change',
|
||||
change: function(value, date){
|
||||
layer.msg('你选择的日期是：' + value + '<br><br>获得的对象是' + JSON.stringify(date));
|
||||
}
|
||||
});
|
||||
|
||||
// 不出现底部栏
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-more-bottom',
|
||||
showBottom: false
|
||||
});
|
||||
|
||||
// 只出现确定按钮
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-more-btns',
|
||||
btns: ['confirm']
|
||||
});
|
||||
|
||||
// 自定义事件
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-more-trigger',
|
||||
trigger: 'mousedown'
|
||||
});
|
||||
|
||||
// 点我触发
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-more-event',
|
||||
eventElem: '#ID-laydate-more-event-1',
|
||||
trigger: 'click'
|
||||
});
|
||||
|
||||
// 双击我触发
|
||||
lay('#ID-laydate-more-dblclick').on('dblclick', function(){
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-more-dblclick-input',
|
||||
show: true,
|
||||
closeStop: '#ID-laydate-more-dblclick',
|
||||
});
|
||||
});
|
||||
|
||||
// 日期只读
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-more-readonly',
|
||||
trigger: 'click',
|
||||
});
|
||||
|
||||
// 非 input 元素
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-more-div'
|
||||
});
|
||||
|
||||
// 开启遮罩
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-more-shade',
|
||||
triggdestroyer: 'click',
|
||||
shade: 0.8 // 遮罩透明度 --- 2.8+
|
||||
});
|
||||
|
||||
// 覆盖实例与销毁实例
|
||||
var inst = laydate.render({
|
||||
elem: '#ID-laydate-more-reset'
|
||||
});
|
||||
form.on("select(filter-demo-laydate-reset)", function (obj) {
|
||||
var value = obj.value;
|
||||
var options = inst.config;
|
||||
var elem = options.elem[0];
|
||||
|
||||
if (value === "other") {
|
||||
laydate.unbind(options.id); // 解绑实例 --- 2.8+
|
||||
elem.focus();
|
||||
} else {
|
||||
// 覆盖渲染
|
||||
laydate.render({
|
||||
elem: elem,
|
||||
type: value,
|
||||
show: true // 渲染即显示
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
33
public/frontend/layui-main/docs/laydate/examples/normal.md
Executable file
33
public/frontend/layui-main/docs/laydate/examples/normal.md
Executable file
@@ -0,0 +1,33 @@
|
||||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">中文版</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-demo" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">国际版</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-demo-en" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laydate = layui.laydate;
|
||||
|
||||
// 渲染
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-demo'
|
||||
});
|
||||
// 英文版
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-demo-en',
|
||||
lang: 'en'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
111
public/frontend/layui-main/docs/laydate/examples/range.md
Executable file
111
public/frontend/layui-main/docs/laydate/examples/range.md
Executable file
@@ -0,0 +1,111 @@
|
||||
<div class="layui-form">
|
||||
<h5 style="margin-bottom: 16px;">
|
||||
左右面板<strong class="layui-font-red">独立</strong>选择模式（默认） :
|
||||
</h5>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期范围</label>
|
||||
<div class="layui-inline" id="ID-laydate-range">
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" autocomplete="off" id="ID-laydate-start-date" class="layui-input" placeholder="开始日期">
|
||||
</div>
|
||||
<div class="layui-form-mid">-</div>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" autocomplete="off" id="ID-laydate-end-date" class="layui-input" placeholder="结束日期">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h5 style="margin-bottom: 16px;">
|
||||
左右面板<strong class="layui-font-red">联动</strong>选择模式 <sup>2.8+</sup> :
|
||||
</h5>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期范围</label>
|
||||
<div class="layui-inline" id="ID-laydate-rangeLinked">
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" autocomplete="off" id="ID-laydate-start-date-1" class="layui-input" placeholder="开始日期">
|
||||
</div>
|
||||
<div class="layui-form-mid">-</div>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" autocomplete="off" id="ID-laydate-end-date-1" class="layui-input" placeholder="结束日期">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h5 style="margin-bottom: 16px;">其他类型的范围选择 :</h5>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">年范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-range-year" placeholder=" - ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">年月范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-range-month" placeholder=" - ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">时间范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-range-time" placeholder=" - ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期时间范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-range-datetime" placeholder=" - ">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laydate = layui.laydate;
|
||||
|
||||
// 日期范围 - 左右面板独立选择模式
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-range',
|
||||
range: ['#ID-laydate-start-date', '#ID-laydate-end-date']
|
||||
});
|
||||
|
||||
// 日期范围 - 左右面板联动选择模式
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-rangeLinked',
|
||||
range: ['#ID-laydate-start-date-1', '#ID-laydate-end-date-1'],
|
||||
rangeLinked: true // 开启日期范围选择时的区间联动标注模式 --- 2.8+ 新增
|
||||
});
|
||||
|
||||
// 年范围
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-range-year',
|
||||
type: 'year',
|
||||
range: true
|
||||
});
|
||||
|
||||
// 年月范围
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-range-month',
|
||||
type: 'month',
|
||||
range: true
|
||||
});
|
||||
|
||||
// 时间范围
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-range-time',
|
||||
type: 'time',
|
||||
range: true
|
||||
});
|
||||
|
||||
// 日期时间范围
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-range-datetime',
|
||||
type: 'datetime',
|
||||
range: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
559
public/frontend/layui-main/docs/laydate/examples/shortcut.md
Executable file
559
public/frontend/layui-main/docs/laydate/examples/shortcut.md
Executable file
@@ -0,0 +1,559 @@
|
||||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-shortcut-date">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">年份</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-shortcut-year">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">年月</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-shortcut-month">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">时间</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-shortcut-time">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期时间</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-shortcut-datetime">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期时间全面板</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-shortcut-datetime-fullPanel">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-shortcut-range-date" placeholder=" - ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">年份范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-shortcut-range-year" placeholder=" - ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">年月范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-shortcut-range-month" placeholder=" - ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">时间范围</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-shortcut-range-time" placeholder=" - ">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">日期时间范围</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" class="layui-input" id="ID-laydate-shortcut-range-datetime" placeholder=" - ">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laydate = layui.laydate;
|
||||
var util = layui.util;
|
||||
|
||||
/*
|
||||
* 快捷选项
|
||||
*/
|
||||
|
||||
// 日期
|
||||
laydate.render({
|
||||
elem: "#ID-laydate-shortcut-date",
|
||||
shortcuts: [
|
||||
{
|
||||
text: "昨天",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setDate(now.getDate() - 1);
|
||||
return now;
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "今天",
|
||||
value: function(){
|
||||
return Date.now();
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "明天",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setDate(now.getDate() + 1);
|
||||
return now;
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "上个月",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
// now.setDate(now.getDate() - 1);
|
||||
now.setMonth(now.getMonth() - 1);
|
||||
return [now];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "上个月的前一天",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setMonth(now.getMonth() - 1);
|
||||
now.setDate(now.getDate() - 1);
|
||||
return [now];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "某一天",
|
||||
value: "2016-10-14"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 年份
|
||||
laydate.render({
|
||||
elem: "#ID-laydate-shortcut-year",
|
||||
type: "year",
|
||||
shortcuts: [
|
||||
{
|
||||
text: "去年",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setFullYear(now.getFullYear() - 1);
|
||||
return now;
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "明年",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setFullYear(now.getFullYear() + 1);
|
||||
return now;
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 年月
|
||||
laydate.render({
|
||||
elem: "#ID-laydate-shortcut-month",
|
||||
type: "month",
|
||||
shortcuts: [
|
||||
{
|
||||
text: "上个月",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setMonth(now.getMonth() - 1);
|
||||
return now;
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "下个月",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setMonth(now.getMonth() + 1);
|
||||
return now;
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "去年12月",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setMonth(11);
|
||||
now.setFullYear(now.getFullYear() - 1);
|
||||
return now;
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 时间
|
||||
laydate.render({
|
||||
elem: "#ID-laydate-shortcut-time",
|
||||
type: "time",
|
||||
shortcuts: function(){ // 生成 30 分钟间隔的时间列表
|
||||
var value = [];
|
||||
var now = new Date();
|
||||
now.setHours(0, 0, 0, 0);
|
||||
for (var i = 0; i < 48; i++) {
|
||||
var nowTemp = now.setMinutes(now.getMinutes() + (i ? 30 : 0));
|
||||
var nowTimeStr = util.toDateString(nowTemp, "HH:mm:ss");
|
||||
value.push({
|
||||
text: nowTimeStr,
|
||||
value: nowTimeStr
|
||||
});
|
||||
}
|
||||
return value;
|
||||
}()
|
||||
});
|
||||
|
||||
// 日期时间
|
||||
laydate.render({
|
||||
elem: "#ID-laydate-shortcut-datetime",
|
||||
type: "datetime",
|
||||
shortcuts: [
|
||||
{
|
||||
text: "昨天",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setDate(now.getDate() - 1);
|
||||
return now;
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "今天",
|
||||
value: function(){
|
||||
return Date.now();
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "明天",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setDate(now.getDate() + 1);
|
||||
return now;
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "上个月",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
// now.setDate(now.getDate() - 1);
|
||||
now.setMonth(now.getMonth() - 1);
|
||||
return [now];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "上个月的前一天",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setMonth(now.getMonth() - 1);
|
||||
now.setDate(now.getDate() - 1);
|
||||
return [now];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "某一天",
|
||||
value: "2016-10-14 00:00:00"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
// 日期时间全面板
|
||||
laydate.render({
|
||||
elem: "#ID-laydate-shortcut-datetime-fullPanel",
|
||||
type: "datetime",
|
||||
fullPanel: true,
|
||||
shortcuts: [
|
||||
{
|
||||
text: "昨天",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setDate(now.getDate() - 1);
|
||||
return now;
|
||||
}
|
||||
},
|
||||
{ text: "今天", value: Date.now() },
|
||||
{
|
||||
text: "明天",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setDate(now.getDate() + 1);
|
||||
return now;
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "上个月",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
// now.setDate(now.getDate() - 1);
|
||||
now.setMonth(now.getMonth() - 1);
|
||||
return [now];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "上个月的前一天",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setMonth(now.getMonth() - 1);
|
||||
now.setDate(now.getDate() - 1);
|
||||
return [now];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "某一天",
|
||||
value: "2016-10-14 11:32:32"
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
// 日期范围
|
||||
laydate.render({
|
||||
elem: "#ID-laydate-shortcut-range-date",
|
||||
range: true,
|
||||
shortcuts: [
|
||||
{
|
||||
text: "上个月",
|
||||
value: function(){
|
||||
var value = [];
|
||||
|
||||
var date1 = new Date();
|
||||
date1.setMonth(date1.getMonth() - 1);
|
||||
date1.setDate(1);
|
||||
date1.setHours(0, 0, 0, 0);
|
||||
value.push(date1);
|
||||
|
||||
var date2 = new Date();
|
||||
date2.setDate(1);
|
||||
date2.setHours(0, 0, 0, 0);
|
||||
date2 = date2.getTime() - 1;
|
||||
value.push(new Date(date2));
|
||||
|
||||
return value;
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "这个月",
|
||||
value: function(){
|
||||
var value = [];
|
||||
|
||||
var date1 = new Date();
|
||||
// date1.setMonth(date1.getMonth() - 1);
|
||||
date1.setDate(1);
|
||||
date1.setHours(0, 0, 0, 0);
|
||||
value.push(date1);
|
||||
|
||||
var date2 = new Date();
|
||||
date2.setMonth(date2.getMonth() + 1);
|
||||
date2.setDate(1);
|
||||
date2.setHours(0, 0, 0, 0);
|
||||
date2 = date2.getTime() - 1;
|
||||
value.push(new Date(date2));
|
||||
|
||||
return value;
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "下个月",
|
||||
value: function(){
|
||||
var value = [];
|
||||
|
||||
var date1 = new Date();
|
||||
date1.setMonth(date1.getMonth() + 1);
|
||||
date1.setDate(1);
|
||||
date1.setHours(0, 0, 0, 0);
|
||||
value.push(date1);
|
||||
|
||||
var date2 = new Date();
|
||||
date2.setMonth(date2.getMonth() + 2);
|
||||
date2.setDate(1);
|
||||
date2.setHours(0, 0, 0, 0);
|
||||
date2 = date2.getTime() - 1;
|
||||
value.push(new Date(date2));
|
||||
|
||||
return value;
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
// 年份范围
|
||||
laydate.render({
|
||||
elem: "#ID-laydate-shortcut-range-year",
|
||||
type: "year",
|
||||
range: true,
|
||||
shortcuts: [
|
||||
{
|
||||
text: "过去一年",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setFullYear(now.getFullYear() - 1);
|
||||
return [now, new Date()];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "未来一年",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setFullYear(now.getFullYear() + 1);
|
||||
return [new Date(), now];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "近三年",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setFullYear(now.getFullYear() - 3);
|
||||
return [now, new Date()];
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 年月范围
|
||||
laydate.render({
|
||||
elem: "#ID-laydate-shortcut-range-month",
|
||||
type: "month",
|
||||
range: true,
|
||||
shortcuts: [
|
||||
{
|
||||
text: "去年",
|
||||
value: function(){
|
||||
var date1 = new Date();
|
||||
date1.setFullYear(date1.getFullYear() - 1, 0, 1);
|
||||
date1.setHours(0, 0, 0, 0);
|
||||
var date2 = new Date();
|
||||
date2.setMonth(0, 1);
|
||||
date2.setHours(0, 0, 0, 0);
|
||||
return [date1, date2.getTime() - 1];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "明年",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setFullYear(now.getFullYear() + 1);
|
||||
return [now, now];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "近三年",
|
||||
value: function(){
|
||||
var now = new Date();
|
||||
now.setFullYear(now.getFullYear() - 3);
|
||||
return [now, new Date()];
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 时间范围
|
||||
laydate.render({
|
||||
elem: "#ID-laydate-shortcut-range-time",
|
||||
type: "time",
|
||||
range: true,
|
||||
shortcuts: [
|
||||
{
|
||||
text: '09:30 <p style="text-align: center;">到</p> 11:30',
|
||||
value: (function () {
|
||||
var date1 = new Date();
|
||||
date1.setHours(9, 0, 0, 0);
|
||||
|
||||
var date2 = new Date();
|
||||
date2.setHours(11, 30, 0, 0);
|
||||
|
||||
return [date1, date2];
|
||||
})
|
||||
},
|
||||
{
|
||||
text: '13:00 <p style="text-align: center;">到</p> 15:00',
|
||||
value: (function () {
|
||||
var date1 = new Date();
|
||||
date1.setHours(13, 0, 0, 0);
|
||||
|
||||
var date2 = new Date();
|
||||
date2.setHours(15, 0, 0, 0);
|
||||
|
||||
return [date1, date2];
|
||||
})
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 日期时间范围
|
||||
laydate.render({
|
||||
elem: "#ID-laydate-shortcut-range-datetime",
|
||||
type: "datetime",
|
||||
range: true,
|
||||
shortcuts: [
|
||||
{
|
||||
text: "上个月",
|
||||
value: function(){
|
||||
var value = [];
|
||||
|
||||
var date1 = new Date();
|
||||
date1.setMonth(date1.getMonth() - 1);
|
||||
date1.setDate(1);
|
||||
date1.setHours(0, 0, 0, 0);
|
||||
value.push(date1);
|
||||
|
||||
var date2 = new Date();
|
||||
date2.setDate(1);
|
||||
date2.setHours(0, 0, 0, 0);
|
||||
date2 = date2.getTime() - 1;
|
||||
value.push(new Date(date2));
|
||||
|
||||
return value;
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "这个月",
|
||||
value: function(){
|
||||
var value = [];
|
||||
|
||||
var date1 = new Date();
|
||||
// date1.setMonth(date1.getMonth() - 1);
|
||||
date1.setDate(1);
|
||||
date1.setHours(0, 0, 0, 0);
|
||||
value.push(date1);
|
||||
|
||||
var date2 = new Date();
|
||||
date2.setMonth(date2.getMonth() + 1);
|
||||
date2.setDate(1);
|
||||
date2.setHours(0, 0, 0, 0);
|
||||
date2 = date2.getTime() - 1;
|
||||
value.push(new Date(date2));
|
||||
|
||||
return value;
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "下个月",
|
||||
value: function(){
|
||||
var value = [];
|
||||
|
||||
var date1 = new Date();
|
||||
date1.setMonth(date1.getMonth() + 1);
|
||||
date1.setDate(1);
|
||||
date1.setHours(0, 0, 0, 0);
|
||||
value.push(date1);
|
||||
|
||||
var date2 = new Date();
|
||||
date2.setMonth(date2.getMonth() + 2);
|
||||
date2.setDate(1);
|
||||
date2.setHours(0, 0, 0, 0);
|
||||
date2 = date2.getTime() - 1;
|
||||
value.push(new Date(date2));
|
||||
|
||||
return value;
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
34
public/frontend/layui-main/docs/laydate/examples/static.md
Executable file
34
public/frontend/layui-main/docs/laydate/examples/static.md
Executable file
@@ -0,0 +1,34 @@
|
||||
<div class="ws-demo-static">
|
||||
<div class="layui-inline" id="ID-laydate-static-1"></div>
|
||||
<div class="layui-inline" id="ID-laydate-static-2"></div>
|
||||
<div class="layui-inline" id="ID-laydate-static-3"></div>
|
||||
<div class="layui-inline" id="ID-laydate-static-4"></div>
|
||||
</div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laydate = layui.laydate;
|
||||
|
||||
// 直接嵌套显示
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-static-1',
|
||||
position: 'static'
|
||||
});
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-static-2',
|
||||
position: 'static',
|
||||
lang: 'en'
|
||||
});
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-static-3',
|
||||
type: 'month',
|
||||
position: 'static'
|
||||
});
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-static-4',
|
||||
type: 'time',
|
||||
position: 'static'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
73
public/frontend/layui-main/docs/laydate/examples/theme.md
Executable file
73
public/frontend/layui-main/docs/laydate/examples/theme.md
Executable file
@@ -0,0 +1,73 @@
|
||||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">墨绿主题</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-theme-molv" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">自定义颜色主题</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-theme-color" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">格子主题</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-theme-grid" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
<!--<div class="layui-inline">
|
||||
<label class="layui-form-label">圆圈高亮主题</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-theme-circle" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>-->
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">混合主题</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-theme-multi" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laydate = layui.laydate;
|
||||
|
||||
// 墨绿主题
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-theme-molv',
|
||||
theme: 'molv'
|
||||
});
|
||||
|
||||
// 自定义颜色
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-theme-color',
|
||||
theme: '#FF5722'
|
||||
});
|
||||
|
||||
// 格子主题
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-theme-grid',
|
||||
theme: 'grid'
|
||||
});
|
||||
|
||||
// 圆圈高亮主题
|
||||
/*
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-theme-circle',
|
||||
theme: 'circle' // 2.8+新增主题
|
||||
});
|
||||
*/
|
||||
|
||||
// 混合主题
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-theme-multi',
|
||||
theme: ['molv', 'grid'] // 2.8+ 新增功能
|
||||
});
|
||||
});
|
||||
</script>
|
||||
78
public/frontend/layui-main/docs/laydate/examples/type.md
Executable file
78
public/frontend/layui-main/docs/laydate/examples/type.md
Executable file
@@ -0,0 +1,78 @@
|
||||
<div class="layui-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">年选择器</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-type-year" placeholder="yyyy">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">年月选择器</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-type-month" placeholder="yyyy-MM">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">时间选择器</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-type-time" placeholder="HH:mm:ss">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期时间选择器</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-type-datetime" placeholder="yyyy-MM-dd HH:mm:ss">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<h5 style="margin-bottom: 16px;">
|
||||
同时显示日期和时间选择器（全面板） <sup>2.8+</sup> :
|
||||
</h5>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期时间选择器</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-type-datetime-1" placeholder="yyyy-MM-dd HH:mm:ss">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laydate = layui.laydate;
|
||||
|
||||
// 年选择器
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-type-year',
|
||||
type: 'year'
|
||||
});
|
||||
|
||||
// 年月选择器
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-type-month',
|
||||
type: 'month'
|
||||
});
|
||||
|
||||
// 时间选择器
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-type-time',
|
||||
type: 'time'
|
||||
});
|
||||
|
||||
// 日期时间选择器
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-type-datetime',
|
||||
type: 'datetime'
|
||||
});
|
||||
|
||||
// 日期时间选择器 - 日期和时间选择器同时显示（全面板）
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-type-datetime-1',
|
||||
type: 'datetime',
|
||||
fullPanel: true // 2.8+
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user