Element-UI el-time-picker

element-ui pull request 11398

by abernov

HTML

<script src="https://rawgit.com/eu81273/jsfiddle-console/master/console.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<!--
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
-->
<script src="https://rawgit.com/abernov/element/tree-dist/lib/index.js"></script>

<div id="app">
  format
  <el-select v-model="format" placeholder="Select">
    <el-option
      v-for="item in formats"
      :key="item"
      :label="item"
      :value="item">
    </el-option>
  </el-select>
  <el-checkbox v-model="usePickerOptions">Use picker options</el-checkbox>
  <hr>
  arrow-control
  <el-time-picker
     :format="format"
     :arrow-control="true"
     :picker-options="usePickerOptions ? Options : null"
     v-model="value1"
     >
  </el-time-picker>
  <el-time-picker
    :format="format"
    :arrow-control="true"
    is-range
    v-model="value4"
    :picker-options="usePickerOptions ? OptionsForRange : null"
    range-separator="To"
    start-placeholder="Start time"
    end-placeholder="End time">
  </el-time-picker>
  <hr>
  list
  <el-time-picker
     :format="format"
     v-model="value1"
     >
  </el-time-picker>
  <el-time-picker
    :format="format"
    is-range
    v-model="value4"
    range-separator="To"
    start-placeholder="Start time"
    end-placeholder="End time">
  </el-time-picker>
</div>

SCSS

@import url("https://rawgit.com/abernov/element/tree-dist/lib/theme-chalk/index.css");

Babel + JSX

var Main = {
 data() {
   return {
     value1: new Date(2016, 9, 10, 1, 2, 3, 700),
     value2: new Date(2016, 9, 10, 1, 2, 3, 700),
     value3: new Date(2016, 9, 10, 1, 1, 1, 700),
     value4: [new Date(2016, 9, 10, 1, 1, 1, 700), new Date(2016, 9, 10, 2, 5, 0, 750)],
     value5: [new Date(2016, 9, 10, 1, 1, 1, 700), new Date(2016, 9, 10, 2, 5, 0, 750)],
     value6: [new Date(2016, 9, 10, 1, 1, 1, 700), new Date(2016, 9, 10, 2, 5, 0, 750)],
     formats: [
       'HH:mm:ss',
       'H:m:s',
       'H:mm:ss.S',
       'H:mm:ss.SS',
       'H:mm:ss.SSS',
       'HH:mm',
       'hhA:mm',
       'hh a:mm',
       'ha:mm',
       'mm:ss',
       'HH : mm : ss',
       'mm:ss.SS',
       'HH',
       'shortTime'
     ],
     format: 'HH:mm:ss',
     OptionsForRange: {
       selectableRange: ['00:30:01.10 - 05:30:00.10'],
       steps: '00:00:00.04'
     },
     Options: {
       steps: '00:00:00.04'
     },     
     usePickerOptions: false
   };
 },
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')