TimePicker 时间选择框

<template>
  <div>
    <a-time-picker use12Hours @change="onChange" />
    <a-time-picker use12Hours format="h:mm:ss A" @change="onChange" />
    <a-time-picker use12Hours format="h:mm a" @change="onChange" />
  </div>
</template>
<script>
export default {
  methods: {
    onChange(time, timeString){
      console.log(time, timeString);
    }
  },
}
</script>

<template>
  <div>
    <a-time-picker @openChange="handleOpenChange" :open="open">
      <a-button slot="addon" slot-scope="panel" size="small" type="primary" @click="handleClose">Ok {{panel.prefixCls}}</a-button>
    </a-time-picker>
    <a-time-picker :open.sync="open2">
      <a-button slot="addon" size="small" type="primary" @click="handleClose">Ok</a-button>
    </a-time-picker>
  </div>
</template>
<script>
import moment from 'moment';
export default {
  data() {
    return {
      open: false,
      open2: false,
    }
  },
  methods: {
    handleOpenChange(open){
      console.log('open', open);
      this.open = open
    },
    handleClose(){
      this.open = false
      this.open2 = false
    },
  },
}
</script>

<template>
  <a-time-picker @change="onChange" :defaultOpenValue="moment('00:00:00', 'HH:mm:ss')" />
</template>
<script>
import moment from 'moment';
export default {
  methods: {
    moment,
    onChange(time, timeString){
      console.log(time, timeString);
    }
  },
}
</script>

<template>
  <a-time-picker :defaultValue="moment('12:08:23', 'HH:mm:ss')" disabled />
</template>
<script>
import moment from 'moment';
export default {
  methods: {
    moment,
  }
}
</script>

<template>
  <a-time-picker :defaultValue="moment('12:08', 'HH:mm')" format="HH:mm" />
</template>
<script>
import moment from 'moment';
export default {
  methods: {
    moment,
  },
}
</script>

<template>
  <a-time-picker :minuteStep="15" :secondStep="10" />
</template>

<template>
  <div>
    <a-time-picker :defaultValue="moment('12:08:23', 'HH:mm:ss')" size="large" />
    <a-time-picker :defaultValue="moment('12:08:23', 'HH:mm:ss')" />
    <a-time-picker :defaultValue="moment('12:08:23', 'HH:mm:ss')" size="small" />
  </div>
</template>
<script>
import moment from 'moment';
export default {
  methods: {
    moment,
  },
}
</script>

<template>
  <div>
    <p>use value and @change</p>
    <a-time-picker @change="onChange" :value="value" />
    <br/>
    <br/>
    <p>v-model</p>
    <a-time-picker v-model="value" />
    <br/>
    <br/>
    <p>Do not change</p>
    <a-time-picker :value="value2" />
  </div>
</template>
<script>
import moment from 'moment';
export default {
  data(){
    return {
      value: null,
      value2: moment(),
    }
  },
  methods: {
    onChange(time,){
      console.log(time);
      this.value = time;
    }
  },
}
</script>

<template>
  <a-time-picker @change="onChange" :defaultOpenValue="moment('00:00:00', 'HH:mm:ss')">
    <a-icon type="smile" slot="suffixIcon"/>
  </a-time-picker>
</template>
<script>
import moment from 'moment';
export default {
  methods: {
    moment,
    onChange(time, timeString){
      console.log(time, timeString);
    }
  },
}
</script>