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:
Hi
One more to the list of useful work.Great!!!
Another useful and frequently required componenet.. Thanks once again for providing another useful component...
Hi...
One more useful component.. this component really helps alot... Good....hope v vl find des type of components frm u... thankssssss
Again good & useful stuff. It will sure help me to get rid use of external jQuery Calendar. Thanks :)
Simply Nice...
normally I just advise people change the year by typing a different year after picking a date.
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.
This is again a nice post . We have faced this kind of requirement many times.
Thanks
Hi Dear U provide us a lot new trends thanks
Good work bayya!
Thanks
Aslam, awesome as always! Everytime I think I have a weird request, you already have the answer. Are you in my brain?!? :)
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.
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 );
}
}
}
Good input, this helped us a lot. Great
Links to code do not work.
Very useful.Thanks a lot
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!
what are native components?
does it work in console?
thanks
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 + "........
I am using below one:
But date is showing 1998 to 1939.
I ant to show from 1998 to 2018
I am using below one:
But date is showing 1998 to 1939.
I ant to show from 1998 to 2018
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
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