J tricks - Little JIRA Tricks
  • Home
  • Plugins ↓
    • JQL Tricks Plugin
      • JQL Tricks Plugin - Cloud
        • JQLT Cloud Installation
        • JQLT Cloud Configuration
        • JQLT Cloud Usage
        • JQLT Cloud License
        • JQLT Cloud FAQ
      • JQL Tricks Plugin - DC
        • JQLT DC Installation
        • JQLT DC Configuration
        • JQLT DC Usage
          • JQLT Issue Functions
          • JQLT Subtask Functions
          • JQLT Links Functions
          • JQLT Development Functions
          • JQLT Worklog Functions
          • JQLT Project Functions
          • JQLT Component Functions
          • JQLT Version Functions
          • JQLT Group Functions
          • JQLT User Functions
          • JQLT Date Functions
        • JQLT DC License
        • JQLT DC FAQ
        • JQLT DC Known Issues
        • JQLT DC Performance
      • JQL Tricks Cloud Migration
    • Simplified Planner
      • J-Planner Installation
      • J-Planner Configuration
      • J-Planner Usage
        • Creating a plan
        • Editing a plan
        • Deleting a plan
        • Viewing a plan
        • Modifying a plan
      • J-Planner FAQ
    • Atla-Search Plugin
      • Atla-Search Installation
      • Atla-Search Configuration
      • Atla-Search Usage
      • Atla-Search License
      • Atla-Search FAQ
    • Copy to subtask Plugin
    • All Plugins
  • Tutorials
  • The Book
  • Contact Us
  • Home
  • Plugins ↓
    • JQL Tricks Plugin
      • JQL Tricks Plugin - Cloud
        • JQLT Cloud Installation
        • JQLT Cloud Configuration
        • JQLT Cloud Usage
        • JQLT Cloud License
        • JQLT Cloud FAQ
      • JQL Tricks Plugin - DC
        • JQLT DC Installation
        • JQLT DC Configuration
        • JQLT DC Usage
          • JQLT Issue Functions
          • JQLT Subtask Functions
          • JQLT Links Functions
          • JQLT Development Functions
          • JQLT Worklog Functions
          • JQLT Project Functions
          • JQLT Component Functions
          • JQLT Version Functions
          • JQLT Group Functions
          • JQLT User Functions
          • JQLT Date Functions
        • JQLT DC License
        • JQLT DC FAQ
        • JQLT DC Known Issues
        • JQLT DC Performance
      • JQL Tricks Cloud Migration
    • Simplified Planner
      • J-Planner Installation
      • J-Planner Configuration
      • J-Planner Usage
        • Creating a plan
        • Editing a plan
        • Deleting a plan
        • Viewing a plan
        • Modifying a plan
      • J-Planner FAQ
    • Atla-Search Plugin
      • Atla-Search Installation
      • Atla-Search Configuration
      • Atla-Search Usage
      • Atla-Search License
      • Atla-Search FAQ
    • Copy to subtask Plugin
    • All Plugins
  • Tutorials
  • The Book
  • Contact Us

Date, DateTime and User picker fields

11/2/2013

25 Comments

 
With the evolution of JIRA over the years, it has a set of nice APIs or helper methods for doing pretty much everything. But one thing that I always have to look up while developing plugins is using date and user pickers in a velocity template.

As usual, it is something that is really easy once you look it up. Here is a simplified version of what I have done in the last few versions of JIRA.

Let us create a sample plugin with a simple webwork action. How about an alias of Picker? Is there a more obvious name to call this example? ;)

  <webwork1 key="picker-module" name="PickerModule" i18n-name-key="picker-module.name">
    <description key="picker-module.description">Sample date and user picker in velocity templates</description>
    <actions>
      <action name="com.jtricks.jira.webwork.Picker" alias="Picker">
        <view name="success">/templates/picker-module/picker/success.vm</view>
      </action>
    </actions>
  </webwork1>


