欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Element DateTimePicker日期時(shí)間選擇器的使用示例

 更新時(shí)間:2020年07月27日 15:59:32   作者:ForeverJPB.  
這篇文章主要介紹了Element DateTimePicker日期時(shí)間選擇器的使用示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

組件—日期時(shí)間選擇器

日期和時(shí)間點(diǎn)

<template>
 <div class="block">
  <span class="demonstration">默認(rèn)</span>
  <el-date-picker
   v-model="value1"
   type="datetime"
   placeholder="選擇日期時(shí)間">
  </el-date-picker>
 </div>
 <div class="block">
  <span class="demonstration">帶快捷選項(xiàng)</span>
  <el-date-picker
   v-model="value2"
   type="datetime"
   placeholder="選擇日期時(shí)間"
   align="right"
   :picker-options="pickerOptions">
  </el-date-picker>
 </div>
 <div class="block">
  <span class="demonstration">設(shè)置默認(rèn)時(shí)間</span>
  <el-date-picker
   v-model="value3"
   type="datetime"
   placeholder="選擇日期時(shí)間"
   default-time="12:00:00">
  </el-date-picker>
 </div>
</template>

<script>
 export default {
  data() {
   return {
    pickerOptions: {
     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: '',
    value2: '',
    value3: ''
   };
  }
 };
</script>

日期和時(shí)間范圍

<template>
 <div class="block">
  <span class="demonstration">默認(rèn)</span>
  <el-date-picker
   v-model="value1"
   type="datetimerange"
   range-separator="至"
   start-placeholder="開始日期"
   end-placeholder="結(jié)束日期">
  </el-date-picker>
 </div>
 <div class="block">
  <span class="demonstration">帶快捷選項(xiàng)</span>
  <el-date-picker
   v-model="value2"
   type="datetimerange"
   :picker-options="pickerOptions"
   range-separator="至"
   start-placeholder="開始日期"
   end-placeholder="結(jié)束日期"
   align="right">
  </el-date-picker>
 </div>
</template>

<script>
 export default {
  data() {
   return {
    pickerOptions: {
     shortcuts: [{
      text: '最近一周',
      onClick(picker) {
       const end = new Date();
       const start = new Date();
       start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
       picker.$emit('pick', [start, end]);
      }
     }, {
      text: '最近一個(gè)月',
      onClick(picker) {
       const end = new Date();
       const start = new Date();
       start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
       picker.$emit('pick', [start, end]);
      }
     }, {
      text: '最近三個(gè)月',
      onClick(picker) {
       const end = new Date();
       const start = new Date();
       start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
       picker.$emit('pick', [start, end]);
      }
     }]
    },
    value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
    value2: ''
   };
  }
 };
</script>

默認(rèn)的起始與結(jié)束時(shí)刻

<template>
 <div class="block">
  <span class="demonstration">起始日期時(shí)刻為 12:00:00</span>
  <el-date-picker
   v-model="value1"
   type="datetimerange"
   start-placeholder="開始日期"
   end-placeholder="結(jié)束日期"
   :default-time="['12:00:00']">
  </el-date-picker>
 </div>
 <div class="block">
  <span class="demonstration">起始日期時(shí)刻為 12:00:00,結(jié)束日期時(shí)刻為 08:00:00</span>
  <el-date-picker
   v-model="value2"
   type="datetimerange"
   align="right"
   start-placeholder="開始日期"
   end-placeholder="結(jié)束日期"
   :default-time="['12:00:00', '08:00:00']">
  </el-date-picker>
 </div>
</template>

<script>
 export default {
  data() {
   return {
    value1: '',
    value2: ''
   };
  }
 };
</script>

Attributes



Picker Options

Shortcuts

Events

Methods

Slots

使用element UI的日期選擇器時(shí),默認(rèn)顯示當(dāng)天日期

需求:輸入框中要把當(dāng)天日期顯示在輸入框中,并且傳給后臺(tái)的日期格式是2019-06-12。(如交易數(shù)據(jù))

傳給后臺(tái)的時(shí)間格式為'2019-06-12'這樣的格式,,這個(gè)很好實(shí)現(xiàn),el-date-picker上添加value-format="yyyy-MM-dd"即可;
本來(lái)以為element UI中default-value設(shè)置之后,可以直接在輸入框中顯示,測(cè)試之后無(wú)用。最后通過(guò)下面的方法實(shí)現(xiàn)效果

<el-form-item label="交易數(shù)據(jù)">
      <el-date-picker
       type="date"
       placeholder="選擇日期"
       v-model="searchFormField.date"
       style="width: 100%;"
       value-format="yyyy-MM-dd"
      ></el-date-picker>
</el-form-item>
    
   
 methods: {
  getNowTime() {
    var now = new Date();
    var year = now.getFullYear(); //得到年份
    var month = now.getMonth(); //得到月份
    var date = now.getDate(); //得到日期
    month = month + 1;
    month = month.toString().padStart(2, "0");
    date = date.toString().padStart(2, "0");
    var defaultDate = `${year}-${month}-${date}`;
    this.$set(this.searchFormField, "date", defaultDate);
  },
 }

到此這篇關(guān)于Element DateTimePicker日期時(shí)間選擇器的使用示例的文章就介紹到這了,更多相關(guān)Element DateTimePicker日期時(shí)間選擇器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論