How can i add date picker to my vm file?

[srinivasp]

I am trying to add JIRA date picker component and so followed the way you suggested in this post but i am gettng the followine error on my browser. Can you please advise?

Uncaught TypeError: Cannot read property 'DEF_DATE_FORMAT' of undefined

Javascript
----------
Calendar.setup({
		firstDay : 1,
		inputField : 'testdate',
		button : 'testdate-trigger',
		align : 'Br',
		singleClick : true,
		showsTime : true,
		useISO8601WeekNumbers : false,
		ifFormat : '%d.%m.%Y %H:%M'
	});
HTML
----
<input class="text medium-field" id="testdate" name="testdate" type="text"  />
					<a href="#" id="testdate-trigger" title="Select Date">
						<span class="aui-icon icon-date">Select Date</span>
					</a>

[carlos.fernandez · Accepted solution]

Hi,

Have you included the references to the scripts of the Calendar, or already included with Jira?

I think you forgot include de reference to the calendar language script.

Check if you have this two references in your velocity:

$webResourceManager.requireResource("jira.webresources:calendar")
$webResourceManager.requireResource("jira.webresources:calendar-en")

First is the calendar, second is the "language script", ("en" if you want English ;D), the property you try to access is included in language file.

hope that helps,

regards

Carlos

[srinivasp]

Hi Carlos, I thought the second reference is optional and so not included. Thanks for this pointer. I will include this now and update. Srinivas

[srinivasp]

Hi Carlos, This is working except the calendar image is not rendering on the browser.

Failed to load resource: the server responded with a status of 404 (Not Found)

http://spatruni-w520:2990/jira/s/en_USa7ltl8/665/1/1.0/_/calendar_menuarrow.gif

Could you please let me know how to change the dateFormat to dd/mm/yyyy?

Thanks in advance,

Srinivas

[carlos.fernandez]

Hi Srinivas, I can't find why this resource failed, in the forms made by Atlassian it also does too, but I haven't localized an error in any of the calendar images.

For the dateFormat try this:

Calendar.setup({
    inputField:"inputId",
    button:"triggerId",
    ifFormat:"%d/%m/%Y"
});

cheers,

Carlos

[srinivasp]

Hi Carlos, Date format is working now. I tried the same way before but it was not worked. The reason i found is due to browser cache. Anyway thanks for your advise. Regarding the calendar image, i found it loading by using the same class on other pages but not on this page. Strange..

[srinivasp]

Hi Carlos, I would like show the default date on the input box on page load.

Calendar.setup({	            	    	
firstDay : 1,
//dateText : dates.rDate,
inputField : rdId,
button : triggerId,
singleClick : true,
dragging : false,
showsTime : false,
date : dates.rDate,
useISO8601WeekNumbers : false,
daFormat : '%Y-%d-%m',
ifFormat : '%m/%d/%Y'
});

If i use the dateText option, it is giving me the following error.

Uncaught TypeError: Property 'getDateText' of object [object Object] is not a function

If i assign the date manually to the text box using the statement document.getElementById(rdId).value=dates.rDate, then the calendar instance is not properly initialising the default date.

Could you please let me know how to resolve this?

[srinivasp]

Hi Carlos, Any update please?

[carlos.fernandez]

Hi, I think we have a "time lag",

The dateText property is used to format the text of each cell of the calendar and must receive a function with two parameters (the date as first parameter and se day number as second) and will return the text of the cell, that isn't what you want, right?

The default date shown when the calendar opens, is set with the date property. You can set the input value as you say (document.getElementById) but in the same format that you setting up the calendar (dd/mm/YYYY).

[srinivasp]

Yes, i dont need that attribute. I am using ifFormat and daFormat attributes for handling the date format. Not sure whether both are required are not but I am using. Strange behavior i found here.. In the main page the Calendar menu icons are not rendered but in other pages it is rendered. Will there be any impact if i have many calendar instances on a single page(Ex: 100)?

[srinivasp]

On IE, i see this on console

SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited.

[carlos.fernandez]

We use many Calendars in the same page and we haven't got any problem yet.

Regarding the links, are you sure that this warning is for the Calendar?... but I think this is not very important thou.

[srinivasp]

I am also not sure about that but just a guess. Tried all possible ways for troubleshooting this but no luck. I think because of this error the calendar menu icon is not rendering. Since these calendar componets are building inside a complex logic, I checked the Id's of divs and triggers and found they are proper. In IE the icons are rendering only on first row but in FF & chrome none are rendering.