ant-design-vue/components/vc-time-picker/demo/all.vue

<script>
import '../assets/index.less';

import moment from 'moment';

import TimePicker from '../index';

const format = 'h:mm a';

const now = moment()
  .hour(0)
  .minute(0);

function onChange(value) {
  console.log(value && value.format(format));
}

const showSecond = true;
const str = showSecond ? 'HH:mm:ss' : 'HH:mm';

const now1 = moment()
  .hour(14)
  .minute(30);

function generateOptions(length, excludedOptions) {
  const arr = [];
  for (let value = 0; value < length; value++) {
    if (excludedOptions.indexOf(value) < 0) {
      arr.push(value);
    }
  }
  return arr;
}

function onChange1(value) {
  console.log(value && value.format(str));
}

function disabledHours() {
  return [0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23];
}

function disabledMinutes(h) {
  switch (h) {
    case 9:
      return generateOptions(60, [30]);
    case 21:
      return generateOptions(60, [0]);
    default:
      return generateOptions(60, [0, 30]);
  }
}

function disabledSeconds(h, m) {
  return [h + (m % 60)];
}

export default {
  data() {
    return {
      open: false,
      value: moment(),
    };
  },
  methods: {
    setOpen({ open }) {
      this.open = open;
    },
    toggleOpen() {
      this.open = !this.open;
    },
    handleValueChange(value) {
      console.log(value && value.format('HH:mm:ss'));
      this.value = value;
    },
    clear() {
      this.value = undefined;
    },
  },
  render() {
    return (
      <div>
        <TimePicker
          showSecond={false}
          defaultValue={now}
          class="xxx"
          onChange={onChange}
          format={format}
          use12Hours
          inputReadOnly
        />
        <br />
        <br />
        <div>
          <h3>Disabled picker</h3>
          <TimePicker defaultValue={now1} disabled onChange={onChange1} />
          <h3>Disabled options</h3>
          <TimePicker
            showSecond={showSecond}
            defaultValue={now1}
            class="xxx"
            onChange={onChange1}
            disabledHours={disabledHours}
            disabledMinutes={disabledMinutes}
            disabledSeconds={disabledSeconds}
          />
        </div>
        <div>
          <TimePicker defaultValue={moment()} showHour={false} />
          <TimePicker defaultValue={moment()} showMinute={false} />
          <TimePicker defaultValue={moment()} showSecond={false} />

          <TimePicker defaultValue={moment()} showMinute={false} showSecond={false} />
          <TimePicker defaultValue={moment()} showHour={false} showSecond={false} />
          <TimePicker defaultValue={moment()} showHour={false} showMinute={false} />
        </div>
        <TimePicker
          format={str}
          showSecond={showSecond}
          // use to control utfOffset, locale, default open value
          defaultOpenValue={moment()}
          class="xxx"
          onChange={onChange1}
          disabledHours={() => [0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23]}
          disabledMinutes={() => [0, 2, 4, 6, 8]}
          hideDisabledOptions
        />
        <div>
          <button onClick={this.toggleOpen}>Toggle open</button>
          <TimePicker open={this.open} onOpen={this.setOpen} onClose={this.setOpen} focusOnOpen />
        </div>
        <TimePicker
          style={{ width: '100px' }}
          showSecond={showSecond}
          defaultValue={moment()}
          class="xxx"
          onChange={onChange}
        />
        <TimePicker defaultValue={moment()} showSecond={false} minuteStep={15} />
        <div>
          <TimePicker defaultValue={this.value} onChange={this.handleValueChange} />
          <TimePicker value={this.value} onChange={this.handleValueChange} />
          <button onClick={this.clear}>clear</button>
        </div>
      </div>
    );
  },
};
</script>