Salesforce Native DatePicker Year Extending Component

Saturday, April 23, 2011 by Aslam - The Alexendra
Hi All,
I developed one simple and useful component to extend Native Salesforce DatePicker. You all must aware of that we can't change Year list in datepicker and have to depend of salesforce native year list which is about -1 to +5 of current year. This is not useful on many situation like if i need to make one Date Of Birth field or any other date field where i need years range some high.



So i came up with simple component solution for this of your VF page. You simply need to include this in your VF page and use as following.

Sample Usage:
1) By using "lowerLimit" and "higherLimit"
<c:datepickerextend lowerlimit="10" higherlimit="15"/>
It will pick first year available in picker year list , for example 2010, and then add 10 earlier years to top of the picklist.
Same for higherLimit, it will pick last year available in picker year list, for example 2016, and then add 15 later years to bottom of the picklist.

2) By using "startYear" and "endYear
<c:datepickerextend startYear="1982" endYear="2020"/>
It will simply fill year list from 1982 to 2020.

Downloads
----------------------------------------------------
1) Component Code: Download from here
http://www.aslambari.com/datepick_extend/DatePickerExtend.txt

2) jQuery Lib: Download from here and save in static resource as datepicker_extend (You can you any jquery lib instead)
http://www.aslambari.com/datepick_extend/jquery-1.5.2.min.js

3) Demo Usage Code: Download from here
http://www.aslambari.com/datepick_extend/DemoUsageCode.txt


Working online demo:
You can view one simple demo, used following code:

<c:datepickerextend lowerlimit="10" higherlimit="5"/>

http://labsprojects-developer-edition.ap1.force.com/DatePickerExtendDemo


Provide your feedback as always. Enjoy !!!

Thanks
Aslam Bari

24 comments:

Unknown said...

Hi

One more to the list of useful work.Great!!!

Abhishek Pareek said...

Another useful and frequently required componenet.. Thanks once again for providing another useful component...

kanupriya said...

Hi...

One more useful component.. this component really helps alot... Good....hope v vl find des type of components frm u... thankssssss

Abdul Vahid said...

Again good & useful stuff. It will sure help me to get rid use of external jQuery Calendar. Thanks :)

Anonymous said...

Simply Nice...

grimview said...

normally I just advise people change the year by typing a different year after picking a date.

Anonymous said...

I really wish I had the dev chops to deploy this...we really need it. Anyone have a "for dummy's" version of how to deploy? Im not a dev but Im very interested in dipping my toe in the water.

Reena said...

This is again a nice post . We have faced this kind of requirement many times.

Thanks

Harsh Rolania said...

Hi Dear U provide us a lot new trends thanks

Venkata Narasimha Rao Vutla said...

Good work bayya!
Thanks

Mike said...

Aslam, awesome as always! Everytime I think I have a weird request, you already have the answer. Are you in my brain?!? :)

MAziz said...

Thank you for the component. I have a question, however. If I use your component on a page, how can I change the format of the date field? I am having an issue with the component and the French date format (dd/mm/yyyy). The component works fine with the format (mm/dd/yyyy) but it does not switch to the French format if the page's language is French. Even though the date selection window is displayed in French and using French month and day names.
Thank you in advance for your help.

sandeep said...

Hi MAziz I have a solution for your Problem I think that would be Useful for you.
You have to use a string which We got in input text box after any Date.
We have to convert this String in to Date according to locale of Logged in User as follows:-public date converedDate{get;private set;}
public string selectedDate{get;
set
{ if(value!=null || value != ''){
Integer month_num = Integer.valueOf(value.subString(0,value.indexOf('/', 0)));
Integer date_num = Integer.valueOf(value.subString(value.indexOf('/', 0)+1,value.indexOf('/',value.indexOf('/', 0)+1 )));
Integer year_num = Integer.valueOf(value.subString(value.indexOf('/', 0)+value.indexOf('/',value.indexOf('/', 0)+1 ),value.length()));
converedDate = date.newinstance(year_num , month_num ,date_num );
}
}
}

Anonymous said...

Good input, this helped us a lot. Great

Dimmys said...

Links to code do not work.

Anonymous said...

Very useful.Thanks a lot

Carney said...

Just a note that your attached jquery has a little added typo to the bottom of it -- a floating 'd' at the end of the file that produces javascript errors.

Thanks so much for posting this!

naidu said...

what are native components?

Anonymous said...

does it work in console?
thanks

Anonymous said...

You need to take out a syntax error that was showing endtYear as undefined on the chrome debugger console on page loads. Should be endYear (without the 't.'
// $("#calYearPicker").......... ++endtYear +"'>" + endYear + " .....
$("#calYearPicker")........... ++endYear +"'>" + endYear + "........

Anonymous said...

I am using below one:


But date is showing 1998 to 1939.

I ant to show from 1998 to 2018

Anonymous said...

I am using below one:



But date is showing 1998 to 1939.

I ant to show from 1998 to 2018

Anonymous said...

I am using below one:

c:datepickerextend startYear="1998" endYear="2018" (with in tag)

But date is showing 1998 to 1939.

I ant to show from 1998 to 2018

dinhpham said...

Thank you for the component. I have a question, however. If I use your component on a page, how can I change the format of the date field? Y8 Arcade
Yepi 2017
Friv 2017
Kizi Games
Y8 Games

Post a Comment