Axure RP 8 not saving global variable of date type text field

I’ve been trying to make a prototype of a billing application where you have to enter your credit card details so I put the text fields and gave them their types. One was “expiration date”, Date type text field where, when you click on it, it opens the date picker (you cannot enter manually, it always opens date picker). To save the values I’m using global variables and it also has it’s own global variable. Now the problem is that the value in that text field is not saving and then in turn, not appearing on the next dialog box.

Here’s the link to shared prototype: Untitled DocumentTo get this problem, you need to follow these steps:

  1. Signup for an account.
  2. Enter details manually.
  3. Click save card.

Now it will show you the values that you’ve entered on a confirmation box. Here you can see the rest of values appeared but not the expiration date.

I think the problem here is that the value in the expiration date text field is getting saved as ‘placeholder’ text, that’s why axure couldn’t pick it up.

[EDIT]
The datepicker appears in Edge browser not in Internet Explorer, but the value is still not showing up even after trying in IE to manually fill the value.

Hi cyogesh56,

It looks like you’re running into a known issue with text fields of certain types (such as “Date”) not registering text changes when you use the native browser controls. While using “Set variable to text on widget [widget name]” doesn’t seem to pick up the text from the date type text field, it does look like you can pull the date OnLostFocus if you instead use “set variable to value [[This.text]]”, where “This” is the date text field. This should pull the date info from the text field so that you can save it to a variable and pass it to another widget.

As an alternative, instead of using the “Date” type text field, you could use a text type text field and add on a custom datepicker next to it. This would ensure that your prototype looks and works the same in all browsers. An example of a custom datepicker is available in the Axure Training Library.

Hopefully that helps!

Hi, Is there also the inverse issue in R8… Trying to set what is displayed in a date field to blank.
Using ‘Set test on datefield equal to “”’

Hi Ilmonstro!

If you’ve set the text field to a “Date” type and are using either the Chrome, Firefox, or Edge browser, then there isn’t a way to set the text field to blank, as the browser’s way of showing blank for a Date-type text field is dependent on the browser used to view it, e.g. Chrome renders this as “mm / dd / yyyy”.

If you wanted the text field to render completely blank, then I may suggest going with Alyssa’s suggestion in the above post where she recommends setting the text field’s type back to “Text” and then creating your own customized datepicker.

Hi Jane_Axure

The field is a ‘Date’ type, with the name “Date1”. I am then using “[[This.text]]” to set a variable “D1” OnLostFocus of “Date1” - Set value of of D1 equalt to [[This.text]].
At other places in the mockup, the value of “D1” is set to blank. Upon return to the screen that displayed “Date1”, I want to Date1 to reflect that it is not a set as a date, ""mm/dd/yyyy’ will work fine.
Thanks.

There also seems to be an issue with the [[This.text]]
When setting a variable to the value in a “Date” type field using [[This.text]], the value appears to be set correctly. If the Date type field is set to 04/23/2018 [[This.text]] provides 2018-04-23 as the value. However, .toLocaleDateString yields ONE DAY earlier 4/22/2018, as does .getDate!!!

Hi Ilmonstro,

Hmm, you should be able to use the “Set Text” action to set the text on the Date-type text field to blank, or [[mm/dd/yyyy]], depending on the browser. I’ve attached an example file to demonstrate this.

As for the problem with [[This.text]], I also see that using the value of a variable, e.g. [[D1]], with .toLocaleDateString or .getDate yields a date one day earlier, and I’ll file this with our QA team for further investigation.

In the meantime, what may help is to extract the month, date, and year values from [[D1]] using the .slice or .substring methods, rather than .getDate or .toLocaleDateString. After extracting what’s necessary, you can then save those to their own global variables, [[MM]], [[DD]], [[YYYY]], and then format the date to how you like. I’ve added an example to the attached file so you can see how this would work.

Hope this helps!

DateSlice.rp (51.1 KB)