Always start AEM Coral UI Datepicker with Today's dat...

[nayeemnshaikh]

We have AEM Coral UI Datepicker on page properties.
The Datepicker field may have some existing saved value. For example 2018-01-01
So when we click on Datepicker icon, the Datepicker's Calendar starts with the already existing date (2018-01-01).
The problem here is that if the user wants to change the date, as we have the min date as today, the user needs to manually click on the Calendar's right arrow several times to reach today's date which is not a good user experience.
We checked the Coral UI docs and didn't any API method to set the Datepicker's Calendar start Date or to always start the Datepicker's Calendar with today's date when we already have some existing date value in the datepicker field.
Please note stetting the min date will only disable the past dates but the calendar will start form the existing date instead of today's date.
Or can we at least add Today's button on the calendar like other date picker, on click of which will directly takes us to today's date.
Any example / reference /  sample code / demo would be for great help. Thanking you.

[Asutosh_Jena_ · Accepted solution]

Hi @nayeemnshaikh 

Please create an extra clientlib which will be loaded only for this dialog(using extraClientlibs property on cq:dialog) on authoring mode and add the below peice of code:

(function ($, $document) {
    $document.on("dialog-ready", function () {
        var d = new Date();
        $('coral-datepicker[name="./date"]').attr("value", d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate()); //set current date
    });
})($, $(document));

Highlighted name in the above code should exactly match with your name attribute of the field in dialog.

This will set the current date as the value in the date field when you open the dialog and the same will be used in calendar as well.

If you do not want the date field to be updated immediately when you open the dialog, and should be updated only when you click on the calendar button then use the below piece of code only:

(function ($, $document) {
    $(document).on("click", "coral-datepicker ._coral-InputGroup-button", function (e) {
        e.stopPropagation();
        e.preventDefault();

        var d = new Date();
        $('coral-datepicker[name="./date"]').attr("value", d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate()); //set current date
    });
})($, $(document));

For min date, you will need to use the "minDate" as "today" in dialog.

Update on 4/20:

(function ($, $document) {
    $(document).on("click", "coral-datepicker ._coral-InputGroup-button", function (e) {
        e.stopPropagation();
        e.preventDefault();

        var date = new Date();
        var today = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
        $('coral-calendar._coral-Calendar').attr("value", today); // set the current date to datepicker overlay
    });

    $(document).on("click", "coral-calendar._coral-Calendar ._coral-Calendar-body .is-today", function (event) {
        event.stopPropagation();
        event.preventDefault();

        var currentDate = $("coral-calendar._coral-Calendar ._coral-Calendar-table .is-today").attr("data-date");
        $('coral-datepicker[name="./date"]').attr("value", currentDate); // set the current date to input field on click of current date within the date picker overlay.
    })

})($, $(document));

Hope this helps and meets all your requirments!

Let me know if I missed anything.

Thanks

[nayeemnshaikh]

Thank you for your response. 
But this will also change the Datepicker's value to today's date when we click on Datepicker icon.
What we are trying to do is, when there is already an existing value on the Datepicker's field and when the user click's on the Datepicker icon, by default the Datepicker's Calendar starts from an existing value present on the Datepicker field.
Instead of default behavior, we want to start the Datepicker's Calendar from Today's date as we have set the min date to today.
So when the user click's on the the Datepicker's Calendar icon, the Calendar should start from Today's Date instead of default existing date value.
And the Datepicker's value should not change, unless the user select any date on the Calendar.

[Asutosh_Jena_]

@HI @nayeemnshaikh 

Here is a video for the demo. Please watch the first part and confirm if this is what you are expecting except the date change.

https://www.screencast.com/t/d2AXUyAug7v

Thanks!

[nayeemnshaikh]

Video link please. Thanks

[nayeemnshaikh]

Hello asutosh_jena,
Thank you soo much for the video link. 
Partially Yes.
Existing date present on the Datepicker field will be a past date.
The date on the Datepicker field should change only when the user select's any date on the Calendar.
The date on the Datepicker field should NOT change when the user clicks on Datepicker's Calendar icon.
On click on the Datepicker's Calendar icon, the Datepicker's Calendar should always start with today's date.
Thanking you

[Asutosh_Jena_]

Hi @nayeemnshaikh 

Please see comment for each of the item:

Existing date present on the Datepicker field will be a past date -> This will be working fine. When you open the datepicker, past date will be there until the datepicker is clicked.

