Groups | Blog | Home
all groups > coldfusion flash integration > april 2007 >

coldfusion flash integration : changing dateField selectedDate


gyannuzzi
4/2/2007 6:12:14 PM
Hello, I have a cfform with actionscript.
Basically I have a data grid that when a row is selected, a cfform is
populated.
The problem is with the datefield.
The datefield text updates without problem, however, the datefield
selectedDate is never updated.
I tried changing the selectedDate property of the datefield, but I received
errors.
In my attempt, the word new was not allowed, when I tried to set the
datefield.selectedDate to a new Date().
Perhaps there are other ways?


mjb14
4/3/2007 2:54:55 PM
gyannuzzi
4/9/2007 4:37:43 PM
BKBK
4/22/2007 12:00:00 AM
[i]selectedDate[/i] is not an attribute of [i]datefield[/i]. A simple date
field like

<cfform action="test.cfm" method="post" <!--- format="flash" --->>
<cfinput type="datefield" name="start_date">
<cfinput type="submit" name="sbmt" value="send date" >
</cfform>

should work, with or without flash format. Were you perhaps thinking of
cfcalendar?






gyannuzzi
4/22/2007 2:29:10 PM
Thanks for the response. I am using a cfinput type datefield within a flash
type form as in your code snip.
I thought I might be able to use 'selectedDate' as it is a property of the
Flash datefield object.

But, I will use any way I can to update the selected date of the datefield.
Changing the text only changes the text. When the datefield is clicked by
users, the calendar chooser pops up with the (old date) selected.
BKBK
4/22/2007 5:21:31 PM
[i]I thought I might be able to use 'selectedDate' as it is a property of the
Flash
datefield object. [/i]
In cfform, 'selectedDate' is an attribute of the cfcalendar element, not of a
datefield input element. Even when the format is flash.

[i]Changing the text only changes the text. When the datefield is clicked by
users,
the calendar chooser pops up with the (old date) selected. [/i]
This scenario confuses me. It should [i]not[/i] be possible for you to change
the text manually. You should only be able to do so by clicking on a date in
the calendar. The selected date then appears in the text field next to the
calendar. Coldfusion highlights the selected date on the calendar with a
colour. Clicking on the text field itself, for whatever reason, should not
enable you to enter anything. It should only result in toggling the calendar
display on or off. That is the functionality as I understand it.


gyannuzzi
4/24/2007 1:14:32 PM
I have put together a sample bit of code so that everyone can see the problem.
The code produces a simple grid, and a few form fields bound to that grid.
Note that though the datefield text is properly updated when a grid selection
is made, however, the selected date of the datefield is never updated. (what I
mean is, that when you click on the calendar icon, and it pops up the calendar,
the selected date in that calendar does not match the text in your datefield
cfinput)
----------------
<cfset cities = "Rome,Athens,Canberra,Brasilia,Paris">
<cfset countries = "Italy,Greece,Australia,Brazil,France">
<cfset dates = "11/21/2006,2/3/2007,4/14/2007,9/23/2007,11/11/2007">

<cfform name="cities" format="flash">
<cfgrid name="geoGrid" autowidth="yes" height = "120" rowheaders="no">
<cfgridcolumn name="city" header="City">
<cfgridcolumn name="country" header="Country">
<cfgridcolumn name="travelDate" header="Travel Date">
<cfloop index="i" from="1" to="#ListLen(cities)#">
<cfgridrow data ="#ListGetAt(cities, i)#,#ListGetAt(countries, i)#,
#ListGetAt(dates, i)#">
</cfloop>
</cfgrid><br /><br />

<cfinput name="city2" type="text" label="City" width="100"
bind="{geoGrid.selectedItem.city}" />
<cfinput name="country2" type="text" label="Country" width="100"
bind="{geoGrid.selectedItem.country}" />
<cfinput name="travelDate2" type="datefield" label="Travel Date" width="100"
bind="{geoGrid.selectedItem.travelDate}" />
</cfform>
----------------
BKBK
4/27/2007 8:29:19 PM
[i]> when you click on the calendar icon, and it pops up the calendar, the
[quoted text, click to view]
cfinput[/i]
That is the expected behaviour. The [i]bind[/i] attributes simply inserts the
date from the grid into the travelDate2's text field. The attribute that would
insert the date into the text field as well as on the calendar is [i]value[/i].


