diff --git a/common/changes/users-hykwon-fixToday_2017-05-04-14-37.json b/common/changes/users-hykwon-fixToday_2017-05-04-14-37.json new file mode 100644 index 00000000000000..0a4cb4776b0023 --- /dev/null +++ b/common/changes/users-hykwon-fixToday_2017-05-04-14-37.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Calendar: make today value configurable to support different timezone", + "type": "minor" + } + ], + "email": "hykwon@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.Props.ts b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.Props.ts index d3bd90896b63bc..b8c5fa4f6b28cd 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.Props.ts +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.Props.ts @@ -34,6 +34,11 @@ export interface ICalendarProps extends React.Props { */ isMonthPickerVisible?: boolean; + /** + * Value of today. If null, current time in client machine will be used. + */ + today?: Date; + /** * Default value of the Calendar, if any */ diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx index e5cb13f01b69b4..7d53c164b74bda 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx @@ -27,6 +27,7 @@ export class Calendar extends BaseComponent impl onDismiss: null, isMonthPickerVisible: true, value: null, + today: new Date(), firstDayOfWeek: DayOfWeek.Sunday, dateRangeType: DateRangeType.Day, autoNavigateOnSelection: false, @@ -45,7 +46,7 @@ export class Calendar extends BaseComponent impl constructor(props: ICalendarProps) { super(); - let currentDate = props.value && !isNaN(props.value.getTime()) ? props.value : new Date(); + let currentDate = props.value && !isNaN(props.value.getTime()) ? props.value : (props.today || new Date()); this.state = { selectedDate: currentDate, navigatedDate: currentDate @@ -55,7 +56,7 @@ export class Calendar extends BaseComponent impl } public componentWillReceiveProps(nextProps: ICalendarProps) { - let { autoNavigateOnSelection, value } = nextProps; + let { autoNavigateOnSelection, value, today = new Date() } = nextProps; // Make sure auto-navigation is supported for programmatic changes to selected date, i.e., // if selected date is updated via props, we may need to modify the navigated date @@ -67,7 +68,7 @@ export class Calendar extends BaseComponent impl } this.setState({ - selectedDate: value || new Date() + selectedDate: value || today }); } @@ -98,6 +99,7 @@ export class Calendar extends BaseComponent impl impl @autobind private _onGotoToday() { - this._navigateDay(new Date()); + this._navigateDay(this.props.today); this._focusOnUpdate = true; }; diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx index 21bf3891ed5baa..3e81ecea43dee1 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx @@ -47,6 +47,7 @@ export interface ICalendarDayProps { firstDayOfWeek: DayOfWeek; dateRangeType: DateRangeType; autoNavigateOnSelection: boolean; + today?: Date; } export interface ICalendarDayState { @@ -63,9 +64,11 @@ export class CalendarDay extends BaseComponent