Open Calendar on click of a button

Open Calendar on click of a button

  

Hello,

I would like to build something like this: 


On click of calendar image in "From Date:", the calendar should open and the selected date should be displayed in the input field to the left of that image. The same should happen in the "To Date: ". Also, the number of days should be displayed in the third row "Total leaves". 

Please suggest.

Thanks.

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

Ângelo Sousa wrote:

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

Hey,

Thanks for your response.

I cannot find the property in the widget. I have used the Calendar widget from MobilePatterns/Interactions/Calendar. Can you assist me some more ?


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

Suraj Borade wrote:

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.

I am not adding any plugin but want to use the built-in calendar widget. And I am getting the problem in opening the calendar on the click of an image.


Henrique Batista wrote:

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

Hey Henrique,

Thanks for your reply. 

But my issue is still not solved. I am on a mobile app. I assume that you have seen the screenshot I have given. I want to open a calendar on click of an image on the same screen. I am not navigating on a new screen. Also, I am not having any input or output parameters.

Kindly help.


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

Charul Mathur wrote:

Henrique Batista wrote:

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

Hey Henrique,

Thanks for your reply. 

But my issue is still not solved. I am on a mobile app. I assume that you have seen the screenshot I have given. I want to open a calendar on click of an image on the same screen. I am not navigating on a new screen. Also, I am not having any input or output parameters.

Kindly help.


Hi Charul,

As I and Angelo said:

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 a date picker (Native Calendar) on click of an image, I just gave you a solution for it.

Can you detail why the solution doesn't work?

Cheers

Henrique Batista wrote:

Charul Mathur wrote:

Henrique Batista wrote:

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

Hey Henrique,

Thanks for your reply. 

But my issue is still not solved. I am on a mobile app. I assume that you have seen the screenshot I have given. I want to open a calendar on click of an image on the same screen. I am not navigating on a new screen. Also, I am not having any input or output parameters.

Kindly help.


Hi Charul,

As I and Angelo said:

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 a date picker (Native Calendar) on click of an image, I just gave you a solution for it.

Can you detail why the solution doesn't work?

Cheers

Hi Henrique,

As you said, I have added an onClick Event but I dont want to navigate it to another screen. I want to open the calendar on the same screen itself. In that onClick event, I have added a Javascript node but I am not having any input parameter or expression to add in that.


Charul Mathur wrote:

Henrique Batista wrote:

Charul Mathur wrote:

Henrique Batista wrote:

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

Hey Henrique,

Thanks for your reply. 

But my issue is still not solved. I am on a mobile app. I assume that you have seen the screenshot I have given. I want to open a calendar on click of an image on the same screen. I am not navigating on a new screen. Also, I am not having any input or output parameters.

Kindly help.


Hi Charul,

As I and Angelo said:

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 a date picker (Native Calendar) on click of an image, I just gave you a solution for it.

Can you detail why the solution doesn't work?

Cheers

Hi Henrique,

As you said, I have added an onClick Event but I dont want to navigate it to another screen. I want to open the calendar on the same screen itself. In that onClick event, I have added a Javascript node but I am not having any input parameter or expression to add in that.


Hello Charul,


You would have to manually add the Input Parameters to your Javascript node, which could be accessed like $parameters.TextVar.


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.

  1. 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:

  1. 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.

Jorge Martins wrote:

You are passing DateVar instead of DateVar.Id:

  1. 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.

The property is not expecting "DateVar.Id". Error: "Invalid Expression
Unknown object 'Id' in expression."


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

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

and

  1. 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.


Jorge Martins wrote:

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

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

and

  1. 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.


Yes, I have given this value.

One more issue: Is it mandatory to have the inputType of my input Widget as "Date" type or it will work with Text type ? Because right now I have input type as Text and its not opening the calendar. 


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.

Jorge Martins wrote:

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.

Setting input type to Date on my input widget is opening the native date picker on the input area but not on the clicking of image. I have linked the image to an client action on which I have done that Javascript node work.

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 function to calculate the difference between two dates is DiffDays. You can use it in an Expression if you want to display its outcome: 

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

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

Charul Mathur wrote:

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

Wasn't this what you wanted?

Henrique Batista wrote:

Charul Mathur wrote:

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

Wasn't this what you wanted?

I wanted to open the calendar just on the image click and set the date obtained on the input area.


Charul Mathur wrote:

Henrique Batista wrote:

Charul Mathur wrote:

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

Wasn't this what you wanted?

I wanted to open the calendar just on the image click and set the date obtained on the input area.


What's the purpose? Why only on the image? As a user I should be able to click on both places..

Henrique Batista wrote:

Charul Mathur wrote:

Henrique Batista wrote:

Charul Mathur wrote:

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

Wasn't this what you wanted?

I wanted to open the calendar just on the image click and set the date obtained on the input area.


What's the purpose? Why only on the image? As a user I should be able to click on both places..

Yes you are right but its the requirement of my app. I just want to enable it on image click.


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

Henrique Batista wrote:

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

No issues. Thanks for your help.


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;"