How do I get the value of a text field when its type is set to Date?

[eliascheung]

Till now, it’s possible to get the value via MOUSE ENTER/EXIT. But ON TEXT CHANGED failed.

[mbc66]

This has been a bug since forever in Axure, at least since they offered options of text field types. For example, this thread:

[Bug] File / Date / Month / Time input field doesn't trigger "Text Changed" action in RP9

[com-video-to-gif%20(8)] Date Input Bug.rp (43.6 KB) I have a very simple case here: get the date from the edit field, then show the value in the block below But I found the Text Changed action won’t be triggered if the edit field type == “Date” or “File” or “Month” or “Time”. And if explicitly get the text from the widget, the value is simply “NaN” Don’t think it’s by design, so wanna know if it is a bug, thanks

Because the Text Field widget is an HTML widget, it’s behavior and a good bit of styling are up to the browser (good and/or bad thing, depending on what you need in your prototype.) There is a similar issue with setting (programmatically changing) the text value in non-default Text Field types. Axure support had a response in this thread:

Set text on a text field type date

Hi zzlpz, It sounds like you’re trying to use a Set Text action to change the displayed date on a text field that is set to the “Date” type input. The text field is one of the HTML widgets, which have their appearance and behavior defined by the browser in which they are viewed. For browsers where date type text fields render as browser-specific date pickers (such as Firefox, Chrome, mobile Safari, and mobile Chrome), it looks like using the Set Text action to change the displayed date doesn’t …

The problem as I see it is there just isn’t an event handler available when the user changes the value via “dropdown menu” (like the popup calendar for Date type, or spinner for Number type.) No event gets triggered, so Axure doesn’t know about it. It definitely seems like something due to both the browser and Axure, and I expect anything Axure could do about it might likely work in limited environments (OS + Browser + version) and would be subject to breaking anytime a browser updated its version.

Here is a little demo of how different “input types” of text fields work and don’t work. Years ago I had to deal with this for numeric input and date input, and I discovered the Text Changed event does get triggered if you manually type in a date, or pick a date via “browser calendar / date picker” and then press the Enter key (at least in Chrome browser on Win10/11). Setting the date just doesn’t seem to work though.
Text Field Input Types Demo.rp (53.2 KB)

The workaround has been to manually create your own date picker or date formatter/validation using the default input type of Text. It can get pretty complex, unfortunately. Here is a solution from RP8 …I expect it still works for RP9. I don’t know if any of this has been improved in RP10.

Date Picker?

pick-date-single.rp (104.0 KB) Thought I’d share my calendar that uses a repeater. It stores the date value in the text field labelled: “date selected”. You can use the value from this text field at any point. The default value is [[Now]] After selecting a value from the calendar, the value changes to your selection. You can reference the text field text as a date object. This allows you to do things like: LVAR = text on widget: date selected LVAR.getDate() Not sure how well it works per…

This approach from @nkrisc looks promising, if you’re familiar with javascript injection. …I haven’t tried it yet

Repeater - amortization table like functionality

If you want to add years instead of months, change .addMonths(item.index-1) to .addYears(item.index-1). This will add one year to each row, instead of one month to each row. So instead of 12 months, you’d get 12 years, one year per row. To do something different on every Nth row, add a second case to your OnitemLoad event. It will look something like: OnitemLoad If value [[item.index % 12]] equals 0 Do new formula In that new formula you could use (item.index / 12) to determine if it’s the …