As you can see, we just have a simple webwork actions and a velocity template associated with the success view. All we are going to do here is to create a form in the view with sample picker fields. I have generalized methods so that you can use it for as many picker fields as you want on the same page.

Date Picker field

Really easy to do this! Couple of steps:

1. Add this macro in the beginning of the template.

  #macro(datePopup $inputId $inputButton $dateFormat)
  <script language="javascript" >
       Calendar.setup({
                firstDay : 1,
                inputField : '$inputId',
                button : '$inputButton',
                align : 'Br',
                singleClick : true,
                showsTime : false,
                useISO8601WeekNumbers : false,
                ifFormat : '$dateFormat'
       });
   </script>
   #end


2. Use the macro in the field group as shown below:

   <div >
         <label for="uniqueDateId">Date Field Name</label>
         <input id="uniqueDateId" name="name" />
         <a href="#" id="uniqueDateId_trigger" title="Enter your date field">
               <span ></span>
         </a>
         #datePopup("uniqueDateId" "uniqueDateId_trigger" $dateFormat)
    </div>


That's it! 

As you can see, the input field has a unique id (uniqueDateId in this example) and the anchor tag has a matching id which of the format ${id_of_input_field}_trigger (uniqueDateId_trigger in this example). Make sure pass this input field Id and anchor id to the datePopup macro we created in step 1.

The result is what you can see here:
Picture


DateTime Picker field

This is much similar to Date field, except for the number of arguments passed to the macro. It takes a date time format and a time format as opposed to the date format. Following are the steps:

1. Add a macro similar to what we did earlier.

   #macro(dateTimePopup $inputId $inputButton $dateTimeFormat $timeFormat)
   <script language="javascript" >
              Calendar.setup({
                         firstDay : 1,
                         inputField : '$inputId',
                         button : '$inputButton',
                         align : 'Br',
                         singleClick : true,
                         showsTime : true,
                         useISO8601WeekNumbers : false,
                         ifFormat : '$dateTimeFormat',
                         timeFormat : '$timeFormat'
               });
     </script>
     #end


The main difference is the formats. In the script, ifFormat uses a date time format instead of date format. There is also a timeFormat argument. Also showsTime argument is true instead of false.

2. Use the macro similar to what we did for datePopup. The unique ids should be just like what we did there.

   <div >
         <label for="uniqueDateTimeId">DateTime Field Name</label>
         <input id="uniqueDateTimeId" name="name" />
         <a href="#" id="uniqueDateTimeId_trigger" title="Enter your date time field">
                <span ></span>
         </a>
         #dateTimePopup("uniqueDateTimeId" "uniqueDateTimeId_trigger" $dateTimeFormat $timeFormat)
    </div>


Unique input id is uniqueDateTimeId and anchor id is uniqueDateTimeId_trigger. Here is how the field will appear on screen:
Picture

User Picker field

User picker is slightly different. Here we make use of JIRA's user picker browser where you can search for users based on name, email or group. 

In the page, we click on the user picker icon to open up the user picker browser as a popup window and when you click on the search result, it fills the form back with the result selected.

Steps are as follows:

1. Add a javascript function that opens up the user picker

   <script language="javascript" >
         function openUserPickerWindow(element){
            var vWinUsers = window.open('$!requestContext.canonicalBaseUrl/secure/popups/UserPickerBrowser.jspa?formName=jiraform&multiSelect=false&element=' + element, 'UserPicker', 'status=yes,resizable=yes,top=100,left=200,width=580,height=750,scrollbars=yes');
            vWinUsers.opener = self;
            vWinUsers.focus();    
         }
    </script>


The openUserPickerWindow method just opens up a user picker browser popup with the element attribute as the source input id (element variable). Note that the formName in the example is jiraform and change it as appropriate.

