Pikaday - can't choose prev next year

when using the OutSystems UI Web DatePicker widget, and the user wishes to use the year picker, they can never choose the next/prev year since its used to toggle to the next/previous years.

Is there some config where this can be enabled?

Hi Steve,

DatePicker component using a GitHub project named PickADay
https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Web_Patterns/Controls/DatePicker

https://github.com/Pikaday/Pikaday

It may have a property to enable/disable navigation buttons. You can set it with AdvancedFormatJSON property.

Hope it helps.

With best regards,
F.Karatay

Ferhat Karatay wrote:

Hi Steve,

DatePicker component using a GitHub project named PickADay
https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Web_Patterns/Controls/DatePicker

https://github.com/Pikaday/Pikaday

It may have a property to enable/disable navigation buttons. You can set it with AdvancedFormatJSON property.

Hope it helps.

With best regards,
F.Karatay

Thanks Ferhat.  I usually try to find the solution within the source first. i've been over these sources quite a few times but can't see anything related to my question, so i thought i'd ask the community ... can't believe no-one came across this before. you literally can't select the previous or next year as a value.


Solution

Steve Bramley wrote:

Ferhat Karatay wrote:

Hi Steve,

DatePicker component using a GitHub project named PickADay
https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Web_Patterns/Controls/DatePicker

https://github.com/Pikaday/Pikaday

It may have a property to enable/disable navigation buttons. You can set it with AdvancedFormatJSON property.

Hope it helps.

With best regards,
F.Karatay

Thanks Ferhat.  I usually try to find the solution within the source first. i've been over these sources quite a few times but can't see anything related to my question, so i thought i'd ask the community ... can't believe no-one came across this before. you literally can't select the previous or next year as a value.


Hi Steve,

I tried to achieve your goal and I found a solution.
Basically, we should override the base javascript functionality of date picker.

1. Go to date picker component and copy base javascript

2. Go to your destination screen and paste base javascript to page javascript property

3. Base javascript has a for each function line 1319

4. Delete next-year and prev-year definitions. They must be empty like '' That function adds class to the element and make them disabled.

Here is the result;


Hope it helps.

With best regards,
F.Karatay

Solution

yeah that's great.  thanks Ferhat.worked fine.  just for anyone not quite sure on that last step:


for (i = minYear; i <= maxYear; i++) {
                    arr.push('<button type="button" data-year="' + i 
                    + ((isMinYear && i < opts.minYear) || (isMaxYear && i > opts.maxYear) ? 'disabled="disabled"' : '')
                    + '" class="pika-button pika-year' 
                    + ((isMinYear && i < opts.minYear) || (isMaxYear && i > opts.maxYear) ? ' is-disabled' : '')
                    + (i === curYear ? ' is-selected': '') 
                    + (i === minYear ? ''/* prev-year'*/ : '') + (i === maxYear ? ''/* next-year'*/ : '') + '"'
                    + (i === curYear ? 'aria-selected="true"' : 'aria-selected="false"') + '>'
                    + (i) + '</button>');
                }