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!