cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

How to use a Date picker in Vuforia Studio mobile project?

No ratings

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:

 

 

2020-06-04_16-28-25.jpg

 

Now the   simplepicker could be tested and it has the following appearance in preview mode:

 

2020-05-12_1-49-11.jpg

 

The test picker Studio project was attached to this case.

 

Version history
Revision #:
2 of 2
Last update:
‎06-04-2020 10:40 AM
Updated by:
 
Labels (2)
Attachments
Contributors