office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 2.78 kB
JavaScript
define([], function() { return "import * as React from 'react';\r\nimport {\r\n DatePicker,\r\n DayOfWeek,\r\n Dropdown,\r\n IDropdownOption\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\r\nexport interface IDatePickerBasicExampleState {\r\n firstDayOfWeek?: DayOfWeek;\r\n}\r\n\r\nexport class DatePickerBasicExample extends React.Component<any, IDatePickerBasicExampleState> {\r\n public constructor() {\r\n super();\r\n\r\n this.state = {\r\n firstDayOfWeek: DayOfWeek.Sunday\r\n };\r\n }\r\n\r\n public render() {\r\n let { firstDayOfWeek } = this.state;\r\n\r\n return (\r\n <div>\r\n <DatePicker firstDayOfWeek={ firstDayOfWeek } strings={ DayPickerStrings } placeholder='Select a date...' />\r\n <Dropdown\r\n label='Select the first day of the week'\r\n options={ [\r\n {\r\n text: 'Sunday',\r\n key: DayOfWeek[DayOfWeek.Sunday]\r\n },\r\n {\r\n text: 'Monday',\r\n key: DayOfWeek[DayOfWeek.Monday]\r\n },\r\n {\r\n text: 'Tuesday',\r\n key: DayOfWeek[DayOfWeek.Tuesday]\r\n },\r\n {\r\n text: 'Wednesday',\r\n key: DayOfWeek[DayOfWeek.Wednesday]\r\n },\r\n {\r\n text: 'Thursday',\r\n key: DayOfWeek[DayOfWeek.Thursday]\r\n },\r\n {\r\n text: 'Friday',\r\n key: DayOfWeek[DayOfWeek.Friday]\r\n },\r\n {\r\n text: 'Saturday',\r\n key: DayOfWeek[DayOfWeek.Saturday]\r\n }\r\n ] }\r\n selectedKey={ DayOfWeek[firstDayOfWeek] }\r\n onChanged={ this._onDropdownChanged.bind(this) }\r\n />\r\n </div>\r\n );\r\n }\r\n\r\n private _onDropdownChanged(option: IDropdownOption) {\r\n this.setState({\r\n firstDayOfWeek: DayOfWeek[option.key]\r\n });\r\n }\r\n}\r\n"; });