# 日期选择

TIP

日期选择器请使用在 input

# API

Eadmin.datepicker

参数 说明 类型 默认值
dom 需要应用日期选择的input,例如:'#p1', '.p1'等等 string -
param 参数列表 object -

# param参数内容

参数 说明 类型 默认值
confirm 是否需要确认按钮栏 boolean -
format 日期格式化,如果日期格式化中有H、i、s,则支持选择时分秒 string 'Y-m-d'
start 允许的开始日期,只允许数字格式,例如:20200310 number -
end 允许的结束日期,只允许数字格式,例如:20200310 number -
type 日历类型,date 单日历,date-range 双日历 string date
quick 如果是 date-range,则是否需要开启快捷选择 boolean false
change 日期改变回调 function -

# 默认日期选择器

<input id="p1" type="text" placeholder="选择日期" data-icon="fa-calendar|right">
<script>
    (() => {
        Eadmin.datepicker('#p1');
    })();
</script>
1
2
3
4
5
6

# 带按钮栏

<input id="p1" type="text" placeholder="选择日期" data-icon="fa-calendar|right">
<script>
    (() => {
        Eadmin.datepicker('#p1', {
            confirm : true
        });
    })();
</script>
1
2
3
4
5
6
7
8

# 可选择时分秒

<input id="p1" type="text" placeholder="选择日期" data-icon="fa-calendar|right">
<script>
    (() => {
        Eadmin.datepicker('#p1', {
            confirm : true,
            format  : 'Y-m-d H:i:s'
        });
    })();
</script>
1
2
3
4
5
6
7
8
9

# 可选择时分

<input id="p1" type="text" placeholder="选择日期" data-icon="fa-calendar|right">
<script>
    (() => {
        Eadmin.datepicker('#p1', {
            confirm : true,
            format  : 'Y-m-d H:i'
        });
    })();
</script>
1
2
3
4
5
6
7
8
9

# 自定义时间格式

<input id="p1" type="text" placeholder="选择日期" data-icon="fa-calendar|right">
<script>
    (() => {
        Eadmin.datepicker('#p1', {
            format  : 'Y/m/d'
        });
    })();
</script>
1
2
3
4
5
6
7
8

# 指定开始日期

<input id="p1" type="text" placeholder="选择日期" data-icon="fa-calendar|right">
<script>
    (() => {
        Eadmin.datepicker('#p1', {
            start : 20191218
        });
    })();
</script>
1
2
3
4
5
6
7
8

# 指定结束日期

<input id="p1" type="text" placeholder="选择日期" data-icon="fa-calendar|right">
<script>
    (() => {
        Eadmin.datepicker('#p1', {
            end : 20191228
        });
    })();
</script>
1
2
3
4
5
6
7
8

# 指定开始和结束日期

<input id="p1" type="text" placeholder="选择日期" data-icon="fa-calendar|right">
<script>
    (() => {
        Eadmin.datepicker('#p1', {
            start : 20200301,
            end   : 20200331
        });
    })();
</script>
1
2
3
4
5
6
7
8
9

# 选择日期范围

<input id="p1" type="text" placeholder="选择日期" data-icon="fa-calendar|right">
<script>
    (() => {
        Eadmin.datepicker('#p1', {
            type : 'date-range'
        });
    })();
</script>
1
2
3
4
5
6
7
8

# 选择日期范围带按钮栏

<input id="p1" type="text" placeholder="选择日期" data-icon="fa-calendar|right">
<script>
    (() => {
        Eadmin.datepicker('#p1', {
            type : 'date-range',
            confirm : true
        });
    })();
</script>
1
2
3
4
5
6
7
8
9

# 选择日期范围带时分秒

<input id="p1" type="text" placeholder="选择日期" data-icon="fa-calendar|right">
<script>
    (() => {
        Eadmin.datepicker('#p1', {
            type    : 'date-range',
            confirm : true,
            format  : 'Y-m-d H:i:s'
        });
    })();
</script>
1
2
3
4
5
6
7
8
9
10

# 选择范围并指定开始结束日期

<input id="p1" type="text" placeholder="选择日期" data-icon="fa-calendar|right">
<script>
    (() => {
        Eadmin.datepicker('#p1', {
            type  : 'date-range',
            start : 20191218,
            end   : 20191231,
        });
    })();
</script>
1
2
3
4
5
6
7
8
9
10

# 双日历带快捷选择

<input id="p1" type="text" placeholder="选择日期" data-icon="fa-calendar|right">
<script>
    (() => {
        Eadmin.datepicker('#p1', {
            type    : 'date-range',
            quick   : true
        });
    })();
</script>
1
2
3
4
5
6
7
8
9

# 带回调方法

<input id="p1" type="text" placeholder="选择日期" data-icon="fa-calendar|right">
<script>
    (() => {
        Eadmin.datepicker('#p1', {
            change : (date) => {
                Eadmin.message.info({
                    content : '选择的日期是:' + date
                });
            }
        });
    })();
</script>
1
2
3
4
5
6
7
8
9
10
11
12