日期时间选择器的示例

默认

默认情况下，选择日期字段会打开日历视图。当前日期文本以粗体、下划线和蓝色突出显示。

时间字段用于从选择菜单中选择时间。

import React from 'react';
import { DateTimePicker } from '@atlaskit/datetime-picker';
const DateTimePickerDefaultExample = () => <DateTimePicker />;
export default DateTimePickerDefaultExample;

形式

与表单组件一起使用的日期时间选择器包括字段标签和帮助文本。

import React from 'react';
import Button from '@atlaskit/button';
import Form, { Field, FormFooter, HelperMessage } from '@atlaskit/form';
import { DateTimePicker } from '@atlaskit/datetime-picker';
const DateTimePickerFormExample = () => (
  <Form
    onSubmit={(formState: unknown) => console.log('form submitted', formState)}
  >
    {({ formProps }) => (
      <form {...formProps}>
        <Field
          name="datetime-picker"
          label="Scheduled run time"
          isRequired={false}
        >
          {({ fieldProps }) => (
            <>
              <DateTimePicker {...fieldProps} />
              <HelperMessage>Help or instruction text goes here</HelperMessage>
            </>
          )}
        </Field>
        <FormFooter>
          <Button type="submit" appearance="primary">
            Submit
          </Button>
        </FormFooter>
      </form>
    )}
  </Form>
);
export default DateTimePickerFormExample;

验证

这就是日期时间选择器在表单中的行为方式。

验证显示与日期时间选择器的限制相关的错误消息。

当用户选择日期时间选择器区域时，焦点颜色变为蓝色。实时验证日期时间选择器时，消息图标会根据消息类型进行切换。

例如，当输入内容不符合条件时，帮助文本会变成错误消息。满足条件时，错误和警告消息会消失。

保持帮助文本尽可能短。对于复杂的信息，请在新的浏览器选项卡中提供指向更多信息的链接。使用消息传递指南以获得更多帮助。

import React from 'react';
import Button from '@atlaskit/button';
import Form, {
  ErrorMessage,
  Field,
  FormFooter,
  ValidMessage,
} from '@atlaskit/form';
import { DateTimePicker } from '@atlaskit/datetime-picker';
const validateField = (value?: string) => {
  if (!value) {
    return 'REQUIRED';
  } else if (new Date(value) < new Date()) {
    return 'EXPIRED';
  }
};
const DateTimePickerFormExample = () => (
  <Form onSubmit={(formState) => console.log('form submitted', formState)}>
    {({ formProps }) => (
      <form {...formProps}>
        <Field
          name="datetime-picker"
          label="Scheduled run time"
          validate={validateField}
          isRequired
        >
          {({ fieldProps, error, meta: { valid } }) => (
            <>
              <DateTimePicker {...fieldProps} />
              {valid && (
                <ValidMessage>You have entered a valid datetime</ValidMessage>
              )}
              {error === 'REQUIRED' && (
                <ErrorMessage>This field is required</ErrorMessage>
              )}
              {error === 'EXPIRED' && (
                <ErrorMessage>
                  You may not enter a datetime that is in the past
                </ErrorMessage>
              )}
            </>
          )}
        </Field>
        <FormFooter>
          <Button type="submit" appearance="primary">
            Submit
          </Button>
        </FormFooter>
      </form>
    )}
  </Form>
);
export default DateTimePickerFormExample;

禁用日期

如果某个日期不是有效的选择，您可以在向用户显示的日历中禁用它。这不会限制用户可以键入的日期，因此需要进行验证。

具体日期用于disabled禁用个别日期。

import React from 'react';
import { DateTimePicker } from '@atlaskit/datetime-picker';
const disabledDates = [
  '2020-12-07',
  '2020-12-08',
  '2020-12-09',
  '2020-12-16',
  '2020-12-17',
  '2020-12-18',
];
const DateTimePickerDisabledExample = () => (
  <DateTimePicker
    defaultValue="2020-12-15"
    datePickerProps={{ disabled: disabledDates }}
  />
);
export default DateTimePickerDisabledExample;

日期范围

用于minDate设置最小有效日期和maxDate最大有效日期。这些可用于定义有效的日期范围。

import React from 'react';
import { DateTimePicker } from '@atlaskit/datetime-picker';
const DateTimePickerDisableRangeExample = () => (
  <DateTimePicker
    defaultValue="2020-12-15"
    datePickerProps={{ minDate: '2020-12-10', maxDate: '2020-12-20' }}
  />
);
export default DateTimePickerDisableRangeExample;

复杂行为

用于disabledDateFilter更复杂的情况。

import React from 'react';
// eslint-disable-next-line no-restricted-imports
import { parseISO } from 'date-fns';
import { DateTimePicker } from '@atlaskit/datetime-picker';
const weekendFilter = (date: string) => {
  const dayOfWeek = parseISO(date).getDay();
  return dayOfWeek === 0 || dayOfWeek === 6;
};
const DateTimePickerDisableComplexExample = () => (
  <DateTimePicker
    defaultValue="2020-12-15"
    datePickerProps={{ disabledDateFilter: weekendFilter }}
  />
);
export default DateTimePickerDisableComplexExample;

日期和时间格式

日期时间选择器支持自定义日期和时间的格式。格式以字符串形式给出，并使用现代 JavaScript 日期实用程序库中指定的语法。

dateFormat确定日期的格式。

timeFormat确定时间的格式。

尽可能locale用于日期和时间格式，而不是自定义格式。日期和时间格式应由用户的区域设置和用例决定。

import React from 'react';
// eslint-disable-next-line no-restricted-imports
import { parseISO } from 'date-fns';
import { DateTimePicker } from '@atlaskit/datetime-picker';
const DateTimePickerFormattingExample = () => (
  <DateTimePicker
    dateFormat="YYYY-MM-DD"
    timeFormat="HH:mm"
    datePickerProps={{
      placeholder: '2021-06-10',
      parseInputValue: (date: string) => parseISO(date),
    }}
    timePickerProps={{
      placeholder: '13:30',
    }}
  />
);
export default DateTimePickerFormattingExample;

可访问性

日期时间选择器支持具有辅助技术的用户的标签属性。

使用datePickerSelectPropsandtimePickerSelectProps传递aria-label道具。这是屏幕阅读器将为日期和时间选择器组件读取的内容。

import React from 'react';
import Button from '@atlaskit/button';
import Form, { Field, FormFooter } from '@atlaskit/form';
import { DateTimePicker } from '@atlaskit/datetime-picker';
const DateTimePickerFormAccessibleExample = () => (
  <Form
    onSubmit={(formState: unknown) => console.log('form submitted', formState)}
  >
    {({ formProps }) => (
      <form {...formProps}>
        <Field
          name="datetime-picker-accessible"
          label="Scheduled run time"
          isRequired
        >
          {({ fieldProps }) => (
            <DateTimePicker
              {...fieldProps}
              datePickerSelectProps={{ 'aria-label': 'Select date' }}
              timePickerSelectProps={{ 'aria-label': 'Select time' }}
            />
          )}
        </Field>
        <FormFooter>
          <Button type="submit" appearance="primary">
            Submit
          </Button>
        </FormFooter>
      </form>
    )}
  </Form>
);
export default DateTimePickerFormAccessibleExample;