|
| 1 | +### value?{ type: 'Date?', handler: "onChange", controllable: true } |
| 2 | + |
| 3 | +The current selected date, should be a Date object or null. |
| 4 | + |
| 5 | +<EditableExample codeText={require('../examples/valuePicker')(widgetName, ['new Date()'])}/> |
| 6 | + |
| 7 | +### onChange?{ type: 'Function( Date? date )' } |
| 8 | + |
| 9 | +Change event Handler that is called when the value is changed. The handler is called with the Date object |
| 10 | + |
| 11 | +<EditableExample codeText={require('../examples/onChangePicker')(widgetName, ['new Date()'])}/> |
| 12 | + |
| 13 | +### min?{ type: 'Date' } |
| 14 | + |
| 15 | +The minimum date that the Calendar can navigate from. |
| 16 | + |
| 17 | + |
| 18 | +### max?{ type: 'Date' } |
| 19 | + |
| 20 | +The maximum date that the Calendar can navigate to. |
| 21 | + |
| 22 | +### footer?{ type: 'Boolean', default: 'false' } |
| 23 | + |
| 24 | +Show or hide the Calendar footer. |
| 25 | + |
| 26 | +<EditableExample codeText={require('../examples/prop')(widgetName, 'footer', 'true')}/> |
| 27 | + |
| 28 | +### initialView?{ type: 'Enum', default: '"month"' } |
| 29 | + |
| 30 | +The starting and lowest level view the calendar can navigate down to. |
| 31 | + |
| 32 | +Acceptable values are: |
| 33 | +`"month"` `"year"` `"decade"` `"century"` |
| 34 | + |
| 35 | +<EditableExample codeText={require('../examples/prop')(widgetName, 'initialView', '"year"')}/> |
| 36 | + |
| 37 | +### finalView?{ type: 'Enum', default: '"century"' } |
| 38 | + |
| 39 | +The highest level view the calendar can navigate up to. This value should be higher |
| 40 | +than `initialView` |
| 41 | + |
| 42 | +Acceptable values are: `"month"` `"year"` `"decade"` `"century"` |
| 43 | + |
| 44 | +<EditableExample codeText={require('../examples/prop')(widgetName, 'finalView', '"year"')}/> |
| 45 | + |
| 46 | +### headerFormat?{ type: 'String | Function(Date? date)', default: "'MMMM yyyy'" } |
| 47 | + |
| 48 | +A formatter for the header button of the month view |
| 49 | + |
| 50 | +<EditableExample codeText={require('../examples/prop')(widgetName, 'headerFormat', '"MMM yy"')}/> |
| 51 | + |
| 52 | +### footerFormat?{ type: 'String | Function(Date? date)', default: "'D'" } |
| 53 | + |
| 54 | +A formatter for the Calendar footer, formats Today's Date as a string. |
| 55 | + |
| 56 | +<EditableExample codeText={require('../examples/prop')(widgetName, { footerFormat: "\"'today is:' dddd\"", footer: true })}/> |
| 57 | + |
| 58 | +### dayFormat?{ type: 'String | Function(Number dayOfTheWeek)', default: "Function()" } |
| 59 | + |
| 60 | +A formatter calendar days of the week, the default formats each day as a Narrow name: "Mo", "Tu", etc. |
| 61 | + |
| 62 | +<EditableExample codeText={require('../examples/prop')( |
| 63 | +widgetName, { dayFormat: "day => ['M', 'T','W','Th', 'F', '!', '!'][day]" })}/> |
| 64 | + |
| 65 | +### dateFormat?{ type: 'String | Function(Date? date)', default: "'dd'" } |
| 66 | + |
| 67 | +A formatter for day of the month |
| 68 | +<EditableExample codeText={require('../examples/prop')( |
| 69 | + widgetName, { dateFormat: "dt => dt.getDate()", footer: true })}/> |
| 70 | + |
| 71 | +### monthFormat?{ type: 'String | Function(Date? date)', default: "'MMM'" } |
| 72 | + |
| 73 | +A formatter for month name. |
| 74 | + |
| 75 | +<EditableExample codeText={require('../examples/prop')( |
| 76 | +widgetName, { monthFormat: "'MMMM'", initialView: "'year'" })}/> |
| 77 | + |
| 78 | +### yearFormat?{ type: 'String | Function(Date? date)', default: "'YYYY'" } |
| 79 | + |
| 80 | +A formatter for the year. |
| 81 | + |
| 82 | +<EditableExample codeText={require('../examples/prop')( |
| 83 | +widgetName, { yearFormat: "'yy'", initialView: "'decade'" })}/> |
| 84 | + |
| 85 | +### decadeFormat?{ type: 'String | Function(Date? date)', default: "Function()" } |
| 86 | + |
| 87 | +A formatter for decade, the default formats the first and last year of the decade like: 2000 - 2009. |
| 88 | + |
| 89 | +### centuryFormat?{ type: 'String | Function(Date? date)', default: "Function()" } |
| 90 | + |
| 91 | +A formatter for century, the default formats the first and last year of the century like: 1900 - 1999. |
| 92 | + |
| 93 | + |
| 94 | +### isRtl?{ type: 'Boolean', default: "false" } |
| 95 | + |
| 96 | +mark whether the widget should render right-to-left. This property can also be implicitly passed to the widget through |
| 97 | +a `childContext` prop (`isRtl`) this allows higher level application components to specify the direction. |
| 98 | + |
| 99 | + |
| 100 | +### messages?{ type: 'Object' } |
| 101 | + |
| 102 | +Object hash containing display text and/or text for screen readers. Use the `messages` object to |
| 103 | +localize widget text and increase accessibility. |
| 104 | + |
| 105 | + |
| 106 | +### messages.moveBack?{ type: 'String', default: '"navigate back"' } |
| 107 | + |
| 108 | +title and screen reader text for the left arrow button |
| 109 | + |
| 110 | + |
| 111 | +### messages.moveForward?{ type: 'String', default: '"navigate forward"' } |
| 112 | + |
| 113 | +title and screen reader text for the right arrow button |
| 114 | + |
| 115 | +## Keyboard Navigation |
| 116 | + |
| 117 | +- <kbd>ctrl + down arrow</kbd> navigate to next view |
| 118 | +- <kbd>ctrl + up arrow</kbd> navigate to previous view |
| 119 | +- <kbd>ctrl + left arrow</kbd> navigate to previous: month, year, decade, century |
| 120 | +- <kbd>ctrl + right arrow</kbd> navigate to next: month, year, decade, century |
| 121 | +- <kbd>left arrow</kbd> move focus to previous date |
| 122 | +- <kbd>right arrow</kbd> move focus to next date |
| 123 | +- <kbd>up arrow</kbd> move focus up within view |
| 124 | +- <kbd>down arrow</kbd> move focus down within view |
0 commit comments