ant-design/components/date-picker/demo/disabled-date.md
二货机器人 407a41a142
feat: New Picker (#20023)
* init generate

* basic style

* basic panel style

* update mode panel style

* update style

* generate More picker

* default clear icon

* chore: Update separator type

* feat: Add ranged start & end className

* update range style

* Add transition effect

* support size config

* adjust range style

* chore: Auto fill time by showTime

* auto set time by format

* update disabled style

* update seperator style

* ranges style

* support extra footer style

* remove useless test case
part is not usable anymore
part is already tested in rc-picker

* init calendar

* all demos

* fix calendar basic test

* fix time-picker test case

* update snapshot

* fix tooltip test case & lint

* fix locale & style lint

* fix compile

* fix style

* fix style lint

* fix calendar style

* update rc-picker version

* adjust style

* move picker placeholder into locale file

* update snapshot

* add hover style

* update picker version

* fix icon position & style

* update picker version

* update deps for pading

* fix: align of suffix

* feat: Year & Month support range effect

* adjust range style to support up-down placement

* update rc-picker

* update range picker style

* adjust extra footer line style

* update snapshot

* fix: Locale error

* fix: style lint

* fix: add missing button style deps

* update test case

* fix firefox additional white line style issue

* rollback demo

* fix ff additional blue color

* docs: Remove placeholder in demo

* rangepicker ranges is tag now

* connect start / end background color with picker range

* update deps

* update deps for fixing blur text issue

* hide start-end demo

* range hover style update

* hover range with ranged value

* black magic of inner hover style

* hover style of range adjust

* fix css select miss hit on DatePicker

* remove one eslint rule

* fade range hovered color

* week should alway not show the cell selection

* update style of selection

* update snapshot

* fix style

* add margin back

* update rc-picker deps

* update date & time picker & form style

* fix disabled demo & update form style

* update docs about allowEmpty

* hide arrow in time range picker

* add hover & focused style

* fix lint

* fix style & update snapshot

* raise disabled selector proirity

* fix disabled today border color

* extra footer provides an bottom line

* time picker hover support transition background

* add padding style

* fix Firefox not correct calculate inline-flex

* fix style

* fix week picker missing today border color

* rm useless padding

* Force padding to 0

* test coverage

* dedup eslint rule

* adjust logic to imporve coverage

* fix render cell logic
2019-12-11 23:32:19 +08:00

1.9 KiB

order title
6
zh-CN en-US
不可选择日期和时间 Disabled Date & Time

zh-CN

可用 disabledDatedisabledTime 分别禁止选择部分日期和时间,其中 disabledTime 需要和 showTime 一起使用。

en-US

Disabled part of dates and time by disabledDate and disabledTime respectively, and disabledTime only works with showTime.

import moment from 'moment';
import { DatePicker } from 'antd';

const { RangePicker } = DatePicker;

function range(start, end) {
  const result = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
}

function disabledDate(current) {
  // Can not select days before today and today
  return current && current < moment().endOf('day');
}

function disabledDateTime() {
  return {
    disabledHours: () => range(0, 24).splice(4, 20),
    disabledMinutes: () => range(30, 60),
    disabledSeconds: () => [55, 56],
  };
}

function disabledRangeTime(_, type) {
  if (type === 'start') {
    return {
      disabledHours: () => range(0, 60).splice(4, 20),
      disabledMinutes: () => range(30, 60),
      disabledSeconds: () => [55, 56],
    };
  }
  return {
    disabledHours: () => range(0, 60).splice(20, 4),
    disabledMinutes: () => range(0, 31),
    disabledSeconds: () => [55, 56],
  };
}

ReactDOM.render(
  <div>
    <DatePicker
      format="YYYY-MM-DD HH:mm:ss"
      disabledDate={disabledDate}
      disabledTime={disabledDateTime}
      showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
    />
    <br />
    <DatePicker picker="month" disabledDate={disabledDate} />
    <br />
    <RangePicker
      disabledDate={disabledDate}
      disabledTime={disabledRangeTime}
      showTime={{
        hideDisabledOptions: true,
        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
      }}
      format="YYYY-MM-DD HH:mm:ss"
    />
  </div>,
  mountNode,
);