date constraints on a field in editable table

Submitted by LeoF on Tue, 04/19/2011 - 23:10

I'm trying to restrict the date control on a field in an editable table. I tried using this:
hyf.calendar.setDateConstraint('my_date_field', 'Maximum', 'Today');

For my_date_field I've set the ID of the field as it shows up in Webmaker. When I do this I get this error:
Error: document.getElementById(dateField) is null

If I set my_date_field to the actual ID of a field in the editable table, for example TasksBlankEntrymy_date_field, then I get a different error:
Error: calendarConfig is undefined

What am I doing wrong?

RE: date constraints on a field in editable table

Hi LeoF,

Unfortunately, the version of the setDateConstraint function included in WebMaker 3.1.2 dos not support date fields within a repeat structure (eg a table), which is why you are seeing these errors.

To resolve this, please add the script file in the attached zip as an additional script file for your page. (This can be done on the Application Map screen.)

Next change your script call to be:

hyf.calendar.setRepeatDateConstraint('repeat_name', 'field_name', 'Maximum', 'Today');

Where repeat_name is the name of the repeat control that contains the date field. For a default editable table this will be EditableTable.

Finally, to ensure the fields are correctly initialised in the editable table, you should put this script call in an onbeforeload page event, rather than an onload one.

Hopefully this should sort out this problem for you.

Please let me know if you have any further questions.

attachment

dateConstraint.zip

RE: date constraints on a field in editable table

Thanks for the quick reply.
Is there a way to control the location of the calendar popup? By default it happens below and to the left of the control. I would like to have it pop up above the control for example.

Also can I ask why you didn't simply use/extend the dojo calendar control?

RE: date constraints on a field in editable table

You should be able to adjust the position of the calendar relative to the anchor button that shows it by extending the getCalendar method, eg


dojo.connect(hyf.calendar, 'getCalendar', function (fieldId){
    var cal = hyf.calendar.config[fieldId].calendar;
    cal.offsetY = -150;
    cal.offsetX = -150;
});

With regards to not using the dojo calendar, I think this functionality was originally implemented before the dojo toolkit existed, which is why it is not used. You should however be able to switch to using a different calendar control if you want. See How do I change the calendar/date picker control used on the created pages? for more details.

I hope this helps.

RE: date constraints on a field in editable table

Thanks.

When I try to specify a field id instead of 'Today' as a constraint, I get this error:

Error: start is null
Source File: /js/CalendarPopup.js
Line: 344

For example I do this:
hyf.calendar.setRepeatDateConstraint('myRepeatId', 'myFieldId', 'Maximum', 'anotherFieldId')

Where anotherfielId is a date field.

RE: date constraints on a field in editable table

Hi LeoF,

I think you might get that error if the anotherFieldId value is blank. So it might be worth wrapping your script call, eg


if (document.getElementById('anotherFieldId').value != '')
    hyf.calendar.setRepeatDateConstraint('myRepeatId', 'myFieldId', 'Maximum', 'anotherFieldId')

I hope this helps.

RE: date constraints on a field in editable table

No that's not the case. That field is not blank, but I added your check just in case and I still get that error when clicking on the caledar control.

RE: date constraints on a field in editable table

Hmm, that's interesting.

Can you check that the anotherFieldId field has the Data Type set to 'date' (under Data Constraints on the Field Details tab in FormMaker), and that its Data Date Format is the same as the that for the field you are trying to restrict?

RE: date constraints on a field in editable table

Yes both are set to type date and identical formats.

RE: date constraints on a field in editable table

Ok, I think there might be some conflict going on between the timing of when the date constraints are being set, and the editable table initialised. Can you try the following and see if it helps?

Firstly, switch the onbeforeload event that calls hyf.calendar.setRepeatDateConstraint back to an onload event.[/*]
Now select the table_init custom field for the editable table on the Field Details tab and take a copy of and then remove the call to the hyf.editabletable.init function it contains.[/*]
Add this call to the hyf.editabletable.init function to the end of you onload event, after the call to setRepeatDateConstraint.[/*]
Edit this script call so that where it says hyf.editabletable.getLastTableOutput(), replace this with document.getElementById('EditableTable'). (Assuming you have not renamed the repeat component for the editable table. If you have, then just update the ID accordingly.)[/*]

I'm hoping that this may resolve this timing conflict, but please let me know how you get on.

RE: date constraints on a field in editable table

That worked, but I notice that the date restriction is not inclusive? What would be the easiest way to do that?

RE: date constraints on a field in editable table

To make the date restriction inclusive, you would have to switch to passing the actual date value to the restrict function rather than the field name.
You can then manually add one day to the date specified by the field before using the value to restrict.

eg Use a fragment like the following in your onload event rather than just a simple call to setRepeatDateConstraint:


var sourceField = document.getElementById('anotherFieldId');
if (sourceField.value != '')
{
    var time = getDateFromFormat(sourceField.value, sourceField.getAttribute('_display_date_format'))
    if (time != 0)
    {
        time += 86400000; //milliseconds in a day
        var dateString = formatDate(new Date(time), sourceField.getAttribute('_data_date_format'));
        hyf.calendar.setRepeatDateConstraint('myRepeatId', 'myFieldId', 'Maximum', dateString);
    }
}