美文网首页
日期下拉列表的选择

日期下拉列表的选择

作者: 稻草人_9ac7 | 来源:发表于2019-10-18 13:18 被阅读0次
<template>
  <div>
    <div class="block">
    <span class="demonstration">默认</span>
    <el-date-picker
      v-model="value1"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
  </div>

   <button @click="getDate">确认日期</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // pickerOptions: {
        //   disabledDate(time) {
        //     return time.getTime() > Date.now();
        //   },
        //   shortcuts: [{
        //     text: '今天',
        //     onClick(picker) {
        //       picker.$emit('pick', new Date());
        //     }
        //   }, {
        //     text: '昨天',
        //     onClick(picker) {
        //       const date = new Date();
        //       date.setTime(date.getTime() - 3600 * 1000 * 24);
        //       picker.$emit('pick', date);
        //     }
        //   }, {
        //     text: '一周前',
        //     onClick(picker) {
        //       const date = new Date();
        //       date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
        //       picker.$emit('pick', date);
        //     }
        //   }]
        // },
        value1: '',
     
      };
    },
   
    methods: {
      //时间戳的方法
      formTime(tiem){
          let date =new Date(tiem)
          
          let day = date.getDate()
          let month = date.getMonth()+1
          let year = date.getFullYear()
        return  `${year}年${month}月${day}日`
      },

      getDate(){
        console.log("value1",this.value1)
        this.formTime(this.value1)
        console.log( this.formTime(this.value1))
      }
    },
  };
</script>

相关文章

网友评论

      本文标题:日期下拉列表的选择

      本文链接:https://www.haomeiwen.com/subject/ctwlmctx.html