# datepicker日期选择器

# 初始化

单独引用时：从入口的js文件引入

import { DatePicker } from '@xiaoe/sense'
import '@xiaoe/sense/static/index.css'
Vue.use(DatePicker)

1
2
3

# 1.日期选择

<ss-date-picker
    v-model="value"
    type="date">
</ss-date-picker>
<script>
export default {
    date() {
        return {
            value:''
        }
    }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 2.禁用日期

<ss-date-picker
    v-model='value'
    type='date'
    :picker-options="pickerOptions"
>
</ss-date-picker>
<script>
date() {
    return {
        value:'',
        pickerOptions: {
            disabledDate(time) {
                return time.getTime() > Date.now();
            }
        }
    }   
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 2.选择多个日期

<ss-date-picekr
    v-model="value"
    type="dates">
</ss-datepicekr>
<script>
date() {
    return {
        value:''
    }
}
</script>

1
2
3
4
5
6
7
8
9
10
11

# 3.日期选择范围

<ss-date-picker
    v-model="value"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期">
</ss-date-picker>
<script>
export default {
    date() {
        return {
            value:''
        }
    }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 4.日期+时间选择

<ss-date-picker
    v-model="value"
    type="datetime"
    placeholder="选择日期时间">
</ss-date-picker>
<script>
export default {
    date() {
        return {
            value:''
        }
    }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 5.日期+时间范围选择

<ss-date-picker
    v-model="value"
    type="datetimerange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期">
</ss-date-picker>
<script>
export default {
    data() {
        return {
            value:''
        }
    }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

参数	说明	类型	默认值	可选值
value	绑定值	date	—	—
format	日期格式	string	—	yyyy-MM-dd
value-format	日期格式	string	—	`timestamp(时间戳)`,`yyyy-MM-dd`
picker-options	参考选项的列表	Object	{}	—
start-placeholder	开始日期的占位内容	string	—	—
end-placeholder	结束日期的占位内容	string	—	—
type	显示类型	string	date	`date`,`dates`,`month`,`year`, `datetime`,`datetimerange`,`daterange`
range-separator	选择范围时的分隔符	string	—	'-'

# pickerOption

参数	说明	类型	默认值	可选值
disabledDate	禁用日期,参数为当前日期，返回boolean值	function	—	—

← rate 评分 timepicker 日期选择器 →