examples/pick-time.js

   1 import 'rc-time-picker/assets/index.less';
   2
   3 import React from 'react';
   4 import ReactDom from 'react-dom';
   5
   6 import GregorianCalendar from 'gregorian-calendar';
   7 import DateTimeFormat from 'gregorian-calendar-format';
   8 import zhCn from 'gregorian-calendar/lib/locale/zh_CN';
   9
  10 import TimePicker from 'rc-time-picker/src/TimePicker';
  11 import TimePanel from 'rc-time-picker/src/TimePanel';
  12 import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN';
  13
  14 const formatter = new DateTimeFormat('HH:mm:ss');
  15
  16 const now = new GregorianCalendar(zhCn);
  17 now.setTime(Date.now());
  18
  19 const timePanel = (
  20   <TimePanel
  21     defaultValue={now}
  22     locale={TimePickerLocale}
  23     formatter={formatter}
  24     minuteOptions={[0, 30]}
  25   />
  26 );
  27
  28 ReactDom.render(
  29   <TimePicker panel={timePanel} value={now}>
  30     {
  31       ({value}) => {
  32         return <input type="text" placeholder="请选择时间" readOnly value={value && formatter.format(value)} />;
  33       }
  34     }
  35   </TimePicker>,
  36   document.getElementById('__react-content')
  37 );