Page 1 of 2

Date Range - auto populate "to" date with "from" date

Posted: Fri Sep 26, 2014 9:54 am
by ppbedz
I have a screen with 2 date fields - "from" and "to" date range. If the user selects a "from" date using the calendar widget, I would like it to automatically populate the "to" date field so that both values are the same. I would also like the calendar widget for the "to" date field to display the selected month from the "from" date field so the user remains in the desired month in the event they want to change the day.

example:

User selects October 15th from calendar widget, "from" date = 10/15/2014 and "to" date = 10/15/14 AND if user clicks on "to" date to change the day, calendar widget starts with October.

Is this possible? Thank you......

Re: Date Range - auto populate "to" date with "from" date

Posted: Fri Sep 26, 2014 10:06 am
by dieter
You can code an OnChange-Event for the first datefield:

changeElementValue("Date2", getElementValue("Date1"));


For your second problem (adjusting the month) i have no idea.

Dieter

Re: Date Range - auto populate "to" date with "from" date

Posted: Fri Sep 26, 2014 10:34 am
by ppbedz
Thanks Dieter, but it did not work for me??? Thoughts?

Re: Date Range - auto populate "to" date with "from" date

Posted: Fri Sep 26, 2014 12:22 pm
by SeanTyree
Try this code for your onchange event:

pui.set("emenddate", get("emstartdate"));

I noticed that your start date element might be misspelled: "emstardate"?

Sean

Re: Date Range - auto populate "to" date with "from" date

Posted: Fri Sep 26, 2014 12:30 pm
by dslage
I am at home. In Germany it is weekend now. So i had to login with a new account.

Are you sure that you really used the ID of your widgets? Or did you use the name of the bound RPG variables? The ID of a widget is shown in the Visual Designer. When you click on a widget you can see the id as the first property of the widget. In Javascript you allways have to use the id instead of the rpg variable.

Maybe this helps.

Dieter

Re: Date Range - auto populate "to" date with "from" date

Posted: Fri Sep 26, 2014 12:35 pm
by dslage
Another tip: I think the name of the ids have to be case sensitive.

Dieter

Re: Date Range - auto populate "to" date with "from" date

Posted: Fri Sep 26, 2014 12:43 pm
by Scott Klement
I agree with Dieter. Make sure you are using the ids of the fields, not the name of the bound variables. And, yes, ids are case-sensitive, so make sure you match the upper/lowercase exactly.

Sean, fwiw, pui.set() and changeElementValue() are aliases for teh same routine, it does not matter which one you use. The difference between getElementValue() and get() is that get() will trim blanks from the result, and getElementValue() will not... they are otherwise identical.

Re: Date Range - auto populate "to" date with "from" date

Posted: Fri Sep 26, 2014 12:47 pm
by ppbedz
Yes, spelling was correct (I had to abbreviate). I actually tried the statement both ways.. with the id and the bound name. Neither worked.
Sean, I just tried what you suggested using the id and it did not work. The "OnChange" does not seem to be registering. (I was having a similar issue with an auto-fill drop-down and when I moved the code to "OnSelect" it worked. )

This is what it looks like now:

Re: Date Range - auto populate "to" date with "from" date

Posted: Fri Sep 26, 2014 12:58 pm
by dslage
Today afternoon i tried my posted code and it worked. I am on version 4.8.6.

Please try the following (so did i):

Open the designer and create a pure new mask.
Draw two date widgets onto the screen. In my case the widgets automatically got the ids "Date1" and "Date2".
Then put my posted code in the OnChange element of Date1:

changeElementValue("Date2", getElementValue("Date1"));

Then give the screen format a name (i gave it the name "x").
Then launch the preview.
In my case it worked.

If this works in preview you may have a problem in your browser or in the other JavaScript code of your mask.

Please let me know your result.

Dieter

Re: Date Range - auto populate "to" date with "from" date

Posted: Fri Sep 26, 2014 1:05 pm
by Scott Klement
Patti, the onchange will only fire when the value of the field has changed. Maybe something like 'onblur' would be a better choice? this will fire every time you leave the field.

An easy way to tell if the event is firing is to stick an alert() into the code. So in your onchange example, you might set onchange to: alert("fired"); pui.set("EndDateInput", get("StartDateInput"));

A popup box will appear each time the event fires, and that will make it clear that the code is running. (Obviously, you will want to remove the alert when you're done testing.)