It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

How i can add Date picker to Jira Gadget

Hi,

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

Thanks in Advance ..

Satya.

8 answers

1 accepted

7 votes
Answer accepted

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 :)

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

Hi Paul,

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

Thanks.

Bruno Conde.

Hi Paul,

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

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

@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

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>

Thanks Xrakan ..

will try this

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 ..

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.

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: '' })
                    );
                }
           };
};

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

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.

Thanks a lot it worked as expected!!!

Hi satya.

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

No tousif ..

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

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

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

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.$("&lt;input/&gt;").attr({
							   id: "from-datepicker",
							   type: "text",
							   name: "from-datepicker",
							   class: "text"
						   }).val(gadget.getPref("from"))
					   );
					   parentDiv.append(
						   AJS.$("&lt;button /&gt;").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.$("&lt;input/&gt;").attr({
							   id: "to-datepicker",
							   type: "text",
							   name: "to-datepicker",
							   class: "text"
						   }).val(gadget.getPref("to"))
					   );
					   parentDiv.append(
						   AJS.$("&lt;button /&gt;").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.$("&lt;h1/&gt;").text("Project: "+gadget.getPref("projectOrFilterId"));
        userDetails.append(AJS.$("&lt;h3/&gt;").text(gadget.getMsg("gadget.common.from")+gadget.getPref("from")));
        userDetails.append(AJS.$("&lt;h3/&gt;").text(gadget.getMsg("gadget.common.to")+gadget.getPref("to")));
        userDetails.append(AJS.$("&lt;h3/&gt;").text(gadget.getMsg("gadget.common.interval")+gadget.getPref("interval")));
        userDetails.append(AJS.$("&lt;h3/&gt;").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 ?

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

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"/>

@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

Suggest an answer

Log in or Sign up to answer
This widget could not be displayed.
This widget could not be displayed.
Community showcase
Published Thursday in Confluence

Confluence CVEs and common questions

Two vulnerabilities have been published for Confluence Server and Data Center recently: March 20, 2019 CVE-2019-3395 / CVE-2019-3396 April 17, 2019 CVE-2019-3398 The goal of this article is...

117 views 0 10
Read article

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you