Styling DateItem for mobile devices

[Developer12145]

Hi Isomorphic,

I want to make our Application mobile friendly. I have two Items in a DynamicForm, a DateItem and a TextAreaItem as a comment-box, as shown in Picture 1.


Picture 1


1. If I use the following Code, and I click, for example on "day", then I can choose the day like in Picture 2. When I click on the date-picker I can choose the date like in Picture 3. I think thats neither handy, nor really pretty, so I tried the approach under 2.

  
 statusAfterDateDI = new DateItem("dateItem") {
                {

                    setTitle("Datum");
                    setAlign(Alignment.CENTER);
                    setTextAlign(Alignment.CENTER);
                    setUseTextField(false);
                    setShowPickerIcon(true);
                    setSelectorFormat(DateItemSelectorFormat.DAY_MONTH_YEAR);

                }
            };

Picture 2



Picture 3


2. I changed the Code to the following, with the results shown in Picture 4 and 5. This is more like what I want to accomplish, but I can't imagine, that it is right to set "Browser.setIsDesktop(true);" in an mobile environment, isn't it? Or is in this case "Browser.setIsDesktop(true)" only applied to this DateItem, or would that be applied globaly?
Is it possible to get this look without "Browser.setIsDesktop(true)" on a mobile device?

statusAfterDateDI = new DateItem("dateItem") {
                {

                    setTitle("Datum");
                    setAlign(Alignment.CENTER);
                    setTextAlign(Alignment.CENTER);
                    setUseTextField(false);
                    setShowPickerIcon(true);
                    setSelectorFormat(DateItemSelectorFormat.DAY_MONTH_YEAR);
                    Browser.setIsDesktop(true);

                }
            };

Picture 4



Picture 5

3. As an alternative, I tried the below code with the results shown in Picture 6 and 7. This is kind of what I really was looking for, but the docs for "setBrowserInputType" mention the following:

NOTE: This feature requires specific CSS changes. Currently these changes have been made to the Enterprise, EnterpriseBlue, and Graphite skins only.

How is it about Tahoe and Stratus? Will there be changes to those skins as well soon? If yes, I would prefer to use this implementation.

statusAfterDateDI = new DateItem("dateItem") {
             {

             setTitle("Datum");
             setAlign(Alignment.CENTER);
             setTextAlign(Alignment.CENTER);
             setBrowserInputType("date");
             setUseTextField(true);

             }
             };

Picture 6



Picture 7

4. In 1., 2., and 3. it was not able to make the DateItem as wide as the TextAreaItem even with "setWidth100()". Is there a way to enlarge the selectItems for day, month, year with or without the pickerItem so that it is as wide as the screen on different Display sizes?


Setup:
SmartClient Version: v11.1p_2018-05-30/PowerEdition Deployment (built 2018-05-30)
Browser: Cordova WebView for Android and iOS
All Pictures were taken on a Android Phone.


Thanks in advance,

Best Regards

[Isomorphic]

Thanks for the detailed description(s). It sounds like the ideal resolution for you is to simply use browserInputType (#3 from your list of questions). This should be fine for you - the warning in the documentation about certain skins not supporting browserInputType is stale and this configuration should look fine in Tahoe and Stratus.
We'll make sure the documentation gets updated to reflect this (and as always, please let us know if you do see any styling problems).

I think this renders the rest of the issues here moot, but let us know if you'd like us to respond to them directly

Regards
Isomorphic Software

[claudiobosticco]

Hello Developer12145 on handset devices I find more handy something like that:

...
            name: "DATE_OF_Birth",
            usePlaceholderForHint: false,
            editorType: "DateItem",
            showPickerIcon: false,
            useTextField: true,
            useMask: true,
            mask: "##/##/####",
            hint: "mm/dd/yyyy",
            showHintInField: true,
            textFieldProperties: {
              browserInputType: "tel"
            }
....