Sometimes it is required and will be nice to use a picker functionality. For example, some data picker – so the question: How to achieve this. Yes it is possible in JavaScript that we can incorporate a data/calendar picker into the Vuforia Studio environment? In the Web there are some open source libraries and at least it works 1:1 in preview mode. But mostly they work also fine on mobile devices. In this article a data picker was tested and it was working fine in Preview mode but also was working fine on IOS and on Android devices
The example here is based on the follow link:
https://www.cssscript.com/tag/date-picker/
there are some data picker implemented.
Here in this example the library (data-picker) is copied to the Studio Project download folder and it javascript code will load the lib and defined a function which is called from button
First step is to define a function which enables to load javascript and css from a file / project folder:
// this code load a javascript or css file
$scope.loadjscssfile= function(filename, filetype){
console.log("loading "+filename+":: type="+filetype)
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
// this function will load the simplepicker javascript lib and the css lib
$scope.testLoad= function()
{
$scope.loadjscssfile("app/resources/Uploaded/lib/simplepicker.css", "css")
$scope.loadjscssfile("app/resources/Uploaded/dist/simplepicker.js", "js")
}
In this example the $inoicView.afterEnter (after 2d/view is loaded) event is used to load the library.
The function for the picker call is defined - $scope.app.TestPicker()- which is called from a button .
//=============================
$scope.$on('$ionicView.afterEnter', function() {
$scope.testLoad();
$timeout(() => { $scope.setWidgetProp("button-1","class", "simplepicker-btn");
$scope.$applyAsync();
},500)
})
//https://www.cssscript.com/material-date-time-picker-simplepicker/
// function called from a button
$scope.app.TestPicker = function()
{
let simplepicker = new SimplePicker({
zIndex: 10
});
simplepicker.open();
simplepicker.on('submit', (date, readableDate) => {
console.warn( readableDate );
$scope.setWidgetProp('label-1','text', readableDate);
$scope.$applyAsync();
});
simplepicker.on('close', (date) => {
console.log('Picker Closed' );
});
}
When the picker is closed after date was selected - the javascript code will set the selected value to the text property of a label widget (label-2).
The javascript and the style (css) implementation was copied to the resource folder:
Now the simplepicker could be tested and it has the following appearance in preview mode:
The test picker Studio project was attached to this case.
