topic Re: Batch attribute editor; Change date format? in Web AppBuilder Custom Widgets Questions

Batch attribute editor; Change date format?

HamishMills — Mon, 26 Sep 2016 21:47:48 GMT

Hello,

Is there a way to change the Batch attribute editor date format when entering date values? It seems to be locked to MM/DD/YYYY. I want to use the format DD/MM/YYYY.

Any help is appreciated.

Lemao Wu‌ rscheitlin‌ ad_giles@hotmail.com‌

Re: Batch attribute editor; Change date format?

BlakeTerhune — Mon, 26 Sep 2016 21:57:59 GMT

Are you sure ArcMap isn't just changing the display of the date?

Changing the way ArcMap displays short format dates in Windows 7—Help | ArcGIS for Desktop

EDIT:

Sorry, I just noticed this was for Web AppBuilder not ArcMap.

Re: Batch attribute editor; Change date format?

HamishMills — Mon, 26 Sep 2016 22:02:22 GMT

Thanks for your suggestion Blake. I was pretty sure this was not the case but have double checked just to be sure. So just to confirm, no this is not affecting the address format of the widget.

Re: Batch attribute editor; Change date format?

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:18:54 GMT

Hamish,

If you look in the Widget.js you will find this function (looks like line 9 is where you want to modify, though I do not use this widget so I am just speculating based on code I see):

    _createDatePicker: function (pParams) {
      var saveBtn = dom.byId('attrInspectorSaveBtn');
      html.addClass(saveBtn, 'jimu-state-disabled');
      var dateHolderNode = domConstruct.create("div", {
        'class': 'newDateCell'
      });
      domConstruct.place(dateHolderNode, pParams.row);
      var d = new Date();
      var defaultDate = (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getFullYear();
      var txtDate = new DateTextBox({
        value: defaultDate,
        placeHolder: defaultDate
      }).placeAt(dateHolderNode);
      txtDate.startup();
      on(txtDate, 'change', lang.hitch(this, function (evt) {
        html.removeClass(saveBtn, 'jimu-state-disabled');
        if (evt === "") {
          evt = defaultDate;
        }
        if (pParams.dataType === "DateTime") {
          this._createTimePicker(pParams);
        }

        this._getComboBoxVal({ 'valid': true, 'evt': evt, 'textCell': pParams.textCell, 'dataType': pParams.dataType });
      }));
    },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Batch attribute editor; Change date format?

HamishMills — Tue, 27 Sep 2016 01:05:16 GMT

Hey Robert,

Thanks so much for your quick response. While this info has allowed me to update the suggested date text, meaning it shows the user what should be input. It still does not allow the user to input dates in the DD/MM/YYYY format. I need to find where or why this restriction is being placed on the field. See the image below. If the user enters the date in the required format the field entry box turns red and does not allow it to be saved.

If you could point me in the right direction I would be so appreciative.

(I should probably mention at this point that the date picker does not actually work with any date format, this is possibly because of an active bug? I am planning on having my users just type the dates in manually because of this. See: Batch Attribute Editing Dates in WAB 2.1 and BUG-000097696: The Batch Attribute Editor widget in ArcGIS Web App..)

Thanks again

Hamish Mills

Re: Batch attribute editor; Change date format?

LemaoWu — Tue, 27 Sep 2016 10:22:28 GMT

This might be the by-designed behaviour of the AttributeInspector class of JS API. It seems using a unique format for a specific local language.

Xiaodong Wang‌ Previn Wong‌ Could you take a look?

Re: Batch attribute editor; Change date format?

HamishMills — Wed, 28 Sep 2016 20:35:57 GMT

Thanks Lemao.

Hopefully Xiaodong_Wang-esristaff or PWong-esristaff‌ will be able to assist. I have a large user base waiting on this fix so the sooner you guys can help me out the better!

Re: Batch attribute editor; Change date format?

PrevinWong1 — Wed, 28 Sep 2016 23:10:12 GMT

Hamish,

The code block above has been updated. It is no longer fixed format. The format is determined by the local now. This is currently the way in WAB as part of ArcGIS Online. It will be in changed in Dev Edition soon. Please give it a try in ArcGIS Online.

var defaultDate = locale.format(new Date(), { selector: 'date', fullYear: true });

If you live in a local where the format is DD/MM/YYYY, then the data and the picker will present itself in that way. If you are in MM/DD/YYYY, but you want to enter it as DD/MM/YYYY, then you will need probably need to install some language pack and switch languages since the app is taking the browser's language settings.

If you need to see the data in DD/MM/YYYY, you can format it to display that way in the pop up configuration in the ArcGIS Online web map.

Hope that helps.

Re: Batch attribute editor; Change date format?

HamishMills — Thu, 29 Sep 2016 00:07:23 GMT

Hi Previn,

Our users do not use ArcGIS Online at all. We only use apps deployed on our own Portal 10.3.1 installation. The reason I need to use WAB Dev is because the 'Batch Attribute Editor' widget is not available in the built in WAB on our Portal. Therefore I need some other way to change the widget so it functions correctly for my users.

If you read further back up the thread you will see that my issue is not just related to what's in that code block, i.e. the date hint text. My main issue is that users are unable to input the date at all in a format they are familiar with. Currently if you input a date in the 'DD/MM/YYYY' format the widget does not allow you to save these values because the field is flagged as incorrect and the save button is then locked/greyed out. See the image below:

I need some way to stop the field turning red and locking the save button when I enter dates in the 'DD/MM/YYYY' format.

Thanks

Hamish

Re: Batch attribute editor; Change date format?

PrevinWong1 — Sun, 12 Dec 2021 09:18:57 GMT

Hamish,

The next WAB dev edition will have all the date fixes (more than just one line I pasted) included. We did a lot more to handle and accept date based on locale and the different format that localization needs. That version is schedule to be release early October 2016.

Mind you that it will take the computer language and browser language to determine the format now. So in the United States for example, default date is month, day, year, whether it's MM/DD/YYYY, M/D/YY, or MONTH/D/YYYY validation is going to be on that format. If I need to intentionally try to input as DD/MM/YYYY, then I will need to modify the code (Dev Edition) to put an mask of DD/MM/YYYY, otherwise the date textbox would not validate it correctly. Below is what I mean.

var txtDate = new DateTextBox({
 constraints: "{datePattern:'dd/mm/yyyy'}",
 value: defaultDate,
 placeHolder: this.nls.errors.requiredValue
 }).placeAt(dateHolderNode);
 txtDate.startup();‍‍‍‍‍‍‍‍‍‍‍‍

Thanks,

Previn

Re: Batch attribute editor; Change date format?

HamishMills — Fri, 30 Sep 2016 02:43:37 GMT

Thanks Previn,

This code works partially but all I really need is the section of code that will stop the field from locking the save button when users enter dates in the DD/MM/YYYY format. The date picker doesn't actually function so using the date picker is not an option at this point. Users will be typing the date in manually until the new release comes out.

In any case, I understand I've taken a lot of your time on this issue so I'm happy to wait for the new release, as long as its coming out in the first 2 weeks of October.

Thanks again

Hamish

Re: Batch attribute editor; Change date format?

PrevinWong1 — Sun, 12 Dec 2021 09:19:00 GMT

Hamish,

Since you want to enable the Save button, even in the case of invalid date, you need to follow the trail for this

html.addClass(saveBtn, 'jimu-state-disabled');‍‍

And comment out where it occurs (there's a few)

Then in the function

_getComboBoxVal: function (pParams) {‍‍

Add this code

html.removeClass(saveBtn, 'jimu-state-disabled');‍‍

This code controls the red outline in the textbox, just remove the logic statement and leave the else condition.

if (valid === false) {
 domClass.add(comboBox.domNode, ["dijitTextBoxError", "dijitComboBoxError",
 "dijitError", "dijitValidationTextBoxError"]);
 } else {
domClass.remove(comboBox.domNode, ["dijitTextBoxError", "dijitComboBoxError",
 "dijitError", "dijitValidationTextBoxError"]);
 }‍‍‍‍‍‍‍

What you basically have done is remove all validation on the textbox, so you can save button is permanently enabled. I still suggest anywhere you have a date, to still put a mask so that things look right to you.

evtJustDate = locale.format(dtValue, { selector: 'date', fullYear: true, datePattern : 'd/M/yyyy' });‍‍

Re: Batch attribute editor; Change date format?

HamishMills — Mon, 17 Oct 2016 02:26:01 GMT

Hi Previn,

I have recently downloaded the latest WebApp Builder Dev version 2.2. However on initial testing I have found that the date format has not been updated. I still find that once I have selected a date from the date picker it shows in the incorrect format (MM/DD/YYYY).

Unless I am incorrect, is the date field now something that should reflect my local date format?

Cheers

Hamish

Re: Batch attribute editor; Change date format?

PrevinWong1 — Mon, 17 Oct 2016 16:58:33 GMT

Hamish,

Yes, the new release should base the date format on the locale now. But it does not override if you want to force it to a different format. for example, in the US, it's MM/DD/YYYY. If I try to put an date pattern of DD/MM/YYYY, it still will not validate, seems to be a bug with the underlying Dojo framework.

You will still need to disable the validation using the steps above if you need to override the local format.

Re: Batch attribute editor; Change date format?

HamishMills — Wed, 19 Oct 2016 20:24:11 GMT

Hi again PWong-esristaff‌,

I have done everything I can to make sure that my locale is set correctly, however the incorrect date format (MM/DD/YYYY) is still the only option allowed by the field input. Are you certain that the Batch Attribute Editor widget is affected by this update? I've noted that the date picker is now fixed and works correctly however the date format still doesn't reflect my 'locale' correctly and I am unable to override this.

Cheers

Hamish