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

日期下拉列表的选择

作者: 稻草人_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