2. Invoke the function when you click on the user picker icon.

    <div >
          <label for="uniqueUserId">User Field Name</label>
          <input id="uniqueUserId" name="lead"/>
          <a href="javascript:openUserPickerWindow('uniqueUserId');">
               <img title="Ente the user name" name="multiuserImage" src="$!requestContext.canonicalBaseUrl/images/icons/filter_public.gif" hspace="0" height="16" width="16" border="0" align="absmiddle" >
          </a>
      </div>


Here also the input field has a unique id (uniqueUserId in the example) and that is passed in the anchor tag. You can change the icon as you want in the image tag.

Once added, the field appears on the form like this:
Picture

When you click on the user browser icon, it opens up the popup as shown below:
Picture

When you click on the 'admin' row, uniqueUserId on the form is populated as shown.
Picture

Yeah right, you have seen it a lot in JIRA ;)

The example code is uploaded at the end of the tutorial and you can run the webwork action using the URL http://localhost:2990/jira/secure/Picker.jspa.

That's all. 3 simple pickers, easy steps. How about the Ajax user search? Well, some other day :P

picker-plugin.zip
File Size: 30 kb
File Type: zip
Download File

25 Comments
Deniz Oğuz
11/23/2013 11:52:18 pm

Hi
When I try your Date Picker example exactly as it is I get "Uncaught TypeError: Cannot read property 'DEF_DATE_FORMAT' of undefined" error when I click to open date selection popup. I have tried to include $webResourceManager.requireResource("jira.webresources:calendar")
$WebResourceManager.requireResource("jira.webresources:calendar-en"); but it does not help.

Reply
J-Tricks
11/24/2013 09:05:36 am

What is the plugin type? Which module is using the velocity template where you have defined the picker?

Reply
sven lecherbonnier link
3/26/2014 12:00:44 am

Hi Jobin,

How do you handle the picker variable in your Picker class ?
This will be a date, string or ... ?

Sven

Reply
J-Tricks
3/31/2014 05:32:20 am

It will be a String. You can then parse in to a date with appropriate date format, if needed.

Reply
Frédéric Tardieu link
5/23/2014 09:51:20 pm

Hi J-Tricks team,

I'm using the date picker as described in this article, and it's working good, but I have a little problem: the date picker is inside an HTML form, and when the user picks a new date, the new date is displayed in the select element. But then if the user wants to go to another page, there's a browser warning popup asking for confirmation to leave the page as some changes were made in the form. How to get rid of this? How to have the date picker just fill the select field with the new date value?

Reply
J-Tricks
5/26/2014 02:53:51 pm

Hi,

It is just how javascripts work on browsers. You can try the solution given at http://stackoverflow.com/questions/1119289/how-to-show-the-are-you-sure-you-want-to-navigate-away-from-this-page-when-ch

Reply
Frédéric Tardieu link
6/1/2014 03:20:23 am

Hello J-Tricks team,

How to set the date picker inputfield with a particular date programmatically in Javascript?

Thanks,

F.

Reply
J-Tricks
6/1/2014 03:09:50 pm

Hey Frédéric,

Take a look at http://www.j-tricks.com/tutorials/setting-formatted-dates-using-javascript-in-jira. Hope that will work for you.

Reply
Ariel Rosa
8/4/2014 06:47:54 am

Hello, is it possible to add a User Picker field in a gadget configuration preference?

Could you guys make a tutorial about that please? :)

Reply
abdul ghaffar
12/22/2014 04:48:03 am

This post is very helpful. If you add date time format string, it will take guess work out
ifFormat :'%m/%d/%Y %H:%M %p',
timeFormat : '12'

Reply
Srinivas Patruni
4/27/2015 12:31:36 pm

Can we enable only Saturdays?

Reply
J-Tricks
4/29/2015 09:34:00 am

Not using these functions. You will have to use a jquery plugin that supports it!

Reply
Juergen Hellwig
4/28/2015 05:55:36 am

At the end of the tutorial you find:

That's all. 3 simple pickers, easy steps. How about the Ajax user search? Well, some other day :P

