# 日期组件
# 概述
日期组件在项目研发中是一个会被高频使用的控件,如出生日期
、日期条件筛选
等等,日期格式也多种多样,例如年-月-日
、年-月-日 时:分:秒
、跨区选择
,写法比较复杂,比如避免的写很多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
- 效果展示: