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