When will we have 'some other day'? I'm interested in the ajax user search. The tutorial is great and work fine in my JIRA 5.1 environment.

Reply
J-Tricks
4/29/2015 09:35:27 am

I wish it came faster. Too many things happening and so not enough time to do this! Please watch this space though!

Reply
Yusuf TAMBAĞ
7/19/2017 03:51:56 am

Passing class="single-user-picker js-default-user-picker" attribute to the input element should work (it worked for me).

Reply
Michael
5/26/2015 09:36:06 pm

Thanks for this good documentation.

What do i have to include if i want to use the datePicker in a popup?
If i start the html of the vm with
<html>
<head>
<meta name="decorator" content="atl.popup">
</head>

<body> ...

i get the error "ReferenceError: Calendar is not defined"

thanks, michael

Reply
J-Tricks
5/27/2015 02:18:53 am

Probably, the decorator doesn't include the web resources. You might want to try importing the necessary web resources using webresourcemanager.

$webResourceManager.requireResourcesForContext("correct-context-here")

Reply
my review here link
7/27/2015 12:49:18 am

Expecting from J-Tricks.

Reply
Arun kumar
4/11/2016 06:15:01 am

Good example. Well done.
How to make the user Picker auto complete. In the example i need to go search window and select the user, but i wanted to make it like a autocomplete

Reply
Nabil Sayegh
8/3/2016 07:21:37 am

Thank you.
However, this only works for the first page. If you search inside the popup the page reloads and the data isn't sent to the opening page.

Any idea how to fix that?

Reply
J-Tricks
8/3/2016 10:38:31 am

If you have a popup or dialog, make sure the javascript is initialized when the popup is loaded. Code is the same.

Reply
Nabil Sayegh
8/17/2016 05:28:41 am

With popup I was refering to the "openUserPickerWindow".
I can select the users that directly appear after that window opens, but if you use the filter form to search for users, the page reloads and selected users from the search result aren't returned to the opener.

J-Tricks
8/17/2016 01:38:28 pm

Ah ok. This usually happens when the id used is not the same as what you gave in the popup. Can you check again?

See uniqueUserId in the example.

Nabil Sayegh
8/18/2016 03:35:12 am

The problem was unrelated to the popup. It was my unload handler:

AJS.$(vWinUsers).on("unload", function() {
callback(group);
});

It doesn't anymore after the popup reloads itself. I need to re-attach the unload event on the reloaded popup somehow.

arthur link
12/19/2018 08:09:55 am

hi, great article!
How can we prepopulate the date input field with some date in the same format as configured in the Calendar object?
Thanks :)

Reply

Your comment will be posted after it is approved.


Leave a Reply.

    Enter your email address:

    Author

    Jobin Kuruvilla - Works in Adaptavist as Head of DevOps Professional Services. 

    Author of JIRA Development Cookbook and JIRA 5.x Development Cookbook.


    RSS Feed

    Categories

    All
    Acive Objects
    Ajs
    Book
    Components
    Condition
    Custom Fields
    Customization
    Events
    Gadgets
    Javascript
    Jql
    Listener
    Mail
    Permissions
    Plugin Framework
    Post Function
    Properties
    Remote Invocation
    Reporting
    Rest
    Scheduled Tasks
    Search
    Services
    Soap
    Summit
    User Interface
    Validator
    Webwork Actions
    Workflow

    Archives

    October 2016
    August 2016
    March 2016
    January 2016
    December 2015
    May 2014
    December 2013
    November 2013
    July 2013
    June 2013
    April 2013
    October 2012
    September 2012
    August 2012
    July 2012
    May 2012
    March 2012
    February 2012
    January 2012
    December 2011
    November 2011
    June 2011
    May 2011
    April 2011
    March 2011
    February 2011
    January 2011
    November 2010
    October 2010
    September 2010
    August 2010

SUPPORT
APPS
TUTORIALS
THE BOOK
© J-Tricks