Version: latest



Dialog which allows the user to select date.


import React from 'react';
import { View, DatePicker, Scene, Prism } from 'magic-script-components';
export default class MyApp extends React.Component {
onDateChanged = event => {
// event.Date, event.DateString
console.log("onDateChanged event received: ", event);
onDateConfirmed = event => {
// event.Date, event.DateString
console.log("onDateConfirmed event received: ", event);
render() {
return (
<Prism size={[1, 1, 0.2]} >
<View name='main-view' alignment={'center-center'} localPosition={[-0.25, 0, 0]}>
label="Select Date"
color={[0.112, 0.655, 0.766, 1]}

Common Events

Common Properties

Create Properties

NameTypeDefault ValueRequiredDescription
labelstringn/aNThe text label that appears with the date picker.
labelSidestringtopNSide enum specifying whether the label appears on the side or top. Only top and left are currently supported.
defaultDatestring(current DateTime)NThe default date to appear on the date picker instead of the placeholder strings.
yearMinnumber-1NThe minimum year available to choose from.
yearMaxnumber-1NThe maximum year available to choose from.
dateFormatstringMM/DD/YYYYNFormat of date complies with DateFormat

LabelSide values:

  • bottom
  • left
  • right
  • top

Element Properties

NameTypeDefault ValueDescription
colorvec4N/ASets the DatePicker component's color. This does not affect the label.
datestringN/ASets the date manually. This only has an affect when not currently focused.
showHintbooleanfalseTo show the selected Date eg. 01/01/2019 or the format hint eg. MM/DD/YYYY. This will only have an affect when not currently focused. The full hint is always displayed on creation. Each field will continue to show the hint, ie MM or DD or YYYYY, until that field is focused. This can override that behavior and display the Date immediately if desired. The full Date will be shown when the user confirms a selected Date.