Community moderators have prevented the ability to post new answers.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Paul,
This ansewer helped my a lot, specially the part of the manually added calendar.css.
Thanks.
Bruno Conde.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Paul,
How to save the value of picked date? Is it saved to the userPref?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Paul, Thanks for your answer. Can we disable all days except one day on date picker?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
@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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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>
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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 ..
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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: '' }) ); } }; };
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Thanks a lot it worked as expected!!!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi satya.
IF you find any solution for the same please update us with comments so we could update our knowladge on same.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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 ?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
@Justin Shapiro , @Paul Pasler Can you guys check the above implementation and tell me what's worng with what im doing ?!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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"/>
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
@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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi
Guys how to create customised gadget for jira dashboard to bring date picker can anyone explain me?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Community moderators have prevented the ability to post new answers.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.