默认情况下,选择日期字段会打开日历视图。当前日期文本以粗体、下划线和蓝色突出显示。
时间字段用于从选择菜单中选择时间。
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;
你适合学Java吗?4大专业测评方法
代码逻辑 吸收能力 技术学习能力 综合素质
先测评确定适合在学习