gyannuzzi
4/28/2007 2:25:24 PM
Can you show me the syntax for setting the value in the context of the code I
posted? This is precisely what I have been struggling with. If it is just my
ignorance of the proper syntax, then I would be happy :D
BKBK
4/30/2007 1:06:28 PM
Gyannuzzi,
I am still looking into the problem. I'm finding it quite tricky. In the
meantime, here are some ideas that may inspire you or someone else.

The most straightforward way is to place the date dynamically into the
datefield's value attribute, thus, [i]value="#selected_travel_date#"[/i]. But
then, we hit a snag immediately. The [i]value[/i] attribute is not an event.
So, its value can be evaluated from a Coldfusion variable, but not from an
Actionscript variable. Yet the value is readily available to us, in
Actionscript, not in Coldfusion.

I have not considered any solution in Coldfusion or in client-side script. I
have the feeling it would be messy. I thought adding/modifying the following
lines would do it

<cfgrid name="geoGrid" autowidth="yes" height = "120" rowheaders="no"
onchange="onGridSelect();">

<cfformitem type="script">
function onGridSelect(){
travelDate2.selectedDate=geoGrid.selectedItem.travelDate;
}
</cfformitem>

<cfinput name="travelDate2" type="datefield" label="Travel Date" width="100" />

But it doesn't seem to help. I only get what you already got with [i]bind[/i].
I think the calendar doesn't respond because
[i]geoGrid.selectedItem.travelDate[/i] is a string. Actionscript alternatives
like

cities.traveldate2=geoGrid.selectedItem.travelDate;

also fall short for the same reason. Coldfusion apparently expects a Date
object there. However, we cannot get a Date object because the Coldfusion Flash
compiler forbids the use of the keyword "new" in a script.

I came tantalizingly close, using the
http://livedocs.adobe.com/flash/mx2004/main_7_2/00002381.html.

function gridSelect(){
travelDate2.setFocus();
// travelDate2.showToday=False;
// alert('day: '+geoGrid.selectedItem.travelDate.split("/")[1]+', but how to
enter day number in calendar?');
travelDate2.displayedMonth=geoGrid.selectedItem.travelDate.split("/")[0]-1;
travelDate2.displayedYear=geoGrid.selectedItem.travelDate.split("/")[2];
}

<cfinput name="travelDate2" type="datefield"
bind="{geoGrid.selectedItem.travelDate}" label="Travel Date" width="100" />

I could get everything to display, except the day. There is a
[i]displayedMonth[/i] and a [i]displayedYear[/i] property, but, alas, no
[i]displayedDay[/i]. Anyone with a flash?


gyannuzzi
5/3/2007 2:05:06 PM
Thanks for perservering with this issue. I have something very similar that is
partially working. Perhaps we can yet find a workaround. I have attached the
code. Unfortunately, this code only seems to work once the datefield has had
its date selected manually by the user one time. Once the user has done that,
it works. I have tried variations (including the removal of my conditional),
but to no avail. I thought your setFocus might do the trick, but it didnt seem
to help. Anyways, here is what I have, maybe it brings us a step closer.

<!--- helper function to update selectedDate for a datefield control
Note: FLAWED but better than nothing, this only selects date once user has
selected date one time.
--->
public function update_datefield_selectedDate(df:mx.controls.DateField,
date_as_string:String):Void {
var date_as_array:Array;
var new_date:Date;
new_date = df.selectedDate;
if (new_date != undefined) {
date_as_array = date_as_string.split("/");
/* set full year(year, month (0-11), date) */
new_date.setFullYear(date_as_array[2], date_as_array[0]-1,
date_as_array[1]);
df.selectedDate = new_date;
}
return;
}
BKBK
5/6/2007 5:47:16 PM
I can still not find the code to dynamically prick a date in the datefield
calendar. The [i]selectedDate[/i] property is no use, as it exists only after
you select a date. We've gone as far as we can. Let's ask
http://www.asfusion.com/blog/archives/category/cfform.


