# 日期组件
# 概述
日期组件在项目研发中是一个会被高频使用的控件，如出生日期、日期条件筛选等等，日期格式也多种多样，例如年-月-日、年-月-日 时:分:秒、跨区选择，写法比较复杂，比如避免的写很多CSS、JS代码来达到我们的功能需求，为了简化控件的引入复杂性，同时也为了代码的可维护性和高效性，我们封装了日期组件，在组件中我们只需要传入不同的参数变得获得不同的效果，省去了写JS等一些重复性的工作。
# 年月日选择
组件：
<widget:dateSelect name="birthday|出生日期|date" th:value="${info['birthday']}"/>参数：name：
birthday|date|请选择出生日期
`birthday`：组件名称，此字段对应实体对象中的字段名称`birthday`；
`date`：格式的格式定义`date`标识选择的日期格式为`年-月-日`；
`出生日期`：这个文字会在初始化组件是控件的默认提示语，会动态解析为`请选择出生日期`
`th:value`：这个参数是绑定到日期组件上的值；
1
2
3
4
2
3
4
- 组件使用
那么我们如何在表单中使用下拉选择的组件呢，如下：
<form class="layui-form model-form" action="">
<div class="layui-inline">
<label class="layui-form-label">出生日期：</label>
<div class="layui-input-inline">
<widget:dateSelect name="birthday|出生日期|date" th:value="${info['birthday']}"/>
</div>
</div>
</form>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- 效果展示：
# 年月日时分秒
组件：
<widget:dateSelect name="birthday|出生日期|datetime" th:value="${info['birthday']}"/>参数：name：
birthday|date|请选择出生日期
`birthday`：组件名称，此字段对应实体对象中的字段名称`birthday`；
`datetime`：格式的格式定义`date`标识选择的日期格式为`年-月-日`；
`出生日期`：这个文字会在初始化组件是控件的默认提示语，会动态解析为`请选择出生日期`
`th:value`：这个参数是绑定到日期组件上的值；
1
2
3
4
2
3
4
- 组件使用
那么我们如何在表单中使用下拉选择的组件呢，如下：
<form class="layui-form model-form" action="">
<div class="layui-inline">
<label class="layui-form-label">出生日期：</label>
<div class="layui-input-inline">
<widget:dateSelect name="birthday|出生日期|datetime" th:value="${info['birthday']}"/>
</div>
</div>
</form>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- 效果展示：
# 时间区间选择
组件：
<widget:dateSelect name="birthday|出生日期|datetime|-7,7|~" th:value="${info['birthday']}"/>参数：name：
birthday|date|请选择出生日期
`birthday`：组件名称，此字段对应实体对象中的字段名称`birthday`；
`datetime`：格式的格式定义`date`标识选择的日期格式为`年-月-日`；
`出生日期`：这个文字会在初始化组件是控件的默认提示语，会动态解析为`请选择出生日期`
`-7,7`:表示时间区间可选范围为当前时间的前7天至当前时间后7天
`~`:表示选择时间区间的连接符
`th:value`：这个参数是绑定到日期组件上的值；
1
2
3
4
5
6
2
3
4
5
6
- 组件使用
那么我们如何在表单中使用下拉选择的组件呢，如下：
<form class="layui-form model-form" action="">
<div class="layui-inline">
<label class="layui-form-label">出生日期：</label>
<div class="layui-input-inline">
<widget:dateSelect name="birthday|出生日期|datetime|-7,7|~" th:value="${info['birthday']}"/>
</div>
</div>
</form>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- 效果展示：
