Deselect a day in Pikaday calendar

Hello! 

In a mobile app, on calendar by default there is always a day select as you can see on image above:


There is a way to get from this state to this:



Best Regards :)


Can you elaborate on why you're trying to do this? What's the purpose of deselecting the default date?

Also what version of the platform and Service Studio are you using?

G. Andrew Duthie wrote:

Can you elaborate on why you're trying to do this? What's the purpose of deselecting the default date?

Also what version of the platform and Service Studio are you using?

This is an app to manage vacations. So if i select a day (month view) and click on Cancel, i want that day will be deselected.
The version is 10.0.828.0.
Can you help me with this doubt?

So, I'm still not completely clear on the interaction pattern here. Is the idea that the user goes to the screen where the calendar is, selects a date range, and that's submitted as their vacation request? And they should be able to cancel? If so, the typical pattern would be for the cancel button to redirect them to another page.

A "Clear" button on the other hand, would make sense to clear the current selection.

Which are you trying to do?

Just to clarify...are you using an OutSystems calendar component, or a third-party library?

G. Andrew Duthie wrote:

Just to clarify...are you using an OutSystems calendar component, or a third-party library?

A "Clear" button on the other hand, would make sense to clear the current selection. - This is what i want to say when i wrote "So if i select a day (month view) and click on Cancel, i want that day will be deselected."

Yes, I'm using an Outsystems calendar component. 





I'm going to dig into this a little more...the underlying Pikaday JS object isn't exposed by default, but you may be able to clear the selected day by using JS to modify the CSS.

I won't have time to look at it until Monday, but you could start looking into the CSS route by opening the app in the browser-based emulator and using the browser dev tools (F12) to examine the rendered control markup.

So, I did some debugging and digging, and it appears that the underlying instance of the Pikaday calendar isn't exposed on the client side. So if you need to clear the date of the underlying control instance, you would need to clone the DatePicker (formerly Calendar) widget, and customize the implementation to make that possible.

You can, however, with a bit of JS in a JavaScript block in the button's OnClick client action, clear the control visually by removing the relevant CSS style classes:

   var calControl = document.getElementById($parameters.ControlID);

   var calButtons = calControl.getElementsByClassName("pika-button");

   var i;
   for (i = 0; i < calButtons.length; i++) {
       calButtons[i].parentElement.classList.remove("is-selected", "is-startrange", "is-inrange", "is-endrange");
   }

The code above works, but could probably be made cleaner and more elegant. Note that it only removes the visual indication of selection. If the user saves based on the value of the underlying control, they would still get the selected date value or range of the underlying control. 

You could also, when the clear button is clicked, prevent the user from saving by disabling the save button (if there is one) or setting a value that you could check before saving.