The date on the Datepicker field should change only when the user select's any date on the Calendar -> date field and the date picker are dependent on each other and it's driven based on the value. It will not be possible to change the value at one place without changing the value at other place. When user selects the date from datepicker, the field value should be updated so we cannot break the relationship.
The date on the Datepicker field should NOT change when the user clicks on Datepicker's Calendar icon -> date field and the date picker are dependent on each other and it's driven based on the value. It will not be possible to change the value at one place without changing the value at other place.
On click on the Datepicker's Calendar icon, the Datepicker's Calendar should always start with today's date -> This is working as expected as shown in the video.

Using the below code will match most of the use case:

(function ($, $document) {
    $(document).on("click", "coral-datepicker ._coral-InputGroup-button", function (e) {
        e.stopPropagation();
        e.preventDefault();

        var d = new Date();
        $('coral-datepicker[name="./date"]').attr("value", d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate()); //set current date
    });
})($, $(document));

I will still give a try to see if this really can be achieved with less amount of custom coding.

Thanks! 

[nayeemnshaikh]

Hello asutosh_jena,
Thank you very much for your response. 
The problem is the Existing date present on the Datepicker field will always be a past date ( at least a year back ).
And the min date is always Today's date. For example 2018-01-01 is an existing date, here the user has to manually click on the Calendar's right arrow icon several times to select a future date which is NOT a good user experience.
And also there is NOT 'Today' button present, like other date picker's have, on click of which it takes us directly to Today's date.
Can't we not scroll the Calendar to Today's Date using js without changing the Datepicker's field value unless a date is selected on the Calendar.
Thanking you.

[Asutosh_Jena_]

Hi @nayeemnshaikh 

Let me try it out one more time and see if it can be achieved. I will keep posted on my findings!

Thanks

[Asutosh_Jena_]

Hi @nayeemnshaikh 

Finally here we go with the solution!

(function ($, $document) {
    $(document).on("click", "coral-datepicker ._coral-InputGroup-button", function (e) {
        e.stopPropagation();
        e.preventDefault();

        var date = new Date();
        var today = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
        $('coral-calendar._coral-Calendar').attr("value", today); // set the current date to datepicker overlay
    });

    $(document).on("click", "coral-calendar._coral-Calendar ._coral-Calendar-body .is-today", function (event) {
        event.stopPropagation();
        event.preventDefault();

        var currentDate = $("coral-calendar._coral-Calendar ._coral-Calendar-table .is-today").attr("data-date");
        $('coral-datepicker[name="./date"]').attr("value", currentDate); // set the current date to input field on click of current date within the date picker overlay.
    })

})($, $(document));

Existing date present on the Datepicker field will be a past date -> This will be working fine. When you open the datepicker, past date will be there until the datepicker is clicked. The same will be applicable for future date as well. You can select a future date but youc cannot select a past date.

The date on the Datepicker field should change only when the user select's any date on the Calendar -> This will work after adding the above code.
The date on the Datepicker field should NOT change when the user clicks on Datepicker's Calendar icon ->This will work after adding the above code. Date will not change in the field until unless it's updated in date picker by clicking on any date.
On click on the Datepicker's Calendar icon, the Datepicker's Calendar should always start with today's date -> This is working.

Here is a short video of it:

https://www.screencast.com/t/ncy2azvn

Let me know if you see anything is not working as expected.

Thanks!

[nayeemnshaikh]

Hello asutosh_jena,
Thank you soo much for your time and solution. Really appreciate.

Almighty GOD Bless you.

I also tried the same and below are the changes.

Request you to please verify. It is almost same.

// On ready	
var dateEle = $('coral-datepicker[name="./date"]');	
Coral.commons.ready(dateEle, function(){
	setDateCalendarValue();
});	

function setDateCalendarValue() {
	var dateCalendarBtn = $('coral-datepicker[name="./date"] div.coral-InputGroup-button button');
	dateCalendarBtn.get(0).trigger('click'); // Calendar gets loaded into the DOM on first click of Calendar icon.
    var dateCalendarEle = $('coral-datepicker[name="./date"] coral-popover div.coral3-Popover-content coral-popover-content coral-calendar');	// Using this syntax as we have multiple date pickers
    dateCalendarEle.get(0).valueAsDate = 'today';
	dateCalendarBtn.get(0).trigger('click');	// To hide the Calender again.
}	

[Asutosh_Jena_]

@nayeemnshaikh That's great!

I do not see setReviewedDateCalendarValue() function defined anywhere. Also where setDateCalendarValue() function is used?

Is this the complete code or anything is missing here?

Thanks!

[nayeemnshaikh]

Hello asutosh_jena,

Sorry for the typo.

Have corrected it.

Thank you for catching it.