examples/disabled.js

   1 /* eslint no-console:0 */
   2
   3 import 'rc-time-picker/assets/index.less';
   4
   5 import React from 'react';
   6 import ReactDom from 'react-dom';
   7
   8 import GregorianCalendar from 'gregorian-calendar';
   9 import DateTimeFormat from 'gregorian-calendar-format';
  10
  11 import TimePicker from 'rc-time-picker';
  12 import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN';
  13
  14 const showSecond = true;
  15 const str = showSecond ? 'HH:mm:ss' : 'HH:mm';
  16
  17 const formatter = new DateTimeFormat(str);
  18
  19 const now = new GregorianCalendar(TimePickerLocale.calendar);
  20 now.setTime(Date.now());
  21
  22 function generateOptions(length, excludedOptions) {
  23   const arr = [];
  24   for (let value = 0; value < length; value++) {
  25     if (excludedOptions.indexOf(value) < 0) {
  26       arr.push(value);
  27     }
  28   }
  29   return arr;
  30 }
  31
  32 function onChange(value) {
  33   console.log(value && formatter.format(value));
  34 }
  35
  36 function disabledHours() {
  37   return [0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23];
  38 }
  39
  40 function disabledMinutes(h) {
  41   switch (h) {
  42     case 9:
  43       return generateOptions(60, [30]);
  44     case 21:
  45       return generateOptions(60, [0]);
  46     default:
  47       return generateOptions(60, [0, 30]);
  48   }
  49 }
  50
  51 function disabledSeconds(h, m) {
  52   return [h + m % 60];
  53 }
  54
  55 ReactDom.render(
  56   <TimePicker formatter={formatter} locale={TimePickerLocale}
  57               showSecond={showSecond}
  58               defaultValue={now}
  59               className="xxx"
  60               onChange={onChange}
  61               disabledHours={disabledHours}
  62               disabledMinutes={disabledMinutes}
  63               disabledSeconds={disabledSeconds}/>,
  64   document.getElementById('__react-content')
  65 );