office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 2.3 kB
JavaScript
module.exports = "import * as React from 'react';\r\nimport {\r\n Button,\r\n DatePicker,\r\n DayOfWeek\r\n} from '../../../../index';\r\n\r\nconst DayPickerStrings = {\r\n months: [\r\n 'January',\r\n 'February',\r\n 'March',\r\n 'April',\r\n 'May',\r\n 'June',\r\n 'July',\r\n 'August',\r\n 'September',\r\n 'October',\r\n 'November',\r\n 'December'\r\n ],\r\n\r\n shortMonths: [\r\n 'Jan',\r\n 'Feb',\r\n 'Mar',\r\n 'Apr',\r\n 'May',\r\n 'Jun',\r\n 'Jul',\r\n 'Aug',\r\n 'Sep',\r\n 'Oct',\r\n 'Nov',\r\n 'Dec'\r\n ],\r\n\r\n days: [\r\n 'Sunday',\r\n 'Monday',\r\n 'Tuesday',\r\n 'Wednesday',\r\n 'Thursday',\r\n 'Friday',\r\n 'Saturday'\r\n ],\r\n\r\n shortDays: [\r\n 'S',\r\n 'M',\r\n 'T',\r\n 'W',\r\n 'T',\r\n 'F',\r\n 'S'\r\n ],\r\n\r\n goToToday: 'Go to today',\r\n\r\n isRequiredErrorMessage: 'Start date is required.',\r\n\r\n invalidInputErrorMessage: 'Invalid date format.'\r\n};\r\n\r\nexport interface IDatePickerInputExampleState {\r\n firstDayOfWeek?: DayOfWeek;\r\n value?: Date;\r\n}\r\n\r\nexport class DatePickerInputExample extends React.Component<any, IDatePickerInputExampleState> {\r\n public constructor() {\r\n super();\r\n\r\n this.state = {\r\n firstDayOfWeek: DayOfWeek.Sunday,\r\n value: null\r\n };\r\n }\r\n\r\n public render() {\r\n let { firstDayOfWeek, value } = this.state;\r\n const desc = 'This field is required. One of the support input formats is year dash month dash day.';\r\n return (\r\n <div>\r\n <p>Text input allowed by default when use keyboard navigation. Mouse click the TextField will popup DatePicker, click the TextField again will dismiss the DatePicker and allow text input.</p>\r\n <DatePicker\r\n label='Start date'\r\n isRequired={ false }\r\n allowTextInput={ true }\r\n ariaLabel={ desc }\r\n firstDayOfWeek={ firstDayOfWeek }\r\n strings={ DayPickerStrings }\r\n value={ value }\r\n onSelectDate={ date => this.setState({ value: date }) }\r\n />\r\n <Button onClick={ () => this.setState({ value: null }) }>Clear</Button>\r\n </div>\r\n );\r\n }\r\n}\r\n";