Datepicker - Change Year

[Simon Demming, modificado 7 Anos atrás.]

Hello everyone,

I am using the AUI DatePicker to let a user select a date. The users might want to select a date back in 1904 without having to click 1344 times, which is why I want to add buttons to navigate through the years.
The following code gives me two buttons, which achieve the desired functionality. Unfortunately I have no idea how to style them properly and position the buttons to the left and to the right of the existing prev/next month buttons. I have a hard time finding information about the keys/values I can use inside the DatePicker configuration.

AUI({lang: 'de'}).use('aui-datepicker', function(A){
    		var datepicker = new A.DatePicker(
    			{
    				trigger: '#datepicker',
    				mask: '%d-%m-%Y',
    				popover: {
    					zIndex: 1,
	    				toolbars: {
	    					body: [[
	    						{
	    							label: 'prev-year',
	    							on: {
	    								click: function() {
	    									datepicker.getCalendar().subtractYear();
	    								}
	    							}
	    						},
	    						{
	    							label: 'next-year',
	    							on: {
	    								click: function() {
	    									datepicker.getCalendar().addYear();
	    								}
	    							}
	    						}
	    					]]
	    				}
	    			}
    			}
    		);
    	});

All the code is used inside a freemarker template, but I don't see any relevance to that. Does anybody have an idea, on how to place the buttons adjacent to their month button equivalents?

The result currently looks like this:



Best greetings and thank you in advance
Simon Demming

[Travis Cory, modificado 7 Anos atrás.]

Hello Simon,

The Liferay javascript object has access to the LanguageUtil, so you are in luck! Replace your current label attributes with

{
	...
	label: Liferay.Language.get('previous-year'),
	...
},
{
	...
	label: Liferay.Language.get('next-year'),
	...
}

This will use the Liferay LanguageUtil to detect the portal language id and then grab the correct text from the language properties.

[Simon Demming, modificado 7 Anos atrás.]

Hello Travis,

Thank you very much for your quick reply.
Unfortunately I am not looking for a way to localize the label on the buttons. Instead I would like to use Icons instead and move them to the same row as the existing buttons for navigating the months.

The desired appearance would look something like below:

The double arrows would navigate the years, the single ones the months. Is there a way to accomplish this just by using the configuration, or would modifying the datepicker widget be necessary?

Thank you and greetings
Simon

[Víctor Ponz, modificado 7 Anos atrás.]

You can do it with a little js . After the Datepicker has been loaded, move the dom nodes to the location you want to place them or you can try with widget-position-align.
Also, you can take a look at http://yuilibrary.com/yui/docs/node/node-insert.html

Hope it helps you

[Simon Demming, modificado 7 Anos atrás.]

Thanks for the suggestion. I will have a closer look into DOM manipulation after the weekend.

The problem I am seeing is that the calendar elements only get loaded into the DOM after clicking the input field where the date will be displayed...

Greetings
Simon