How to use date input field in AUI Restful Table

As part of the create new row functionality in AUI Restful Table I would like to use a date input field. Does anyone know, how to do that and has some JavaScript example?

Best regards
Holger

Hi Holger,
I think you need to define a custom edit column renderer. Something like:

new AJS.RestfulTable({
  CustomDateCreate : AJS.RestfulTable.CustomCreateView.extend({
    render : function(self) {
    var val = "", row = this;
    if (!(_.isUndefined(self.value))) {
      val = self.value;
    }
    // custom element here
    return "<div><input type="date" /></div>";
  }
}),
...
columns: [
...
 {
    id: "some_date",
    header: "Date",
    createView : AJS.RestfulTable.CustomDateCreate
 },
...

If you intend to use AUI Date picker you need to bind initialization to some event that is triggered after create row is shown. Not sure which one is that.

Personally I opted out from using Restfull table as it was too much JavaScirpt coding and debugging of existing Resfull JS code to create some non-standard table with non-standard elements. For me it’s simpler to write my own HTML + JS that does exactly what I need.

2 Likes

Thank you very much! Guess I have to find a way to use AUI Date Picker because type=“date” is not supported in Firefox, or Internet Explorer 11 and earlier versions.

That should be relatively straightforward. Simply inject the HTML placeholder for the AUI Date Picker in the example CustomCreateView extension:

<input class="aui-date-picker" id="demo-range-always" type="date" max="2012-01-05" min="2011-12-25" />

and add an event listener to the Restfultable:

myRestfulTableInstance.bind(AJS.RestfulTable.Events.INITIALIZED, function () {
    AJS.$('#demo-range-always').datePicker({'overrideBrowserDefault': true});
});

In the event handler, you initialise the AUI Date Picker.

3 Likes

In my Java bean returned by REST webservice attribute type is Date. Do you know, what to do? In the date input field it is converted to a number.

Working with dates is always tricky. In my experience, it is best to work with unix timestamp because this is something both JavaScript and Java can translate to the same date.

Just saw https://ecosystem.atlassian.net/browse/AUI-3555. That means don’t use myRestfulTableInstance.bind, but AJS.$(document).bind.

Hi - is it possible to use the AUI restful table in my bitbucket plugin?

@dennis.park yes you can use AUI RestfulTable in a bitbucket plugin. You can check out the AUI RestfulTable documentation here: https://docs.atlassian.com/aui/latest/docs/restful-table.html. The AUI version that is shipped with a specific BitBucket Server version can be found here https://bitbucket.org/atlassian/aui-adg/wiki/versions/product-version-matrix. For BitBucket Cloud add-on you can simply add AUI resources either from CDN or as an NPM package.

Keep in mind that this is the basic version of the AUI RestfulTable, not the extended/custom versions that can be found in Jira.

Hi Remie,

Thanks for your response and the link. I will take a look at the documentation. I’ve been trying to import the JIRA restful table and I am missing the global JIRA object and that seemed to cause me to try a lot of work arounds and hacks.

I am also strugglling with the plugin manifest file (atlassian-plugin.xml) - specifically, what needs to be included to get all the proper framework references to show up in my js files so that I can use the restful table?

If you know off hand please let me know – i’ll continue to look through the link to the docs you have sent me and update this thread (or start another one if appropriate).

Thanks again!

sorry, not the atlassian-plugin.xml,…and not the plugin manifest, but rather the pom build file.
(pom.xml)

The documentation is helpful but there are still some problems i’m facing that look familiar (jquery.namepsace is undefined) Is there an example that i can follow?

Is there a good book that you could recommend? I think the documentation is a little bit out of date and un-focused. A lot of the links are out-dated so there is no comprehensive and single line of thought.

Btw. <input ... type="date"> and AJS DatePicker does not properly work in Google Chrome if date format of the date picker is different to the language settings of your browser. Therfore <input ... type="text"> is the better choice and safe.

1 Like

There is one “book” that will provide you with all the answers to your question: the Jira & AUI source codes. The AUI source code should be available on BitBucket, the Jira source code can be downloaded from my.atlassian.com. It might feel like a drag, but from my experience, the source code is the best way to get the answers you are looking for.

BTW, you might want to ping @rwhitbeck about the missing links etc. I know he gets a bit sad every time I refer someone to the source code :slight_smile: