Datetime-picker，how can i do?

, , ,
1

JIRA has date-picker but doesn’t see datetime-picker

Self developed interface, I want to use time control with time, minutes and seconds, how to use it?

2

Hi @chenxinglin,

AUI doesn’t include a time picker component. Are you building an interface for the Cloud or Server version of Jira?

I can think of a few options:

(1) If you’re building using React, you can use Atlaskit’s datetime picker: Atlaskit by Atlassian

(2) Use the AUI date picker component, then add three <select> elements for the time - one for the hour, minute, and second.

(3) If you’re building for Jira Server, you can use Jira’s Calendar component. It has an ability to pick a time. However, it’s not straightforward to consume it.

<!-- Your atlassian-plugin.xml file -->
<web-resource key="my-app-feature">
  <dependency>jira.webresources:calendar</dependency>
  <resource name="my-app-feature.js" location="path/to/my/feature.js" />
</web-resource>

// your js code
function initDateTimePicker(element, formatToSendToServer, formatToDisplay) {
  Calendar.setup({
    inputField: element,
    ifFormat: formatToSendToServer,
    daFormat: formatToDisplay,
    showsTime: true
  });
}


// Equivalent of yyyy-mm-ddTHH:MM:SS.SSS
// this is the ISO8601 date time format. 
// It is something your server-side code should be able to decode in to a proper date+time using,
// e.g., DateTimeFormatter, or Joda-Time.
var formatToSendToServer = "%Y-%m-%dT%H:%M:%S";

// Outputs something like "10/Dec/19, 11:15 AM"
var formatToDisplay = "%e/%b/%y, %I:%M %p";

// call this code when appropriate -- i.e., when you know your element is rendered
// typically you do this on a NEW_CONTENT_ADDED event
JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function(e, context, reason) {
  if (reason !== JIRA.CONTENT_ADDED_REASON.panelRefreshed) {
    var myInputField = context.find('something-to-find-your-field');
    initDateTimePicker(myInputField, formatToSendToServer, formatToDisplay);
  }
});

Hope that helps you get started.

Cheers,
Daz.

2 Likes
3

hi@daz
Thank you very much for your suggestions. Your suggestions are very good!

The second solution I adopted in the project solved the problem temporarily, but it was not the most perfect.

I’ll try your third proposal.

Therefore, I still hope to have the same components as date picker, which can be used in JIRA server development