How i can add Date picker to Jira Gadget

[satya L]

Hi,

I want to add Date Picker to my Customized Jira Gadget, Can any one please help me ..

Thanks in Advance ..

Satya.

[Paul Pasler · Accepted solution]

Hi satya,

after reading the othre answers, I did it like this:

this is a field in config:

{
       id: "from_datepicker",
       userpref: "from",
       label: "__MSG_project-monitoring-gadget.from.label__",
       description: "__MSG_project-monitoring-gadget.from.description__",
       type: "callbackBuilder",
       callback: function(parentDiv){
           parentDiv.append(
               AJS.$("<input/>").attr({
                   id: "from-datepicker",
                   type: "text",
                   name: "from-datepicker",
                   class: "text"
               }).val(gadget.getPref("from"))
           );
           parentDiv.append(
               AJS.$("<button />").attr({
                   id: "from-datepicker-trigger",
                   type: "button",
                   class: "aui-icon icon-date"
               }).val("date")
           );
		Calendar.setup({
				firstDay : 1,
				inputField : 'from-datepicker',
				button : 'from-datepicker-trigger',
				align : 'Br',
				singleClick : true,
				showsTime : true,
				useISO8601WeekNumbers : false,
				ifFormat : '%d.%m.%Y'
		});
   	}
   },

I've added some resources (the calendar.css by hand):

<web-resource key="util">
	<dependency>jira.webresources:calendar</dependency>
	<dependency>jira.webresources:calendar-en</dependency>		
	<resource type="download" name="calendar.css" location="css/calendar.css" />				
</web-resource>

If anyone is interested :)

[Jayashree Shetty]

Hi Paul. I am too developing a gadget wherein i require a date picker. How can i add date picker?i have downloaded the jquery-ui-1.10.3 files and placed it in folder "src\main\resources\jquery" and this folder has files like css, js and development bundle. I have included the html related code as given abobe in my xml file. I have added the resources as mentioned. But a get an error while running the code. How to fix it> Can you please provide step by step to achive this.

Regards

jayashree

[Bruno Conde]

Hi Paul,

This ansewer helped my a lot, specially the part of the manually added calendar.css.

Thanks.

Bruno Conde.

[Quan Jiang]

Hi Paul,

How to save the value of picked date? Is it saved to the userPref?

[srinivasp]

Hi Paul, Thanks for your answer. Can we disable all days except one day on date picker?

[Aleksandr Zuevich]

@Quan Jiang, it's too late for the answer, but maybe somebody find it later: it's very important the name of the input field matches the UserPref name

[Radek Kantor]

Hi, I create Date Picker in my .vm template, so it should be possible in Gadget too.

1. You need import callendar resource (second for localization, not needed)

WebResourceManager.requireResource("jira.webresources:calendar");		
WebResourceManager.requireResource("jira.webresources:calendar-" + getLocale().getLanguage());

2. Create Html input element (date view input), where name value must be the same as inputField value in Callendar javascript.

3. Create Html link to trigger callendar popup, id = button value in Callendar javascript.

4. Configure other callendar parameters, as position, format, ...

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

[satya L]

Thanks Xrakan ..

will try this

[satya L]

Thnx Xrakhan for your response..

But how i can create it in Gadget, ie ., How i can make use of above code in Gadget configuration file (ie., Gadget.xml), because in Gadget.xml i dont think it allows us to create "Html elements"and as per my knowledge, whatever the fileds we would like to create in Gadget we are adding it as userPref as like below.

<UserPref name="projectOrFilterId" datatype="hidden" />
<UserPref name="startDate" datatype="hidden"/>
<UserPref name="endDate" datatype="hidden"/>

Can you please share sample Gadget code(Gadget.xml) in which DatePicker was configured, if you have any such ..

[Justin Shapiro]

There are a couple jquery-ui files missing but if you add them as a resource you can use the jquery-ui datepicker in your gadget.

You could add acustom field like:

var dateField = function(gadget, label, userPref)
{
    return {
                userpref: userPref,
                id: "dateField-picker-" + userPref,
                label: label,
                description: "Choose a date.",
                type: "callbackBuilder",
                callback: function(parentDiv){
                    parentDiv.append(
                        jQuery("<input/>").attr({ id: "dateField-" + userPref, type: "text", name: userPref }).val(gadget.getPref(userPref)).datepicker({ showAnim: '' })
                    );
                }
           };
};

[satya L]

Thnx Justin,

Can you please tell me what resources(jquery-ui files) need to be added in order to make the above code executable.

regards,

Satya

[Justin Shapiro]

This is the discussion from last time I did this: https://answers.atlassian.com/questions/438/where-s-the-jquery-ui-css-in-jira-4-3

I believe I ended up being a bit lazy and adding all of jquery-ui js and css.

[RambanamP]

Thanks a lot it worked as expected!!!

[tousifs]

Hi satya,

Date picker is not html property so may be it is not available in the jira gadget.

but you have to calculate the date then you can go for Select Field for DD-- Select Field for MM --Select Field for YYYY this way you can get the date then convert String to Date you could be able to use in your Gadget.

[srinivasp]

Hi Justin,

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?

Thanks,

Srinivas

1. Uncaught TypeError: Cannot read property 'DEF_DATE_FORMAT' of undefined

[tousifs]

Hi satya.

IF you find any solution for the same please update us with comments so we could update our knowladge on same.

[satya L]

No tousif ..

as an alternative option i am finally using Text box to capture the date ..

[Albert Khoury Aouad]

Hi Guys,

Well I was able to successfully implement the datepicker, however I am trying to print the vlaue read in the gadget view section using something like that :

The config section of my gadget is as follow:

