:::demo 示例

```html
<template>
    <div>
        <v-f9-date-picker @datePickerConfirm="datePickerConfirm()">

            <v-f9-groupbox v-model="groupboxValue" label="变动日期" group-name="变动日期">
                <v-radio-group v-model="radio1">
                    <v-radio :label="3">近三年</v-radio>
                    <v-radio :label="6">近五年</v-radio>
                    <v-radio :label="9">全部</v-radio>
                </v-radio-group>
            </v-f9-groupbox>

            <v-f9-groupbox v-model="groupboxValue" label="报告期" group-name="报&ensp;告&ensp;期">
                <v-f9-date-input v-model="startDate" label="开始日期" placeholder="选择时间"></v-f9-date-input>
                <v-f9-date-input v-model="endDate"  label="结束日期" placeholder="选择时间"></v-f9-date-input>
            </v-f9-groupbox>

            <v-f9-groupbox disabled label="上市前后" group-name="上市前后">
                <v-checkbox-group v-model="checkList">
                    <v-checkbox label="上市前"></v-checkbox>
                    <v-checkbox label="上市后"></v-checkbox>
                </v-checkbox-group>
            </v-f9-groupbox>

        </v-f9-date-picker>


    </div>
</template>
<script>
    export default{
        name:'F9DatePicker',
        data () {
            return {
                radio1: 3,
                checkList:['上市后'],
                groupboxValue:'',
                startDate:'2015',
                endDate:'2017'
            };
        },

        methods:{
            datePickerConfirm(){
                alert('点击回调')
            }
        }
    }
</script>
```
:::