Version: 2.0.2



Dialog which allows the user to select date.


import React from "react";
import { View, DatePicker } from "magic-script-components";
export default class MyApp extends React.Component {
render() {
return (
label="Select Date"
color={[0.112, 0.655, 0.766, 1]}
localScale={[2, 2, 0]}

Common Events

Common Properties

Create Properties

NameTypeDefault ValueDescription
labelstringn/aThe text label that appears with the date picker.
labelSidestringtopSide enum specifying whether the label appears on the side or top. Only top and left are currently supported.
defaultDatestring(current DateTime)The default date to appear on the date picker instead of the placeholder strings.
yearMinnumber-1The minimum year available to choose from.
yearMaxnumber-1The maximum year available to choose from.

LabelSide values:

  • bottom
  • left
  • right
  • top

Element Properties

colorvec4Sets the DatePicker component's color. This does not affect the label.
datestringSets the date manually. This only has an affect when not currently focused.
showHintbooleanTo 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.