Chuck1411
6/15/2007 3:27:04 AM
I have this working, you just have to have a hidden field in the grid that is a
date object of that date. Then, thx to your post above I do in action script
in the onChange event in the grid, I set the values like this...

DateOfArrival.text = grid.selectedItem.Date_string;
DateOfArrival.selectedDate = grid.selectedItem.Date;

Then I only have the Date_string show in the grid with the <cfgridcolumn> tag.
Because having Date was unsortable (cause it had names for the months, and it
has a bug, because I use times, and if I set the time to 2300, it displays the
next day in the grid even tho the date in the db is correct. Shrug, that's
another issue, but anyway the above works for me.

My date string has the format MM/DD/YYYY, though I think YYYY/MM/DD would be
better on sorting, its less readable. I'm still new enough, if you have a
better idea on sorting, maybe convert the date to a number (its prolly a number
anyway, though I don't know how to use it that way) and sort it with that.

BKBK
6/15/2007 5:13:46 AM
I cannot figure out what you mean. Could you please say it again using the code in my posting of April 30?

Chuck1411
6/16/2007 7:28:06 PM
[q][i]Originally posted by: [b][b]BKBK[/b][/b][/i]

<cfgrid name="geoGrid" autowidth="yes" height = "120" rowheaders="no"
onchange="onGridSelect();">

<cfformitem type="script">
function onGridSelect(){
travelDate2.selectedDate=geoGrid.selectedItem.travelDate;
}
</cfformitem>

<cfinput name="travelDate2" type="datefield" label="Travel Date" width="100" />

cities.traveldate2=geoGrid.selectedItem.travelDate;


<cfinput name="travelDate2" type="datefield"
bind="{geoGrid.selectedItem.travelDate}" label="Travel Date" width="100" />

[/q]

If travelDate is a Date object, then add to your table/schema
travelDate_string, and use DateFormat(Date,"MM/DD/YYYY") when ever you
insert/update the table/schema to put the string in it. I'm sure that is
obvious enough, so I won't post that code.
Then within...
<cfgrid name="geoGrid" autowidth="yes" height = "120" rowheaders="no"
onchange="onGridSelect();">
I have it populated with a query() of basically select * from table which
includes both date fields, the date object and the date_string which I manually
create on insert/update via dateFormat mentioned above.
BUT, beneathe the <cfgrid> tag I have my...
<cfgridcolumn name="travelDate_string" header="Date" />
and I do not have a <cfgridcolumn showing the date object, so I have the date
object as a 'hidden' column within the grid, but the values are there for each
row. So when
onGridSelect(){
travelDate2.selectedDate=geoGrid.selectedItem.travelDate;
add also
travelDate2.text = geoGrid.selectedItem.travelDate_string;
}
and wallah, it works.

I used default of travelDate being an object of Date, but if you have
travelDate as a string, add to your table/schema a datefield, and on your
insert/create statements use createDate(). Then using the above code, I
believe it should work for you.

The working application is: tracker.searisen.com (Login as Guest to work with
the demo).
BKBK
6/17/2007 6:13:00 PM
Thanks. I'll give it another go.

BKBK
6/23/2007 8:35:55 PM
The code you suggest doesn't work. At least, not when one implements it like
this

<cfset dateString = "11/21/2005">
<cfset dateObj= createdate(2005,11,21)>
<cfform name="dateform" format="flash">
<cfgrid name="dateGrid" height = "120" onChange="gridSelection();" >
<cfgridcolumn name="dateAsString" header="Travel Date">

<cfgridcolumn name="hiddenDate" display="No">
<cfgridrow data ="#dateString#, #dateObj#">
</cfgrid>
<cfformitem type="script">
function gridSelection(){
travelDate.text = dateGrid.selectedItem.dateAsString;
travelDate.selectedDate=dateGrid.selectedItem.hiddenDate;
}
</cfformitem>
<cfinput name="travelDate" type="datefield" label="Travel Date" width="100">
</cfform>


Chuck1411
6/24/2007 4:52:58 AM
Just a thought -
But isn't the line
<cfgridrow data ="#dateString#, #dateObj#">
converting the #dateObj# to a string before it is passing into data?
Therefore it is no longer a Date object as you are expecting.

AddThis Social Bookmark Button