init
This commit is contained in:
97
public/frontend/layui-main/docs/laydate/detail/demo.md
Executable file
97
public/frontend/layui-main/docs/laydate/detail/demo.md
Executable file
@@ -0,0 +1,97 @@
|
||||
<h3 lay-toc="{level: 2, id: 'examples'}" class="layui-hide">常规用法</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', text: {preview: '常规用法'}, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("/laydate/examples/normal.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-type" lay-toc="{level: 2, hot: true}">多类型选择器</h3>
|
||||
|
||||
默认为日期选择器，即上文「常规用法」示例中的效果。以下主要呈现其他类型选择器：
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("/laydate/examples/type.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-range" lay-toc="{level: 2, hot: true}">范围选择</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("/laydate/examples/range.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-shortcut" lay-toc="{level: 2, hot: true}">配置快捷选项 <sup>2.8+</sup></h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("/laydate/examples/shortcut.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h3 id="demo-format" lay-toc="{level: 2}">自定义格式</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("/laydate/examples/format.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h3 id="demo-mark" lay-toc="{level: 2}">节日及标注</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("/laydate/examples/mark.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h3 id="demo-limit" lay-toc="{level: 2, hot: true}">限制可选日期</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("/laydate/examples/limit.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h3 id="demo-elem" lay-toc="{level: 2}">批量绑定元素</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("/laydate/examples/elem.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h3 id="demo-more" lay-toc="{level: 2, hot: true}">更多功能示例</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full'], done: function(obj){
|
||||
obj.render();
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include("/laydate/examples/more.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h3 id="demo-theme" lay-toc="{level: 2, hot: true}">自定义主题</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("/laydate/examples/theme.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-static" lay-toc="{level: 2}">直接静态显示</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
{{- d.include("/laydate/examples/static.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
707
public/frontend/layui-main/docs/laydate/detail/options.md
Executable file
707
public/frontend/layui-main/docs/laydate/detail/options.md
Executable file
@@ -0,0 +1,707 @@
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col>
|
||||
<col width="100">
|
||||
<col width="100">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>属性名</th>
|
||||
<th>描述</th>
|
||||
<th>类型</th>
|
||||
<th>默认值</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>elem</td>
|
||||
<td>
|
||||
|
||||
绑定元素选择器或 DOM 对象
|
||||
|
||||
</td>
|
||||
<td>string/DOM</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[type](#options.type)
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div id="options.type" lay-pid="options" class="ws-anchor">
|
||||
组件面板选择类型。支持以下可选值：
|
||||
</div>
|
||||
|
||||
- `year` 年选择器，只提供年列表选择
|
||||
- `month` 年月选择器，只提供年、月选择
|
||||
- `date` 日期选择器（默认），可选择：年、月、日选择
|
||||
- `time` 时间选择器，只提供时、分、秒选择
|
||||
- `datetime` 日期时间选择器，可选择：年月日、时分秒
|
||||
|
||||
效果详见： [#示例](#demo-type)
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`date`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>id</td>
|
||||
<td>
|
||||
|
||||
设定实例唯一索引，以便用于其他方法对例进行相关操作。若该属性未设置，则默认从 `elem` 属性绑定的元素中的 `id` 属性值中获取。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[range](#options.range)
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div id="options.range" lay-pid="options" class="ws-anchor">
|
||||
|
||||
开启左右面板的范围选择，将会根据 `type` 类型呈现对应的范围选择面板。该属性值支持以下类型：
|
||||
|
||||
</div>
|
||||
|
||||
- 若为 `boolean` 类型，即表示是否开启范围选择，若设为 `true`，则开始日期与结束日期默认采用 `-` 连接符
|
||||
- 若为 `string` 类型，则表示开启范围选择，且自定义开始日期与结束日期的连接符。如： `range: '~'`
|
||||
- 若为 `array` 类型，即表示开启范围选，且开始日期和结束日期分别赋值在两个目标选择器中，如：
|
||||
|
||||
```
|
||||
range: ['#start', '#end']
|
||||
```
|
||||
|
||||
详细用法可参考： [#示例](#demo-range)
|
||||
|
||||
|
||||
</td>
|
||||
<td>boolean<br>string<br>array</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>rangeLinked <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
是否开启日期范围选择时的区间联动标注模式，该模式必须开启 `range` 属性才能生效。日期范围默认采用的是*左右面板独立选择模式*，设置该属性后，将采用*左右面板联动选择模式*。
|
||||
<br>效果详见： [#示例](#demo-range)
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>fullPanel <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
是否开启全面板，即日期和时间显示在同一面板。 当 `type: 'datetime'` 且未设置 `range` 属性时生效。
|
||||
<br>效果详见： [#示例](#demo-type)
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[format](#options.format)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.format" lay-pid="options" class="ws-anchor">
|
||||
|
||||
自定义日期和时间值的返回格式,默认值： `yyyy-MM-dd`。 其格式符规则如下：
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
| 格式符 | 描述 |
|
||||
| --- | --- |
|
||||
| yyyy | 年份，输出四个字符。若不足四位，则前置补零 |
|
||||
| y | 年份，允许一位 |
|
||||
| MM | 月份，输出两个字符。若不足两位，则前置补零 |
|
||||
| M | 月份，允许一位 |
|
||||
| dd | 日期，输出两个字符。若不足两位，则前置补零 |
|
||||
| d | 日期，允许一位 |
|
||||
| HH | 小时，输出两个字符。若不足两位，则前面补零 |
|
||||
| H | 小时，允许一位 |
|
||||
| mm | 分钟，输出两个字符。若不足两位，则前面补零 |
|
||||
| m | 分钟，允许一位 |
|
||||
| ss | 秒数，输出两个字符。若不足两位，则前面补零 |
|
||||
| s | 秒数，允许一位 |
|
||||
|
||||
通过上述格式符组成日期时间字符串，如下所示：
|
||||
|
||||
```
|
||||
// 返回值示例： 2008-08-08 20:08:08
|
||||
format: 'yyyy-MM-dd HH:mm:ss'
|
||||
|
||||
// 返回值示例： 北京时间 6 点 30 分
|
||||
format: '北京时间 H 点 m 分'
|
||||
```
|
||||
|
||||
相关用法可参考： [#示例](#demo-format)
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[value](#options.value)
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div id="options.value" lay-pid="options" class="ws-anchor">
|
||||
初始值。值支持以下类型：
|
||||
</div>
|
||||
|
||||
- 若为 `string` 类型，则必须和 `format` 属性格式对应
|
||||
|
||||
```
|
||||
value: '2018-08-18'
|
||||
```
|
||||
|
||||
- 若为 `date` 对象类型，则可直接赋值 `new Date()`
|
||||
|
||||
```
|
||||
value: new Date(1534766888000) // 参数即为：2018-08-20 20:08:08 的毫秒数
|
||||
```
|
||||
|
||||
- 当开启 `range` 时，初始设置日期范围值
|
||||
|
||||
```
|
||||
// 开始日期 - 结束日期
|
||||
value: '1900-01-01 - 2100-01-01'
|
||||
```
|
||||
|
||||
</td>
|
||||
<td>string<br>date</td>
|
||||
<td>
|
||||
|
||||
`new Date()`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>isInitValue</td>
|
||||
<td>
|
||||
|
||||
是否将初始值填充在目标元素中，一般配合 `value` 属性使用
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[shortcuts](#options.shortcuts) <sup>2.8+</sup>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div id="options.shortcuts" lay-pid="options" class="ws-anchor">
|
||||
用于开启面板左侧的快捷选择栏。其值配置规则如下：
|
||||
</div>
|
||||
|
||||
```
|
||||
shortcuts: [
|
||||
{
|
||||
text: "快捷选项文本",
|
||||
value: '快捷选项值'
|
||||
},
|
||||
// 更多选项 …
|
||||
]
|
||||
```
|
||||
|
||||
其中 `value` 支持以下类型：
|
||||
|
||||
- 若为 `string` 类型，必须和 `format` 设置的格式对应；
|
||||
- 若为 `date` 对象类型，则可通过操作 `new Date()` 来对选项值进行相应的返回计算；
|
||||
- 若为 `array` 类型，则数组成员可填写开始日期和结束日期。
|
||||
- 若为 `function` 类型，返回值同上。<sup>2.8.16+</sup>
|
||||
|
||||
详细用法可参考： [#示例](#demo-shortcut)
|
||||
|
||||
</td>
|
||||
<td>string<br>date<br>array<br>function</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>weekStart <sup>2.7+</sup></td>
|
||||
<td>
|
||||
|
||||
设置起始周。 支持 0-6 的数字，`0` 即代表从周日开始。
|
||||
|
||||
```
|
||||
weekStart: 1 // 设置周一为起始周
|
||||
```
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`0`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>isPreview</td>
|
||||
<td>
|
||||
|
||||
用于是否在面板左下角显示当前结果的预览。当 `type:datetime` 时强制为 `false`。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[min / max](#options.minmax)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.min" lay-pid="options" class="ws-anchor">
|
||||
|
||||
限制可供选择的最小或最大日期时间值。默认值：
|
||||
|
||||
- `min: '1900-1-1'`
|
||||
- `max: '2099-12-31'`
|
||||
|
||||
</div>
|
||||
|
||||
属性值支持以下可选类型：
|
||||
|
||||
- 若值为字符类型，则：年月日必须用 `-` 连接，且时分秒必须用 `:` 连接。 此处无需遵循 `format` 设定的格式；
|
||||
- 若值为整数类型，且数字 ＜ 86400000，则数字代表天数，如： `min: -7` 即代表最小日期在 7 天前，正数代表若干天后；
|
||||
- 若值为整数类型，且数字 ≥ 86400000，则数字代表毫秒数，如：`max: 4073558400000` 即代表最大日期在公元 3000年1月1日。
|
||||
|
||||
示例：
|
||||
|
||||
```
|
||||
min: '2017-1-1 00:00:00' // 最小日期时间值
|
||||
min: -7 // 最小日期为 7 天前
|
||||
max: 7 // 最大日期为 7 天后
|
||||
```
|
||||
|
||||
相关效果可参考： [#示例](#demo-limit)
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>trigger</td>
|
||||
<td>
|
||||
|
||||
自定义弹出组件面板的事件
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`click`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>show</td>
|
||||
<td>
|
||||
|
||||
是否在渲染时默认显示组件面板。组件在执行渲染时，默认需通过触发目标元素的事件，方可显示组件面板，而该属性可跳过目标元素的事件，直接显示组件面板。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>position</td>
|
||||
<td>
|
||||
|
||||
设置组件面板的定位方式。支持以下可选值：
|
||||
|
||||
- `absolute` 绝对定位，始终吸附在绑定元素周围。
|
||||
- `fixed` 固定定位，初始吸附在绑定元素周围，不随浏览器滚动条所左右。一般用于在固定定位的弹层中使用。
|
||||
- `static` 静态定位，控件将直接嵌套显示在指定容器中。用法详见：[#示例](#demo-static)
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`absolute`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>zIndex</td>
|
||||
<td>
|
||||
|
||||
设置组件面板的层叠顺序。一般用于解决与其它元素的互相被遮掩的问题。若 `position: 'static'` 时，则该属性无效。
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`99999999`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[shade](#options.shade) <sup>2.8+</sup></td>
|
||||
|
||||
<td>
|
||||
|
||||
<div id="options.shade" lay-pid="options" class="ws-anchor">
|
||||
用于开启弹出日期面板时的遮罩。值支持以下可选类型：
|
||||
</div>
|
||||
|
||||
- 若为 `number` 类型，则表示遮罩透明度。如：
|
||||
|
||||
```
|
||||
shade: 0.5
|
||||
```
|
||||
|
||||
- 若为 `array` 类型，则可设置遮罩颜色和透明度，如：
|
||||
|
||||
```
|
||||
shade: [0.5, '#000'] // 遮罩的透明度和背景色
|
||||
```
|
||||
|
||||
效果详见： [#示例](#demo-more)
|
||||
|
||||
</td>
|
||||
<td>number<br>array</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>showBottom</td>
|
||||
<td>
|
||||
|
||||
是否显示组件面板的底部栏
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>btns</td>
|
||||
<td>
|
||||
|
||||
自定义排版组件面板底部栏中的按钮，按钮将按照数组顺序排列。内置按钮名称：`clear,now,confirm` 。
|
||||
|
||||
```
|
||||
// 显示清空、确认按钮
|
||||
btns: ['clear', 'confirm']
|
||||
```
|
||||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>autoConfirm <sup>2.8+</sup></td>
|
||||
<td>
|
||||
|
||||
是否在选中目标值时即自动确认。
|
||||
<br>当开启 `range` 属性时，该属性无效。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>lang</td>
|
||||
<td>
|
||||
|
||||
设置组件的语言版本。可选值如下：
|
||||
|
||||
- `cn` 中文版
|
||||
- `en` 英文版
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`cn`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[theme](#options.theme)
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div id="options.theme" lay-pid="options" class="ws-anchor">
|
||||
|
||||
设置组件面板主题。除了默认主题，还内置主题： `molv` `grid` `circle`<sup>2.8+</sup> ，且支持直接传入自定义的主题色。
|
||||
|
||||
</div>
|
||||
|
||||
```
|
||||
theme: '#FF5722'
|
||||
```
|
||||
|
||||
注 <sup>2.8+</sup> : 多个主题可用数组格式，如：
|
||||
|
||||
```
|
||||
theme: ['grid', '#FF5722']
|
||||
```
|
||||
|
||||
若第 1 个成员为 hex 格式的主色值，则第 2 个成员为辅色值
|
||||
|
||||
```
|
||||
// 主色、辅色 --- 2.8.4 新增
|
||||
theme: ['#16baaa', '#16b777']
|
||||
```
|
||||
|
||||
效果及用法详见： [#示例](#demo-theme)
|
||||
|
||||
</td>
|
||||
<td>string<br>array</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>calendar</td>
|
||||
<td>
|
||||
|
||||
是否显示我国常见的公历节日。当 `lang: 'en'` 时无效。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[mark](#options.mark)
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div id="options.mark" lay-pid="options" class="ws-anchor">
|
||||
|
||||
自定义日期标记。该属性是对 `calendar` 属性的进一步延伸，灵活度更高。属性可批量设置多个日期标记，如：
|
||||
|
||||
</div>
|
||||
|
||||
```
|
||||
mark: {
|
||||
'0-10-14': '生日', //每年每月的某一天
|
||||
'0-0-10': '工资', // 每月 10 号
|
||||
'2008-8-8': '开幕', // 指定的日期
|
||||
}
|
||||
```
|
||||
|
||||
前缀 `0-` 即代表每年，`0-0-` 即代表每年每月。
|
||||
|
||||
效果详见： [#示例](#demo-mark)
|
||||
|
||||
|
||||
</td>
|
||||
<td>object</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[holidays](#options.holidays) <sup>2.7+</sup>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div id="options.holidays" class="ws-anchor">
|
||||
用于标注节假日及补班日。值是一个二维数组，如：
|
||||
</div>
|
||||
|
||||
```
|
||||
holidays: [
|
||||
// 2023 年的节假日
|
||||
['2023-1-1','2023-1-2','2023-1-3'],
|
||||
// 2023 年的补班日
|
||||
['2023-1-28','2023-1-29']
|
||||
]
|
||||
```
|
||||
|
||||
相关日期值可详细参考国家每年公布的法定节假日安排
|
||||
|
||||
效果详见： [#示例](#demo-mark)
|
||||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" style="text-align: center">
|
||||
|
||||
|
||||
<div id="options.callback" lay-pid="options" class="ws-anchor">
|
||||
|
||||
[回调函数](#options.callback)
|
||||
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[ready](#options.ready)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.ready" lay-pid="options" class="ws-anchor">
|
||||
组件面板初始打开的回调函数。返回的参数如下：
|
||||
</div>
|
||||
|
||||
```
|
||||
ready: function(date){
|
||||
/* 得到初始的日期时间对象，date 参数格式如下：
|
||||
{
|
||||
year: 2017, // 年
|
||||
month: 8, // 月
|
||||
date: 18, // 日
|
||||
hours: 0, // 时
|
||||
minutes: 0, // 分
|
||||
seconds: 0 // 秒
|
||||
}
|
||||
*/
|
||||
console.log(date);
|
||||
}
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[change](#options.change)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.change" lay-pid="options" class="ws-anchor">
|
||||
日期时间被切换后的回调函数。返回的参数如下：
|
||||
</div>
|
||||
|
||||
```
|
||||
change: function(value, date, endDate){
|
||||
console.log(value); // 日期字符，如： 2017-08-18
|
||||
console.log(date); // 包含年月日时分秒各项值的对象
|
||||
console.log(endDate); // 结束日期时间对象，当设置 range 时才会返回。对象成员同上。
|
||||
}
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[done](#options.done)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.done" lay-pid="options" class="ws-anchor">
|
||||
日期时间选择完毕的回调函数，点击清空、现在、确定也均会触发。返回的参数如下：
|
||||
</div>
|
||||
|
||||
```
|
||||
done: function(value, date, endDate){
|
||||
console.log(value); // 日期字符，如： 2017-08-18
|
||||
console.log(date); // 包含年月日时分秒各项值的对象
|
||||
console.log(endDate); // 结束日期时间对象，当设置 range 时才会返回。对象成员同上。
|
||||
}
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onConfirm <sup>2.8+</sup></td>
|
||||
<td colspan="3">
|
||||
|
||||
点击底部栏「确定」按钮时的回调函数。返回的参数同 `done`。
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onNow <sup>2.8+</sup></td>
|
||||
<td colspan="3">
|
||||
|
||||
点击底部栏「现在」按钮时的回调函数。返回的参数同 `done`。
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onClear <sup>2.8+</sup></td>
|
||||
<td colspan="3">
|
||||
|
||||
点击底部栏「清空」按钮时的回调函数。返回的参数同 `done`。
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>close <sup>2.7+</sup></td>
|
||||
<td colspan="3">
|
||||
|
||||
组件面板被关闭（移除）后的回调函数。无返回参数。
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
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>
|
||||
185
public/frontend/layui-main/docs/laydate/index.md
Executable file
185
public/frontend/layui-main/docs/laydate/index.md
Executable file
@@ -0,0 +1,185 @@
|
||||
---
|
||||
title: 日期与时间选择器 laydate
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 日期与时间选择器
|
||||
|
||||
> 日期与时间选择器 `laydate` 提供了年、月、日、时、分、秒的多类型选择面板，也是 Layui 的常用组件之一。
|
||||
|
||||
<h2 id="examples" lay-toc="{hot: true, anchor: null}" style="margin-bottom: 0;">示例</h2>
|
||||
|
||||
<style>
|
||||
.ws-demo-laydate .layui-form-label{width: 100px;}
|
||||
.ws-demo-laydate .layui-form-item{margin-bottom: 0;}
|
||||
.ws-demo-laydate .layui-form-item .layui-inline{margin-bottom: 11px;}
|
||||
.ws-demo-laydate .layui-input-block{margin-left: 130px;}
|
||||
.ws-demo-static .layui-inline{margin: 0 16px 16px 0;}
|
||||
@media screen and (max-width: 450px){
|
||||
.layui-form-item .layui-input-inline{margin-left: 130px;}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="ws-demo-laydate">
|
||||
{{- d.include("/laydate/detail/demo.md") }}
|
||||
</div>
|
||||
|
||||
<p></p>
|
||||
|
||||
<h2 id="api" lay-toc="{hot: true, bold: true}">API</h2>
|
||||
|
||||
| API | 描述 |
|
||||
| --- | --- |
|
||||
| var laydate = layui.laydate | 获得 `laydate` 模块。 |
|
||||
| [laydate.render(options)](#render) | laydate 组件渲染，核心方法。 |
|
||||
| [laydate.hint(id, opts)](#hint) <sup>2.8+</sup> | 在对应的 laydate 组件面板上弹出提示层。 |
|
||||
| [laydate.getInst(id)](#getInst) <sup>2.8+</sup> | 获取组件对应的渲染实例。 |
|
||||
| [laydate.unbind(id)](#unbind) <sup>2.8+</sup> | 对目标元素解除当前实例的绑定。 |
|
||||
| [laydate.close(id)](#close) <sup>2.7+</sup> | 关闭日期面板。 |
|
||||
| [laydate.getEndDate(month, year)](#getEndDate) | 获取某月的最后一天。 |
|
||||
|
||||
<h3 id="render" lay-toc="{level: 2}">渲染</h3>
|
||||
|
||||
`laydate.render(options);`
|
||||
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
|
||||
<br>注 <sup>2.8+</sup> : 除 `elem` 属性外，其他基础属性也可以直接写在元素的 `lay-options="{}"` 属性中。
|
||||
|
||||
```
|
||||
<input type="text" id="ID-test-laydate">
|
||||
<input type="text" class="class-test-laydate" lay-options="{value: '2016-10-14'}">
|
||||
<input type="text" class="class-test-laydate" lay-options="{value: '2017-08-21'}">
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laydate = layui.laydate;
|
||||
// 单个渲染
|
||||
laydate.render({
|
||||
elem: '#ID-test-laydate'
|
||||
});
|
||||
// 批量渲染
|
||||
laydate.render({
|
||||
elem: '.class-test-laydate'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
<h3 id="options" lay-toc="{level: 2, hot: true}">属性</h3>
|
||||
|
||||
<div>
|
||||
{{- d.include("/laydate/detail/options.md") }}
|
||||
</div>
|
||||
|
||||
<h3 id="hint" lay-pid="api" class="ws-anchor ws-bold">弹出提示 <sup>2.8+</sup></h3>
|
||||
|
||||
`laydate.hint(id, opts);`
|
||||
|
||||
- 参数 `id` : 组件渲染时定义的 `id` 属性值
|
||||
- 参数 `opts` : 该方法支持的属性可选项，详见下表
|
||||
|
||||
| opts | 描述 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| content | 提示内容 | string | - |
|
||||
| ms | 提示层自动消失所需的毫秒数 | number | 3000 |
|
||||
|
||||
该方法用于在指定的日期面板弹出一个提示层。
|
||||
|
||||
```
|
||||
var laydate = layui.laydate;
|
||||
// 渲染
|
||||
laydate.render({
|
||||
elem: '', // 绑定元素选择器
|
||||
id: 'test', // 自定义 id
|
||||
// 其他属性 …
|
||||
});
|
||||
// 弹出提示
|
||||
laydate.hint('test', {
|
||||
content: '提示内容'
|
||||
});
|
||||
```
|
||||
|
||||
<h3 id="getInst" lay-pid="api" class="ws-anchor ws-bold">获取实例 <sup>2.8+</sup></h3>
|
||||
|
||||
`laydate.getInst(id);`
|
||||
|
||||
- 参数 `id` : 组件渲染时定义的 `id` 属性值
|
||||
|
||||
该方法用于获取 laydate 对应 id 的渲染实例，以获得该实例对应的成员属性。
|
||||
|
||||
```
|
||||
var laydate = layui.laydate;
|
||||
// 渲染
|
||||
laydate.render({
|
||||
elem: '', // 绑定元素选择器
|
||||
id: 'test', // 自定义 id
|
||||
// 其他属性 …
|
||||
});
|
||||
// 获取对应的实例
|
||||
var inst = laydate.getInst('test');
|
||||
console.log(inst); // 实例对象
|
||||
```
|
||||
|
||||
|
||||
<h3 id="unbind" lay-pid="api" class="ws-anchor ws-bold">解除实例绑定 <sup>2.8+</sup></h3>
|
||||
|
||||
`laydate.unbind(id);`
|
||||
|
||||
- 参数 `id` : 组件渲染时定义的 `id` 属性值
|
||||
|
||||
该方法用于对目标元素对应的实例的绑定完全解除，即触发元素事件时，不再执行组件渲染。
|
||||
|
||||
```
|
||||
var laydate = layui.laydate;
|
||||
// 渲染
|
||||
laydate.render({
|
||||
elem: '', // 绑定元素选择器
|
||||
id: 'test', // 自定义 id
|
||||
// 其他属性 …
|
||||
});
|
||||
// 解除对应的实例绑定
|
||||
laydate.unbind('test');
|
||||
```
|
||||
|
||||
|
||||
<h3 id="close" lay-pid="api" class="ws-anchor ws-bold">关闭日期面板 <sup>2.7+</sup></h3>
|
||||
|
||||
`laydate.close(id);`
|
||||
|
||||
- 参数 `id` : 组件渲染时定义的 `id` 属性值。 若 `id` 参数不填，则关闭当前打开的日期面板
|
||||
|
||||
该方法用于关闭对应的日期面板
|
||||
|
||||
```
|
||||
var laydate = layui.laydate;
|
||||
// 渲染
|
||||
laydate.render({
|
||||
elem: '', // 绑定元素选择器
|
||||
id: 'test', // 自定义 id
|
||||
// 其他属性 …
|
||||
});
|
||||
// 关闭对应的日期面板
|
||||
laydate.close('test');
|
||||
```
|
||||
|
||||
<h3 id="getEndDate" lay-pid="api" class="ws-anchor ws-bold">获取某月的最后一天</h3>
|
||||
|
||||
`laydate.getEndDate(month, year);`
|
||||
|
||||
- 参数 `month` : 月份，默认为当前月。
|
||||
- 参数 `year` : 年份，默认为今年。
|
||||
|
||||
该方法用于获取某个月份的最后一天
|
||||
|
||||
```
|
||||
var days1 = laydate.getEndDate(10); // 获得 10 月的最后一天为 31 号
|
||||
var days2 = laydate.getEndDate(2, 2080); // 获得 2080 年 2 月的最后一天为 29 号
|
||||
```
|
||||
|
||||
## 贴士
|
||||
|
||||
> laydate 曾经可作为单独组件使用，鉴于维护成本的考量，目前 laydate 组件已完全集成到 Layui 中，而单独版本已不做同步维护。
|
||||
因此，建议直接使用 layui 中 laydate 即可。
|
||||
|
||||
|
||||
Reference in New Issue
Block a user