office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
83 lines • 3.23 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/DatePicker", "../../../utilities/dateMath/DateMath"], function (require, exports, tslib_1, React, DatePicker_1, DateMath_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var today = new Date(Date.now());
var minDate = DateMath_1.addMonths(today, -1);
var maxDate = DateMath_1.addYears(today, 1);
var description = "When date boundaries are set (via minDate and maxDate props) the DatePicker will not allow out-of-bounds dates to be picked or entered. In this example, the allowed dates are " + minDate.toLocaleDateString() + "-" + maxDate.toLocaleDateString();
var DayPickerStrings = {
months: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
],
shortMonths: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
days: [
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday'
],
shortDays: [
'S',
'M',
'T',
'W',
'T',
'F',
'S'
],
goToToday: 'Go to today',
prevMonthAriaLabel: 'Go to previous month',
nextMonthAriaLabel: 'Go to next month',
prevYearAriaLabel: 'Go to previous year',
nextYearAriaLabel: 'Go to next year',
isRequiredErrorMessage: 'Field is required.',
invalidInputErrorMessage: 'Invalid date format.',
isOutOfBoundsErrorMessage: "Date must be between " + minDate.toLocaleDateString() + "-" + maxDate.toLocaleDateString()
};
var DatePickerBoundedExample = /** @class */ (function (_super) {
tslib_1.__extends(DatePickerBoundedExample, _super);
function DatePickerBoundedExample(props) {
var _this = _super.call(this, props) || this;
_this.state = {
firstDayOfWeek: DatePicker_1.DayOfWeek.Sunday
};
return _this;
}
DatePickerBoundedExample.prototype.render = function () {
var firstDayOfWeek = this.state.firstDayOfWeek;
return (React.createElement("div", null,
React.createElement("p", null, description),
React.createElement(DatePicker_1.DatePicker, { isRequired: false, firstDayOfWeek: firstDayOfWeek, strings: DayPickerStrings, placeholder: 'Select a date...', minDate: minDate, maxDate: maxDate, allowTextInput: true })));
};
return DatePickerBoundedExample;
}(React.Component));
exports.DatePickerBoundedExample = DatePickerBoundedExample;
});
//# sourceMappingURL=DatePicker.Bounded.Example.js.map