config: {
	onResizeReload: true,
	descriptor: function (args) {
		var gadget=this;
		var searchParam;
		if(/^jql-/.test(this.getPref("projectOrFilterId")) || this.getPref("isPopup") === "true"){
			searchParam =
			{
				userpref: "projectorFilterId",
				type: "hidden",
				value: gadgets.util.unescapeString(this.getPref("projectOrFilterId"))
			};
		}
		else{
			searchParam = AJS.gadget.fields.projectOrFilterPicker(gadget,"projectOrFilterId");
			
		}
		return {
			fields: [
				searchParam,
				{
				   id: "from_datepicker",
				   userpref: "from",
				   label: gadget.getMsg("gadget.common.from"),
				   description: gadget.getMsg("gadget.common.from.description"),
				   type: "callbackBuilder",
				   callback: function(parentDiv){
					   parentDiv.append(
						   AJS.$("<input/>").attr({
							   id: "from-datepicker",
							   type: "text",
							   name: "from-datepicker",
							   class: "text"
						   }).val(gadget.getPref("from"))
					   );
					   parentDiv.append(
						   AJS.$("<button />").attr({
							   id: "from-datepicker-trigger",
							   type: "button",
							   class: "aui-icon icon-date"
						   }).val("date")
					   );
						Calendar.setup({
								firstDay : 1,
								inputField : 'from-datepicker',
								button : 'from-datepicker-trigger',
								align : 'Br',
								singleClick : true,
								showsTime : false,
								useISO8601WeekNumbers : false,
								ifFormat : '%d/%m/%Y'
						});
					}
				},
				{
				   id: "to_datepicker",
				   userpref: "to",
				   label: gadget.getMsg("gadget.common.to"),
				   description: gadget.getMsg("gadget.common.to.description"),
				   type: "callbackBuilder",
				   callback: function(parentDiv){
					   parentDiv.append(
						   AJS.$("<input/>").attr({
							   id: "to-datepicker",
							   type: "text",
							   name: "to-datepicker",
							   class: "text"
						   }).val(gadget.getPref("to"))
					   );
					   parentDiv.append(
						   AJS.$("<button />").attr({
							   id: "to-datepicker-trigger",
							   type: "button",
							   class: "aui-icon icon-date"
						   }).val("date")
					   );
						Calendar.setup({
								firstDay : 1,
								inputField : 'to-datepicker',
								button : 'to-datepicker-trigger',
								align : 'Br',
								singleClick : true,
								showsTime : false,
								useISO8601WeekNumbers : false,
								ifFormat : '%d/%m/%Y'
						});
					}
					
				},
				{
					userpref:"interval",
					label: gadget.getMsg("gadget.common.interval"),
					description: gadget.getMsg("gadget.common.interval.description"),
					value: "3",
					selected: gadget.getPref("interval")
					
				},
				{
					userpref:"rate",
					label: gadget.getMsg("gadget.common.rate"),
					description: gadget.getMsg("gadget.common.rate.description"),
					value: "3",
					selected: gadget.getPref("rate")
					
				},
				AJS.gadget.fields.nowConfigured()
			]
		};
	},
	args: [{
	
	}]
}

And below is how the configuration window is looking:

gadget_config.png

The view section of the gadget is as follow:

view: {
    enableReload: true,
    onResizeReload: true,
    template: function (args) {
    
        var gadget=this;
        var userDetails=AJS.$("<h1/>").text("Project: "+gadget.getPref("projectOrFilterId"));
        userDetails.append(AJS.$("<h3/>").text(gadget.getMsg("gadget.common.from")+gadget.getPref("from")));
        userDetails.append(AJS.$("<h3/>").text(gadget.getMsg("gadget.common.to")+gadget.getPref("to")));
        userDetails.append(AJS.$("<h3/>").text(gadget.getMsg("gadget.common.interval")+gadget.getPref("interval")));
        userDetails.append(AJS.$("<h3/>").text(gadget.getMsg("gadget.common.rate")+gadget.getPref("rate")));
        gadget.getView().html(userDetails);
    },
    args: [{

    }]
    
}

and that's how the gadget looks after saving the configuration:

gadget-view.png

So my question is why arent the Start Date and End Date fields being populated ?

[Albert Khoury Aouad]

@Justin Shapiro , @Paul Pasler Can you guys check the above implementation and tell me what's worng with what im doing ?!

[Albert Khoury Aouad]

Below is the User preferences declaration: <UserPref name="isConfigured" datatype="hidden" default_value="false"/> <UserPref name="isPopup" datatype="hidden" default_value="false"/> <UserPref name="projectOrFilterId" datatype="hidden"/> <UserPref name="from" datatype="hidden"/> <UserPref name="to" datatype="hidden"/> <UserPref name="interval" datatype="hidden"/> <UserPref name="rate" datatype="hidden"/>

[Aleksandr Zuevich]

@Albert Khoury Aouad, it's too late for the answer, but maybe somebody find it later: it's very important the name of the input field matches the UserPref name

[Rajesh Ramankutty]

Hi 

Guys how to create customised gadget for jira dashboard to bring date picker can anyone explain me?

[Dinar]

I have used the advice of Paul Pasler. I haven't added "the calendar.css by hand". I have used the advice of Justin Shapiro from https://answers.atlassian.com/questions/438/where-s-the-jquery-ui-css-in-jira-4-3. So I have added to "...gadget.xml" file "#requireResource..." strings.

"From my gadget xml #requireResource("com.atlassian.jira.gadgets:common") #requireResource("com.atlassian.jira.gadgets:autocomplete") #requireResource("jira.webresources:global-static") #requireResource("com.atlassian.auiplugin:ajs") #requireResource("com.atlassian.auiplugin:jquery-ui-other")"

It works. Thank You