Android and Cross Browser TextBox Date Picker

[Davidk]

Date Pickers, for Text Controls, format and function a bit differently depending upon where they're used.

On an Android device you don't want the soft keyboard popping up. In a desktop browser you may prefer to have Chrome, Firefox, and Edge behave similarly to each other.

However, the Input Type "Date" is supported in Chrome, but not under Firefox or others.

So... the trick is to use one Textbox Control which will function appropriately within the browser it's running in... and behave nicely under Android.

To do this we must surrender the Alpha built-in Calendar Date Picker and use the jQuery Date Picker. There are lots of themes available and you can create your own if you like.

Attached is an a5w page running a UX Component... which is the criteria established for this process.

There are 4 TextBox Controls... each with slightly different settings. The settings are displayed for each TextBox.

Date 1, 3, and 4 function slightly differently for each browser.

Date 2 responds appropriately under Android... and responds exactly the same under Chrome, Firefox, Edge, and IE.

There are only 2 areas to review within the UX:

onRenderComplete : detects the browser and sets stuff up for Android and Date 2
Javascript function : setDefaultDate() : this tests for each browser and sets default dates where needed. Different formats are required for different browsers.
EDIT: Date 2 has it's property... Custom In-Control Buttons turned on. So have a look in that area for settings and code.

The a5w page was modified slightly from it's default. The jQuery Theme was added.

Testing 5 targets and 4 TextBox controls gets into a "Who's On First" scenario. So if anyone finds something odd... please post.

[Lance Gurd]

Re: Android and Cross Browser TextBox Date Picker

All seems to work well David, tested on Chrome and android. But in Chrome the Date 2 field shows in american date format, although the calendar pops up in UK format.

[Davidk]

Re: Android and Cross Browser TextBox Date Picker

Lance... not sure what that means... what does that look like? I don't see anything odd about the jQuery calendar for Date 2. Although I'm in Canada, and like you... normally use the "correct" date format, I'm currently formatted for the US. You're in the UK, so what is your PC date setting? Also, note the EDIT I added to the original post.

[Lance Gurd]

Re: Android and Cross Browser TextBox Date Picker

Hi David,

My PC date settings are set to dd/MM/yyyy and here is a screen shot of what I get
dates.png

[Davidk]

Re: Android and Cross Browser TextBox Date Picker

Ok... you wrote that the calendar was popping up a different format. I understand the TextBox US date format... that's how it was written. Have a look at the Javascript function "setDefaultDate"... change the format there. The setup of some TextBox controls for date demands the .setValue() format be "yyyy-MM-dd". But Date 2 is open so it'll take what you give it.

On further thought, there's no reason the code can't pick up the UX Date Format. I've updated the original attached sample to do this.

[Lance Gurd]

Re: Android and Cross Browser TextBox Date Picker

I can confirm changing the setDefaultDate format changed to the UK format. Thanks for this

[Michael1954]

Re: Android and Cross Browser TextBox Date Picker

Looks great.

Thanks David

[lgrupido]

Re: Android and Cross Browser TextBox Date Picker

One more niggling issue for me.

I can get this to work correctly when just setting up a UX for a new record, but editing previous records still doesn't quite work right.

In my case, I am picking a record from a list and then using {dialog.Object}.populateControlsFromTable( {dialog.Object}.getValue('LIST1') );

All the controls fill in fine except for the date controls with an html5 date format.

I can't seem to figure out the correct settings to get them to display properly. They show up blank the same way they would if you used "=date()" in their initial value.

Note: the value looks as if it's actually being set properly - because if I do an alert of the value of the control, the correct value shows up. It just doesn't display.

[Davidk]

Re: Android and Cross Browser TextBox Date Picker

There's a lot going on here so you'd need to be a bit more specific about where it doesn't work. Is it Android?

[lgrupido]

Re: Android and Cross Browser TextBox Date Picker

Sorry, yes on Android.

[lgrupido]

Re: Android and Cross Browser TextBox Date Picker

To be even more clear:

Android, with html5 set to date with no date picker.

That works the best on strictly android devices.

As I said, I can get the field to set a default date just fine, but it won't show a date populated from a table now ...

[Davidk]

Re: Android and Cross Browser TextBox Date Picker

You need to follow the same process as in the original example. Android wants the date format as yyyy-MM-dd.

By using .populateControlsFromTable() you're populating your date control with a format of, for example, MM-dd-yyyy. Android doesn't understand and you get a console format warning... and a blank display in the control.

In the onRenderComplete event, after the browser has been established, save that value to a namespace variable. We'll use that in the List onSelect.

{dialog.Object}.__currBrowser = currBrowser;

Also, set up the Bound Date Control. In my case, my Bound Date Control is REPORTDATE. onRenderComplete in the example is already setting up DATE2... so just add another control...

if(currBrowser != 'Android'){
	//we are going to use jQuery datepicker for Date2 instead of the built-in calendar
	//have to escape the periods for jQuery... sheesh
	jQuery("#{dialog.ComponentName}\\.V\\.R1\\.DATE2").datepicker();
	jQuery("#{dialog.ComponentName}\\.V\\.R1\\.REPORTDATE").datepicker();
}else{
	$('{dialog.ComponentName}.V.R1.DATE2.CUSTOMBUTTONSTATIC.0').style.display="none";
	var dateEle = $('{dialog.ComponentName}.V.R1.DATE2');
	dateEle.setAttribute("type","date");

	$('{dialog.ComponentName}.V.R1.REPORTDATE.CUSTOMBUTTONSTATIC.0').style.display="none";
	var dateEle = $('{dialog.ComponentName}.V.R1.REPORTDATE');
	dateEle.setAttribute("type","date");
}

In your List onSelect event... test for the browser, then populate... but for Android include an onCallbackCompleteCode Javascript function.

var currBrowser = {dialog.Object}.__currBrowser;

switch(currBrowser){
	case 'Android':
		{dialog.Object}.populateControlsFromTable({dialog.Object}.getValue('LISTCUST'),false,'formatAndroidDate();');
		break;
	default:		
		{dialog.Object}.populateControlsFromTable({dialog.Object}.getValue('LISTCUST'));
}

The Javscript functions section will include...

function formatAndroidDate(){
	var objDate = new Date();
	var strDate = {dialog.Object}.getValue('ReportDate');
	objDate.fromFormat(strDate,'MM/dd/yyyy');
	var dfltDate = objDate.toFormat('yyyy-MM-dd');
	{dialog.Object}.setValue('ReportDate',dfltDate);
}

Here we get the date, a string, assign it to a date object, then send it back out again properly formatted for Android.