Using xtype datefield not to select past date in CQ5 | Community
Skip to main content
October 16, 2015
Solved

Using xtype datefield not to select past date in CQ5

Please help me how to set minvalue as current date in xtype datefield.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
JitendraBansalAccepted solution
Level 2
October 16, 2015

You need to write custom js and listeners to implement this.

(1) Create a js function to compare dates:\

/**
*Compares dates and return values in 0,-1,1,2
**/
MyUtility.compareDate = function(a_dateOne ,a_dateTwo)
{                       var returnVal = 'default';
                        var l_dateOne;
                        var l_dateTwo;
                            l_dateOne = a_dateOne.split('/');
                            l_dateTwo = a_dateTwo.split('/');                      
                        if(l_dateOne[2] == l_dateTwo[2] && l_dateOne[1] == l_dateTwo[1] && l_dateOne[0] == l_dateTwo[0]){
                            returnVal = 0;
                        }
                        else if(l_dateOne[2] > l_dateTwo[2]){
                            returnVal = 1 ;
                        }else if(l_dateOne[2] == l_dateTwo[2]){
                            if(l_dateOne[1] > l_dateTwo[1]){
                                returnVal = 1;
                            }else if(l_dateOne[1] == l_dateTwo[1]){
                                if(l_dateOne[0] > l_dateTwo[0]){
                                    returnVal = 1;
                                }else{
                                    returnVal = -1;
                                }
                            }else{
                                returnVal = -1;
                            }
                        }else{
                            returnVal = -1;
                        }
                        return returnVal;
}

(2) Call this function using CQ listeners beforeSubmit event.

function(){
var currentDate = new Date();
currentDate=currentDate.format("d/m/y");
var eventDate=this.findByType('datefield')[0].getDateValue();
var event_year = new Date(eventDate).getFullYear();
var current_year = new Date(currentDate).getFullYear();

if(currentDate!=null)
{
    eventDate=eventDate.format("d/m");
    currentDate=currentDate.format("d/m");
    eventDate = eventDate.concat("/"+event_year);
    currentDate = currentDate.concat("/"+current_year);
    var l_expirationDateCheck=MyUtility.compareDate(eventDate,currentDate);
    if(l_expirationDateCheck==1)
                    {
                     var msg = CQ.I18n.getMessage("Selected Date cannot be less than current date");
                        CQ.Ext.Msg.show({
                            "title": CQ.I18n.getMessage("Error Message"),
                            "msg": msg,
                            "buttons": CQ.Ext.Msg.OK
                        });
                        return false;
                    }
}
}

5 replies

JitendraBansalAccepted solution
Level 2
October 16, 2015

You need to write custom js and listeners to implement this.

(1) Create a js function to compare dates:\

/**
*Compares dates and return values in 0,-1,1,2
**/
MyUtility.compareDate = function(a_dateOne ,a_dateTwo)
{                       var returnVal = 'default';
                        var l_dateOne;
                        var l_dateTwo;
                            l_dateOne = a_dateOne.split('/');
                            l_dateTwo = a_dateTwo.split('/');                      
                        if(l_dateOne[2] == l_dateTwo[2] && l_dateOne[1] == l_dateTwo[1] && l_dateOne[0] == l_dateTwo[0]){
                            returnVal = 0;
                        }
                        else if(l_dateOne[2] > l_dateTwo[2]){
                            returnVal = 1 ;
                        }else if(l_dateOne[2] == l_dateTwo[2]){
                            if(l_dateOne[1] > l_dateTwo[1]){
                                returnVal = 1;
                            }else if(l_dateOne[1] == l_dateTwo[1]){
                                if(l_dateOne[0] > l_dateTwo[0]){
                                    returnVal = 1;
                                }else{
                                    returnVal = -1;
                                }
                            }else{
                                returnVal = -1;
                            }
                        }else{
                            returnVal = -1;
                        }
                        return returnVal;
}

(2) Call this function using CQ listeners beforeSubmit event.

function(){
var currentDate = new Date();
currentDate=currentDate.format("d/m/y");
var eventDate=this.findByType('datefield')[0].getDateValue();
var event_year = new Date(eventDate).getFullYear();
var current_year = new Date(currentDate).getFullYear();

if(currentDate!=null)
{
    eventDate=eventDate.format("d/m");
    currentDate=currentDate.format("d/m");
    eventDate = eventDate.concat("/"+event_year);
    currentDate = currentDate.concat("/"+current_year);
    var l_expirationDateCheck=MyUtility.compareDate(eventDate,currentDate);
    if(l_expirationDateCheck==1)
                    {
                     var msg = CQ.I18n.getMessage("Selected Date cannot be less than current date");
                        CQ.Ext.Msg.show({
                            "title": CQ.I18n.getMessage("Error Message"),
                            "msg": msg,
                            "buttons": CQ.Ext.Msg.OK
                        });
                        return false;
                    }
}
}

Translate
Sham_HC
Level 10
October 16, 2015
smacdonald2008
Level 10
October 16, 2015

The following AEM topics discuss this subject:

http://dev.day.com/docs/en/cq/current/developing/widgets/xtypes.html

http://dev.day.com/docs/en/cq/current/widgets-api/index.html?class=CQ.Ext.form.DateField

To learn how to build a component using xtypes and hook that into the sidekick - please see this community article:

http://helpx.adobe.com/adobe-cq/kb/creating-cq-widget-supports-image.html

hope this helps you

Translate
October 16, 2015

Thanks Sham HC for your help.

But I want to write javascript under listeners node based on xtype datefield. (not on datetime xtype).

Translate
October 16, 2015

JavaScript code:Xtype Datefield
                            validator="function(){var curDate = new Date();var enterDate=new Date(this.value);var dd1 = enterDate.getDate();var mm1 = enterDate.getMonth()+1;var yyyy1 =enterDate.getFullYear();var newdate1 = mm1 + '/' + dd1 + '/' + yyyy1;var enterNewDate=new Date(newdate1);var curdd=curDate.getDate();var curmm=curDate.getMonth()+1;var curyy=curDate.getFullYear();var currentFmtDate=curmm+'/'+curdd+'/'+curyy;var currentNewDate=new Date(currentFmtDate);return (currentNewDate<= enterNewDate);}"
                         

Translate