DateSelect 日期选择

用于日期和日期范围选择

基本使用

选择单个日期

<com-date-select v-model="date"></com-date-select>

<script>
    data() {
        return {
            date: "",
        }
    },
</script>

选择日期范围

<com-date-select mode="date-range" 
    :start.sync="dateRange.start" 
    :end.sync="dateRange.end"></com-date-select>

<script>
    data() {
        return {
           dateRange: {
                start: "",
                end: "",
            }
        }
    },
</script>

API

Props

属性名	说明	类型	必填	默认值
value	日期值，通过v-model绑定	String / Array	false	-
mode	日期模式 date 单个日期 date-range 日期范围 datetime 日期+时间	String	false	date
placeholder	日期为空时占位符	String	false	请选择
start	开始时间，通过.sync双向绑定	String	false
end	结束时间，通过.sync双向绑定	String	false	-
startPlaceholder	开始日期描述文字	String	false	开始日期
endPlaceholder	结束日期描述文字	String	false	结束日期
showQuickOptions	显示快捷选项	Boolean	false	true
clearable	是否可清除	Boolean	false	true
disabled	是否禁用	Boolean	false	-
readonly	是否只读	Boolean	false	-
seperater	日期范围分隔符	String	false	至

Events

事件	说明	回调参数
confirm	点击确定按钮触发	日期或者日期范围
cancel	点击取消按钮触发	-
clear	点击清空按钮触发	-