How to validate a date range in the back-end?

[Neo]

Unfortuantely, I was not able to find an answer to this particular question in the board.

For an event calendar, I am trying to create a date range. As, to my knowledge, ProcessWire does not provide a dedicated range field for dates, I am using a Datetime field for the start date and one for the end date for each event:

schedule_date_start
schedule_date_end

Now, I want to make sure that once a start date has been selected,  the end date should be chronologically situated after the start date (not before), which should be logical. 

How can I implement such a validation for the user?

[Raymond Geerts]

When using the jQuery datepicker in the backend for each Datetime field the following javascript might do the job. I have used this on front-end level, but it should work fine on back-end too.

var setDate,
    todayDate = new Date();

$('input[name=schedule_date_end]').attr('disabled', 'disabled');

$('input[name=schedule_date_start]').change(function() {
    setDate = $(this).val();
    if(setDate!='') {
        $('input[type=text][name=schedule_date_end]').datepicker( 'option', 'minDate', setDate ).removeAttr('disabled');
    }
    else {
        $('input[type=text][name=schedule_date_end]').datepicker( 'option', 'minDate', todayDate ).val('').attr('disabled', 'disabled');
    }
});

$('input[name=schedule_date_end]').change(function() {
    setDate = $(this).val();
    if(setDate!='') {
        $('input[type=text][name=schedule_date_start]').datepicker( 'option', 'maxDate', setDate ).removeAttr('disabled');
    }
    else {
        $('input[type=text][name=schedule_date_start]').datepicker( 'option', 'maxDate', null );
    }
});

To be able to use custom javascript in the back-end you could use Martijn's "Admin Custom Files" module for that.

[LostKobrakai]

There's no "core"-implemented way to validate this, as processwire does validated on a field by field basis. But you could hook into Pages::saveReady and clear or swap those dates if the end is before the start.

[Neo]

@Raymond thanks for your quick response.

So I created a JS-file, which I called "ProcessPageEdit.daterange.validate.js" and placed it in the "AdminCustomFiles" folder that was created by the module. Looking at the source code, the js.file appears in the back-end and validation also seems to work.