Ant Design Vue  中 DatePicker 日期選擇框 使用

01) 單頁面中使用_demo:  新建 test.vue,內容如下

<template>
    <div>
        <a-date-picker @change="onChange" :default-value="defaultTime?moment(defaultTime, 'YYYY-MM-DD'):undefined"/>
        <br />
        <a-date-picker @change="onChange" :default-value="undefined"/>
        <br />
        <a-date-picker @change="onChange" />
        <br />
        <a-month-picker placeholder="Select month" @change="onChange" />
        <br />
        <a-range-picker @change="onChange" />
        <br />
        <a-week-picker placeholder="Select week" @change="onChange" />
    </div>

</template>

<script>
    import Vue from "vue";
    import { DatePicker } from 'ant-design-vue';
    import 'ant-design-vue/dist/antd.css';
    //設置中文
    import moment from 'moment';
    import 'moment/locale/zh-cn'
    moment.locale('zh-cn');
    Vue.use(DatePicker);


    export default {
        data(){
            return {
                moment, // 日歷
                defaultTime: "2020-01-01"
            }
        },
        methods: {
            onChange(date, dateString) {
                console.log(date, dateString);
            },
        },
    }
</script>

 

 

 

 02) 日期選擇框,開始時間不大於結束時間,結束時間不能選擇開始之前的時間

<template>
    <div>
        <div>
            <div>
                <span >開始時間：</span>
                <a-date-picker
                        style="width:174px"
                        :disabledDate="disabledStartDate"
                        :allowClear="false"
                        showTime
                        :format="dateFormat"
                        :value="(startTime == ''||startTime == null)?undefined:moment(startTime,dateFormat)"
                        placeholder="請選擇"
                        @change="(startTime, dateString) => onChangeStart(startTime, dateString)"
                />
           
                <span>結束時間：</span>
                <a-date-picker
                        style="width:174px"
                        :disabledDate="disabledEndDate"
                        :allowClear="false"
                        showTime
                        :format="dateFormat"
                        placeholder="請選擇"
                        :value="(endTime == ''||endTime == null)?undefined:moment(endTime,dateFormat)"
                        @change="(endTime, dateString) => onChangeEnd(endTime, dateString)"
                />
            </div>
            
        </div>
    </div>
</template>

<script>
    import Vue from "vue";
    import { DatePicker } from 'ant-design-vue';
    import 'ant-design-vue/dist/antd.css';
    //設置中文
    import moment from 'moment';
    import 'moment/locale/zh-cn'
    moment.locale('zh-cn');
    Vue.use(DatePicker);


    export default {
        data(){
            return {
                startTime:'',
                endTime:'',
                dateFormat: "YYYY-MM-DD HH:mm:ss",
            }
        },
        methods: {
            moment,

            // 開始時間change
            onChangeStart(date, dateString) {
                this.startTime = dateString;
            },
            // 結束時間change
            onChangeEnd(date, dateString) {
                this.endTime = dateString;
            },
            disabledStartDate(startValue) {
                const endValue = this.endTime;
                if (!startValue || !endValue) {
                    return false;
                }
                return startValue.valueOf() > (moment(endValue).valueOf());
            },
            disabledEndDate(endValue) {
                const startValue = this.startTime;
                if (!endValue || !startValue) {
                    return false;
                }
                return (moment(startValue).valueOf()) >= endValue.valueOf();
            },
        },
    }
</script>

 

 03)  v-decorator 和 moment 處理時間

moment(this.form.getFieldsValue().web_decorator_startDate).format("YYYY-MM-DD"); // 轉為時間格式

<template>
    <div>
        <a-form :form="form" >
            <a-form-item label="開始日期">
                <a-date-picker placeholder="年/月/日" v-decorator="web_decorator_startDate"  @change="changeDate" />
            </a-form-item>
            <button @click="handleSubmit">查看時間</button>
        </a-form>
    </div>
</template>
<script>
    import moment from 'moment';  // 引入 moment 處理世界
    
    /* 這是ant-design-vue */
    import Vue from 'vue'
    import Antd, { message,Select } from 'ant-design-vue'  //這是ant-design-vue
    import 'ant-design-vue/dist/antd.css'
    Vue.use(Antd);
    /* 這是ant-design-vue */


    export default {
        components:{},
        data() {
            return {
                form: this.$form.createForm(this,"data_form"),
                web_decorator_startDate: ['web_decorator_startDate', {rules: [{required: false, message: '請輸入計划開始時間'}]}],
            }
        },
        methods: {
            changeDate(date, dateString) {
                console.log(date, dateString);
            },
            handleSubmit() {
                let fieldsValue = this.form.getFieldsValue();
                console.log(moment(fieldsValue.web_decorator_startDate).format("YYYY-MM-DD"));
            }
        },
        watch: {

        },
    };
</script>

<style scoped>

</style>

03-2)  v-decorator 和 moment 處理時間段

<template>
  <div>
    <a-form :form="form" >
      <a-form-item label="日期">
        <a-range-picker v-decorator="decorator_date"></a-range-picker>
      </a-form-item>
      <button @click="saveSubmit">賦值</button>
      <button @click="handleSubmit">查看時間</button>
    </a-form>
  </div>
</template>
<script>
  import moment from 'moment';  // 引入 moment 處理世界

  /* 這是ant-design-vue */
  import Vue from 'vue'
  import Antd, { message,Select } from 'ant-design-vue'  //這是ant-design-vue
  import 'ant-design-vue/dist/antd.css'
  Vue.use(Antd);
  /* 這是ant-design-vue */


  export default {
    components:{},
    data() {
      return {
        form: this.$form.createForm(this,"data_form"),
        decorator_date: ['decorator_date', { rules: [{ type: 'array', required: true, message: '選擇時間' }]}],
      }
    },
    methods: {
      changeDate(date, dateString) {
        console.log(date, dateString);
      },
      saveSubmit() {
        this.form.setFieldsValue({
          // decorator_date: [moment('2008-06-17'),moment('2008-06-18')], // 賦值指定時間
          decorator_date: [moment(),moment().add(1, 'day')], // // 賦值當前時間
        });
      },
      handleSubmit() {
        let fieldsValue = this.form.getFieldsValue();
        console.log(fieldsValue);
        console.log(fieldsValue.decorator_date[0].format("YYYY-MM-DD"));
        console.log(fieldsValue.decorator_date[1].format("YYYY-MM-DD"));
      }
    },
    watch: {

    },
  };
</script>

<style scoped>

</style>

 

 

04) moment 使用

this.$moment().format('YYYY-MM-DD HH:mm:ss');  // 當前時間 2008-06-17 22:22:22
this.$moment(new Date("2008-06-17 22:22:22")).format('YYYY-MM-DD HH:mm:ss'); // 2008-06-17 22:22:22
this.$moment("2008-06-17 20:20:20").format('YYYY-MM-DD HH:mm:ss'); // 2008-06-17 20:20:20
this.$moment("2008-06-17 20:20:20").add(1, 'day').format('YYYY-MM-DD HH:mm:ss');  // 加一天時間
this.$moment("2008-06-17 20:20:20").add(1, 'hours').format("YYYY-MM-DD HH:mm:ss"); // 加一小時


this.$moment("2008-06-17 20:20:20").unix();  // 時間戳(單位秒)
this.$moment("2008-06-17 20:20:20").valueOf(); // 時間戳(毫秒)

 

 

 

官方地址: 

DatePicker 日期選擇框

Moment.js 文檔