Hello Charul

I don't recall doing something similar to what you are asking, but the RichWidgets Calendar and the SilkUI Calendar widgets both have a Property called ButtonWidgetId. This property relates to the Id of a button that pops the calendar. You can name your From date label to like FromDateLnk and set the ButtonWidgetId property  to "FromDateLnk.id".

As for the number of days, you can add an expression and use de DateDiff built in function and send the ToDate and FromDate values

Let me know if this helped you

Regards,

Ângelo

Hi Charul,

You can go here for calendar widget as in attachment.

and you can use built in function DiffDays() to know the difference of days between 2 dates.

Hope this help.

Hi Charul, 

Since you're on a mobile app, if the input is of date type, when you run it on a device it will popup the native date picker of the operating system.

If you want to open it by clicking outside of the input itself, you should do something like the following.

• On the container or icon/image add an onclick event and add a new screen action
• On that action you should add a Javascript node. Something like the image below:
• You should pass the inputId as a parameter inside the js code
• Inside the js code, add document.getElementById($parameters.TextVar).click(); where $parameters.TextVar is your input parameter.

If you want to use the calendar itself, you should navigate to other screen where you would have the calendar widget. Upon click on a day on the calendar, navigate back to this screen.

Let me know if i worked

Cheers

Hi Charul

I did not realize you were talking about a mobile app

In that case, if the InputType of the Input Field is set to date, OutSystems automatically toggles the calendar, so you wouldn't need to use the widget.

If you really want to toggle the Calendar when you click the Label instead of the input, I would suggest you use a bit of JavaScript on the onclick event of the label. JavaScript isn't really my expertise, but I'm sure a quick google search will provide you the JavaScript you need. 

Regards,

Ângelo

Well, Henrique beat me to it lol

You should give his solution a go and mark it as solved if it solved  your problem, Charul

Regards,

Ângelo

Hello Charul,

No need to use any widget, just put input field with input type selected as 'Date'.

Refer below screenshot.

Hope this helps :)

Thanks and Regards,

Atul Patel

Hi Charul,

Make sure the input widget for your Date has a name (I'll consider it is InputDate for this example).

When you add the JavaScript tool to your Client Action flow, it will have this shown on the Properties section of Service Studio (numbers refer to the bullet points after the screenshot):

1. On the name type OpenPicker
2. On the JavaScript property, click on the ellipses (...) icon to open the expression editor and type document.getElementById($parameters.TextVar).click();
   • Still on the expression editor, Add Input Parameter and on its name type TextVar (this name needs to match the one found on the javascript code right after $parameters.).
   • You can now close the expression editor by clicking Done.

3. On the input parameters section of the JavaScript tool you will now have a TextVar property between the JavaScript property and the (New Argu... one. Type InputDate.Id as the value ofTextVar.

Hope this helps clarify Henrique's solution.

You would have to do this for each of your icons that you want to trigger the native date picker.

As for the total number of days can be calculated with the DiffDays function, as Ângelo mentioned.

Thank you all for your responses. I have tried the solution but still I am getting the error, and here are my screenshots:

This is the error:

Please suggest.

You are passing DateVar instead of DateVar.Id:

Sorry, you're right... because it should be Input_DateVar.Id, as per my instructions...

and

Like you may have read in Henrique and others answers, this only works if your Input widget's Input Type is set to the Date data type, that's what'll bind it to the native date picker.

Hi Charul,

Are you testing on a device or on the browser? Do you have any javascript errors?

Cheers

I was testing it on browser... But when I tested it in my mobile..I was shocked and happy at the same time..it worked. Thanks to all who contributed in my query.

I am having one issue of showing the difference between the dates as you all suggested but I cannot find the built in function ShowDiff().

The calendar is opening on my input field as well as on the click of my image. Is this correct ?

Hi Charul,

Ok, I don't have a good answer for you.

The only thing that i can remember id putting a transparent container on top of your input, something similar to what's being done with the button on this example.

Cheers

Hello Charul,

Please check attached image to get it done.

Add Calendar widget with Icon beside it and set Calendar input trigger with that Icon and set input property

onkeypress: "return false;"

same case with me ,I am trying to open calendar on icon click, I am able to get the calendar on the click of icon in mobile(as I open website url in mobile chrome browser.) but not on my desktop browser ,not sure what is the issue.

Thanks,