Magic Leap MagicScript Landscape Application. UiDatePicker

Prepare
Magic Leap One
https://www.magicleap.com/magic-leap-one

mlsdk v.0.22.0
https://creator.magicleap.com/downloads/lumin-sdk/overview

magic-script-cli v2.2.17
https://www.npmjs.com/package/magic-script-cli

magic-script-polyfills v2.6.2
https://www.npmjs.com/package/magic-script-polyfills

Create Project

magic-script init
? What is the name of your application? Sample-UiDatePicker
? What is the app ID of your application? net.magicmodelers.magicscript.sample.uidatepicker
? In which folder do you want to save this project? sample-uidatepicker
? What app type do you want? Landscape
? Use TypeScript? No

Code
Change app.js

import { LandscapeApp, ui } from 'lumin';
const {
  UiLinearLayout
  ,UiDatePicker
  ,Side
  ,UiText
  ,EclipseLabelType
  ,Alignment
  ,HorizontalTextAlignment
  ,DatePickerParams
  ,DateFormat } = ui;

export class App extends LandscapeApp {
  onAppStart () {
    // Create a new prism that's half a meter cubed.
    const prism = this.requestNewPrism([0.5, 0.5, 0.5]);
    const layout = UiLinearLayout.Create(prism);
    layout.setAlignment(Alignment.CENTER_CENTER);

    const text = UiText.CreateEclipseLabel(
        prism,
        'UiDatePicker',
        EclipseLabelType.kT7
    );
    text.setAlignment(Alignment.CENTER_CENTER);
    text.setTextAlignment(HorizontalTextAlignment.kCenter);

    const date = new ui.Date();
    date.setYear(2019);
    date.setMonth(12);
    date.setDay(10);

    const date_picker_params = new DatePickerParams();
    date_picker_params.dateFormat = DateFormat.kYYYYMMDD;
    date_picker_params.defaultDate = date;
    date_picker_params.labelSide = Side.kTop;
    date_picker_params.labelText = "Release Date";
    const date_picker = UiDatePicker.Create(prism, date_picker_params);

    date_picker.setAlignment(Alignment.CENTER_CENTER);
    date_picker.onDateChangedSub(
        function(uiEventData)
        {
            text.setText(date_picker.getDateString());
        }
    );
    layout.addItem(date_picker, [0.01, 0.01, 0.01, 0.01]);
    layout.addItem(text, [0.01, 0.01, 0.01, 0.01]);
    prism.getRootNode().addChild(layout);
  }

  // Known Issue
  // Web Inspector does not work unless the updateLoop function is present in source.
  // It can be removed for production code.
  updateLoop (delta) {
    return true;
  }

  init () {
    return 0;
  }
}

Build

magic-script build -i

Run

magic-script run --port=10000

Reference
UiDatePicker (MagicScript API)
https://docs.magicscript.org/lumin.ui.UiDatePicker.html

DatePickerParams (MagicScript API)
https://docs.magicscript.org/api_1.6.0/lumin.ui.DatePickerParams.html

DateFormat (MagicScript API)
https://docs.magicscript.org/api_1.6.0/lumin.ui.DateFormat.html

magicscript
https://www.magicscript.org/

Thanks!