# 日期组件

# 概述

日期组件在项目研发中是一个会被高频使用的控件,如出生日期日期条件筛选等等,日期格式也多种多样,例如年-月-日年-月-日 时:分:秒跨区选择,写法比较复杂,比如避免的写很多CSS、JS代码来达到我们的功能需求,为了简化控件的引入复杂性,同时也为了代码的可维护性和高效性,我们封装了日期组件,在组件中我们只需要传入不同的参数变得获得不同的效果,省去了写JS等一些重复性的工作。

# 年月日选择

  • 组件:{date:select param="birthday|出生日期|date" value="$info.format_birthday|default=''"}

  • 参数:name:birthday|出生日期|datetime

`birthday`:组件名称,此字段对应实体对象中的字段名称`birthday`;
`出生日期`:这个文字会在初始化组件是控件的默认提示语,会动态解析为`请选择出生日期`
`date`:格式的格式定义`date`标识选择的日期格式为`年-月-日`,其他日期格式如`datetime`;
`value`:这个参数是绑定到日期组件上的值;
1
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">
            {date:select param="birthday|出生日期|date" value="$info.format_birthday|default=''"}
        </div>
    </div>
</form>
1
2
3
4
5
6
7
8
  • 效果展示:

    mixureSecure

# 年月日时分秒

  • 组件:{date:select param="birthday|出生日期|datetime" value="$info.format_birthday|default=''"}

  • 参数:name:birthday|出生日期|datetime

`birthday`:组件名称,此字段对应实体对象中的字段名称`birthday`;
`出生日期`:这个文字会在初始化组件是控件的默认提示语,会动态解析为`请选择出生日期`
`datetime`:格式的格式定义`datetime`标识选择的日期格式为`年-月-日 时:分:秒`;
`value`:这个参数是绑定到日期组件上的值;
1
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">
            {date:select param="birthday|出生日期|datetime" value="$info.format_birthday|default=''"}
        </div>
    </div>
</form>
1
2
3
4
5
6
7
8
  • 效果展示:

    mixureSecure

# 时间区间选择

  • 组件:{date:select param="birthday|出生日期|datetime|7,7|~" value="$info.format_birthday|default=''"}

  • 参数:name:birthday|出生日期|datetime|7,7|~

`birthday`:组件名称,此字段对应实体对象中的字段名称`birthday`;
`出生日期`:这个文字会在初始化组件是控件的默认提示语,会动态解析为`请选择出生日期`
`datetime`:格式的格式定义`datetime`标识选择的日期格式为`年-月-日`;
`7,7`:标识日期格式的区间,以当前时间为基准往前延伸7天,往后延伸7天;
`~`:表示日期区间的分隔符,如:`2020-07-01~2020-07-15`;

1
2
3
4
5
6
  • 参数value:这个参数是绑定到日期组件上的值;

  • 组件使用

那么我们如何在表单中使用下拉选择的组件呢,如下:

<form class="layui-form model-form" action="">
    <div class="layui-inline">
        <label class="layui-form-label">出生日期:</label>
        <div class="layui-input-inline">
            {date:select param="birthday|出生日期|datetime|7,7|~" value="$info.format_birthday|default=''"}
        </div>
    </div>
</form>
1
2
3
4
5
6
7
8
  • 效果展示:

    mixureSecure