How do I get editor form values during initialization?

burnchar

How can I get form values during Editor initialization?

I have the (what I'd assume is common) task of supporting dates and times in a field.
None of the reasonable JQuery plugins for date/time seem to work with IE8 (except one for Bootstrap), so I'm trying to hack JUI DatePicker to -- maybe not SUPPORT time selection -- but at least not DESTROY the time stored in the database when a user submits an edit.

The date comes in via JSON as, say, "2004-11-14 17:00"
If I use DatePicker on a field with a date AND time, it gets very confused, so I can add a dummy time as "literal text" like so:

[code]
"fields": [
{ "name": "BDAY", "label": "Birthday", "type": "date", "dateFormat": $.datepicker.ISO_8601 + ' 00:00' },
], ...
[/code]

The problem is that unless the time appended matches the field's time exactly, DatePicker horribly misinterprets the date. In order to preserve the time value, I need to get it from the form, substr()'ing the 12th through 16th character or similar. This is a terrible hack, but it's shockingly hard to get date/time selection support in a field in IE8. (How is this not an everyday, well-supported function in JUI?!)

This doesn't work:
[code]
"fields": [
{ "name": "BDAY", "label": "Birthday", "type": "date", "dateFormat": $.datepicker.ISO_8601 + ' ' + this.get('BDAY') },
], ...
[/code]
Because `this.get` is an Editor call and the editor instance doesn't exist yet within its own initialization.

How can I do this in Editor?
Alternatively, is there a reasonable way to support dates and times with a picker, at least preserving time, in Editor?

allan

I think there are two approaches you can take here:

1. Split the date / time into two components in your JSON return:

[code]
stamp: {
date: ...,
time: ...
}
[/code]

Then have Editor work on `stamp.date` only. You could then submit the time as a hidden field (or as a simple text field if you also what to have it editable, which validation of course), and recombine them either on the server-side or in an onPreSubmit event handler.

2. Use `dataProp` as a function in your Editor field - this is where things start to get a little tricky, so the other option is easier, and less error prone than this I think, if it is possible):

You might have something like:

[code]
dataProp: function ( data, type, set ) {
if ( type === 'set' ) {
data.date = set+' '+data._time;
}
var a = data.date.split(' ')[0];
data._time = a[1];
return a[0];
}
[/code]

So the intention here is to split the data on get, and then reassemble it on set. I must admit I haven't tried running this code yet (I'll try to do so later on), so it might have a daft error in it, but I think the principle is correct!.

Its funny, just in the last few days I've been contemplating adding `getFormatter` and `setFormatter` methods to Editor on the client-side - they might make this kind of thing a little bit easier... (but only might!)

Allan

burnchar

Thank you for your thoughtful responses, Allan. Both sound like good approaches.
I still hope to avoid such hacks and still support IE8, and in fact I've found a date/time picker which appears to be internally well designed and, in my tests, works with IE8.

http://www.ama3.com/anytime/

I am out of time for this release, but I plan to write a plugin for this to use in Editor.
Because date/time seems a basic editing task (though the JUI core team may disagree), would you be interested in coordinating for an official or semi-official (posted on your site as a plugin but not part of core) plugin? I'd suggest semi-official because Anytime is [i]not[/i] MIT/LGPL licensed. It is free/OSS for any use that does not involve charging money.

I posted a half-done plugin for Trent Oster's TimePicker earlier, but it appears to be fairly buggy even considering its long tenure. Depending on further testing, I'll probably post in that thread recommending that Editor customers _not_ use it.

--Charles Burns

allan

I'll take a look at it later on and see what would be involved in creating a plug-in.

Allan