How to use the grommet.Calendar function in grommet
To help you get started, we’ve selected a few grommet examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
grommet / grommet / components / MaskedInput / stories / DateTimeDrop.js View on Github 
var _React$useState = _react["default"].useState(),
date = _React$useState[0],
setDate = _React$useState[1];
var _React$useState2 = _react["default"].useState(),
time = _React$useState2[0],
setTime = _React$useState2[1];
var close = function close() {
return onClose(date || initialDate, time || initialTime);
};
return _react["default"].createElement(_grommet.Box, {
align: "center"
}, _react["default"].createElement(_grommet.Calendar, {
animate: false,
date: date || initialDate,
onSelect: setDate,
showAdjacentDays: false
}), _react["default"].createElement(_grommet.Box, {
flex: false,
pad: "medium",
gap: "medium"
}, _react["default"].createElement(_grommet.Keyboard, {
onEnter: function onEnter(event) {
event.preventDefault(); // so drop doesn't re-open
close();
}
}, _react["default"].createElement(_grommet.MaskedInput, {
mask: [{var RangeCalendar = function RangeCalendar() {
return _react["default"].createElement(_grommet.Grommet, {
theme: _themes.grommet
}, _react["default"].createElement(_grommet.Box, {
align: "center",
pad: "large"
}, _react["default"].createElement(_grommet.Calendar, {
range: true
})));
};var CustomHeaderCalendar = function CustomHeaderCalendar() {
var _useState = (0, _react.useState)(),
date = _useState[0],
setDate = _useState[1];
var onSelect = function onSelect(nextDate) {
setDate(nextDate !== date ? nextDate : undefined);
};
return _react["default"].createElement(_grommet.Grommet, {
theme: _themes.grommet
}, _react["default"].createElement(_grommet.Box, {
align: "center",
pad: "large"
}, _react["default"].createElement(_grommet.Calendar, {
date: date,
onSelect: onSelect,
size: "small",
bounds: ['2018-09-08', '2018-12-13'],
header: function header(_ref) {
var currentDate = _ref.date,
locale = _ref.locale,
onPreviousMonth = _ref.onPreviousMonth,
onNextMonth = _ref.onNextMonth,
previousInBound = _ref.previousInBound,
nextInBound = _ref.nextInBound;
return _react["default"].createElement(_grommet.Box, {
direction: "row",
align: "center",
justify: "between"
}, _react["default"].createElement(_grommet.Button, {var CustomSizeCalendar = function CustomSizeCalendar() {
var _useState = (0, _react.useState)(),
date = _useState[0],
setDate = _useState[1];
var onSelect = function onSelect(nextDate) {
setDate(nextDate !== date ? nextDate : undefined);
};
return _react["default"].createElement(_grommet.Grommet, {
theme: customHeading
}, _react["default"].createElement(_grommet.Box, {
align: "center",
pad: "large"
}, _react["default"].createElement(_grommet.Calendar, {
date: date,
onSelect: onSelect,
bounds: ['2018-09-08', '2020-12-13']
})));
};direction: "row",
align: "center",
justify: "between"
}, _react["default"].createElement(_grommet.Button, {
disabled: !previousInBound,
icon: _react["default"].createElement(_grommetIcons.Previous, null),
onClick: onPreviousMonth
}), _react["default"].createElement(_grommet.Heading, {
level: 3,
margin: "none"
}, currentDate.toLocaleDateString(locale, {
month: 'long',
year: 'numeric'
})), _react["default"].createElement(_grommetIcons.Blank, null));
}
}), _react["default"].createElement(_grommet.Calendar, {
animate: false,
showAdjacentDays: false,
date: date,
dates: dates,
range: true,
onSelect: onSelect,
reference: reference2.toISOString(),
onReference: function onReference(reference) {
var refDate = new Date(reference);
var priorDate = new Date(refDate);
priorDate.setMonth(refDate.getMonth() - 1, 1);
setReference1(priorDate);
setReference2(refDate);
},
header: function header(_ref2) {
var currentDate = _ref2.date,}, _react["default"].createElement(_grommet.Text, {
size: "xlarge"
}, "Daylight MST"), _react["default"].createElement(_grommet.Box, {
align: "center",
pad: {
vertical: 'medium'
}
}, _react["default"].createElement(_grommet.Calendar, {
date: "2018-11-04T06:00:00.000Z",
bounds: ['2013-11-06', '2018-12-06']
})), _react["default"].createElement(_grommet.Box, {
align: "center",
pad: {
vertical: 'medium'
}
}, _react["default"].createElement(_grommet.Calendar, {
date: "2019-03-11T05:00:01.409Z",
bounds: ['2019-03-01', '2019-03-31']
}))), _react["default"].createElement(_grommet.Box, {
align: "center",
pad: "large"
}, _react["default"].createElement(_grommet.Text, {
size: "xlarge"
}, "Daylight PST"), _react["default"].createElement(_grommet.Box, {
align: "center",
pad: {
vertical: 'medium'
}
}, _react["default"].createElement(_grommet.Calendar, {
date: "2018-11-04T07:00:00.000Z",
bounds: ['2013-11-06', '2018-12-06']
})), _react["default"].createElement(_grommet.Box, {min: 0,
max: 3,
size: "full",
round: "small",
values: rangeSelector,
onChange: function onChange(values) {
return setRangeSelector(values);
}
})), _react["default"].createElement(_grommet.FormField, {
label: "FormField"
}, _react["default"].createElement(_grommet.TextInput, {
placeholder: "TextInput"
}))), _react["default"].createElement(_grommet.Box, {
key: "time",
gap: "medium"
}, _react["default"].createElement(_grommet.Calendar, {
size: "small"
}), _react["default"].createElement(_grommet.Clock, {
type: "digital",
className: "chromatic-ignore"
}), _react["default"].createElement(_grommet.Clock, {
className: "chromatic-ignore"
})), _react["default"].createElement(_grommet.Box, {
key: "measure",
gap: "medium"
}, _react["default"].createElement(_grommet.Chart, {
type: "bar",
round: true,
size: "small",
values: [{
value: [10, 20]
}, {setDate(undefined);
setDates(arg);
} else {
setDate(arg);
setDates(undefined);
}
};
return _react["default"].createElement(_grommet.Grommet, {
theme: _themes.grommet
}, _react["default"].createElement(_grommet.Box, {
justify: "center",
pad: "large",
direction: "row",
gap: "small"
}, _react["default"].createElement(_grommet.Calendar, {
animate: false,
showAdjacentDays: false,
range: true,
date: date,
dates: dates,
onSelect: onSelect,
reference: reference1.toISOString(),
onReference: function onReference(reference) {
var refDate = new Date(reference);
var nextDate = new Date(refDate);
nextDate.setMonth(refDate.getMonth() + 1, 1);
setReference1(refDate);
setReference2(nextDate);
},
header: function header(_ref) {
var currentDate = _ref.date,align: "center",
pad: "large",
direction: "row",
justify: "center"
}, _react["default"].createElement(_grommet.Box, {
align: "center",
pad: "large",
border: "right"
}, _react["default"].createElement(_grommet.Text, {
size: "xlarge"
}, "Daylight MST"), _react["default"].createElement(_grommet.Box, {
align: "center",
pad: {
vertical: 'medium'
}
}, _react["default"].createElement(_grommet.Calendar, {
date: "2018-11-04T06:00:00.000Z",
bounds: ['2013-11-06', '2018-12-06']
})), _react["default"].createElement(_grommet.Box, {
align: "center",
pad: {
vertical: 'medium'
}
}, _react["default"].createElement(_grommet.Calendar, {
date: "2019-03-11T05:00:01.409Z",
bounds: ['2019-03-01', '2019-03-31']
}))), _react["default"].createElement(_grommet.Box, {
align: "center",
pad: "large"
}, _react["default"].createElement(_grommet.Text, {
size: "xlarge"
}, "Daylight PST"), _react["default"].createElement(_grommet.Box, {};
return _react["default"].createElement(_grommet.Grommet, {
theme: _themes.grommet
}, _react["default"].createElement(_grommet.Box, {
align: "center",
pad: "large"
}, _react["default"].createElement(_grommet.Calendar, {
date: date,
onSelect: onSelect,
size: "small",
bounds: ['2018-09-08', '2020-12-13']
})), _react["default"].createElement(_grommet.Box, {
align: "center",
pad: "large"
}, _react["default"].createElement(_grommet.Calendar, {
date: date,
daysOfWeek: true,
onSelect: onSelect,
size: "small",
bounds: ['2018-09-08', '2020-12-13']
})));
};
Popular grommet functions
- grommet.Anchor
- grommet.Box
- grommet.Button
- grommet.Calendar
- grommet.CheckBox
- grommet.FormField
- grommet.Grommet
- grommet.grommet
- grommet.Heading
- grommet.Select
- grommet.Stack
- grommet.Text
- grommet/themes.grommet
- grommet/utils.deepMerge
- grommet/utils.normalizeColor
- grommet/utils/colors.colorIsDark
- grommet/utils/Intl.getMessage
- grommet/utils/mixins.parseMetricToNum
- grommet/utils/Rest.buildQuery
- grommet/utils/Rest.get