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