:::demo 示例

```html
<template>
    
    <div>
        <h3>日期范围</h3>
        <h4>年月日:(YYYY-MM-DD)</h4>

        <div>

            <h5>单个日期组件的范围设定</h5>

            <v-f9-date-input 
                v-model="single.date" 
                :max-date="single.maxDate" 
                :min-date="single.minDate" 
                :em_date_mode="0" 
                placeholder="请选择日期">
            </v-f9-date-input>

        </div>
        
        <div>

            <h5>多个日期组件的范围设定</h5>

            <v-f9-date-input
                :label="multiple.startDate.label" 
                v-model="multiple.startDate.date" 
                :max-date="multiple.endDate.date" 
                :min-date="multiple.startDate.minDate" 
                :em_date_mode="0" 
                placeholder="请选择日期">
            </v-f9-date-input>

            <v-f9-date-input
                :label="multiple.endDate.label" 
                v-model="multiple.endDate.date" 
                :max-date="multiple.endDate.maxDate" 
                :min-date="multiple.startDate.date" 
                :em_date_mode="0" 
                placeholder="请选择日期">
            </v-f9-date-input>

        </div>

        <h4>年月日:(YYYY-MM-DD HH:mm:ss)</h4>
        
        <div>

            <h5>单个日期组件的范围设定</h5>
            <v-f9-date-input 
                v-model="single.date1" 
                :max-date="single.maxDate1" 
                :min-date="single.minDate1" 
                :em_date_mode="5" 
                placeholder="请选择日期">
            </v-f9-date-input>

        </div>

        <div>

            <h5>多个日期组件的范围设定</h5>
            <v-f9-date-input 
                v-model="multiple.startDate.date1"
                :label="multiple.startDate.label"  
                :max-date="multiple.endDate.date1" 
                :min-date="multiple.startDate.minDate1" 
                :em_date_mode="5" 
                placeholder="请选择日期">
            </v-f9-date-input>
            <v-f9-date-input 
                :label="multiple.endDate.label" 
                v-model="multiple.endDate.date1" 
                :max-date="multiple.endDate.maxDate1" 
                :min-date="multiple.startDate.date1" 
                :em_date_mode="5" 
                placeholder="请选择日期">
            </v-f9-date-input>

        </div>

        <h4>时分秒:(HH:mm:ss)</h4>

        <div>

            <h5>单个日期组件的范围设定</h5>
            <v-f9-date-input 
                v-model="single.date2" 
                :max-date="single.maxDate2" 
                :min-date="single.minDate2" 
                :em_date_mode="8" 
                placeholder="请选择日期">
            </v-f9-date-input>

        </div>

        <div>

            <h5>多个日期组件的范围设定</h5>
            <v-f9-date-input 
                v-model="multiple.startDate.date2" 
                :max-date="multiple.endDate.date2" 
                :min-date="multiple.startDate.minDate2" 
                :em_date_mode="8" 
                placeholder="请选择日期">
            </v-f9-date-input>
            <v-f9-date-input 
                v-model="multiple.endDate.date2" 
                :max-date="multiple.endDate.maxDate2" 
                :min-date="multiple.startDate.date2" 
                :em_date_mode="8" 
                placeholder="请选择日期">
            </v-f9-date-input>

        </div>

    </div>

</template>

<script>

export default {
    name:'dateRange',
    data(){
        return {
            single:{
                date:'2018-06-01',
                maxDate:'2020-12-30',
                minDate:'2016-01-01',
                date1:'2018-06-01 08:00:00',
                maxDate1:'2020-12-30 21:30:30',
                minDate1:'2016-01-01 8:30:30',
                date2:'10:00:00',
                maxDate2:'21:30:30',
                minDate2:'08:30:30',
            },
            multiple:{
                startDate:{
                    label:'开始日期:',
                    date:'2018-06-01',
                    minDate:'2010-01-01',
                    label1:'开始日期:',
                    date1:'2016-06-01 00:00:00',
                    minDate1:'2010-01-01 00:00:00',
                    label2:'开始日期:',
                    date2:'08:00:00',
                    minDate2:'8:05:30'
                },
                endDate:{
                    label:'结束日期:',
                    date:'2018-06-01',
                    maxDate:'2020-12-30',
                    label1:'结束日期:',
                    date1:'2018-06-01 00:00:00',
                    maxDate1:'2020-01-01 00:00:00',
                    label2:'结束日期:',
                    date2:'18:05:05',
                    maxDate2:'22:50:38'
                }
            }
        }
    },
    methods:{
        
    }
}

</script>

```
:::