Selecting a datetime range in YII input form - yii

Question

Here is the problem.
I have to create a submission form on my Yii-based website. The form requires to enter a datetime range.For that I am using "jui datetimepicker" third-party Yii extension.
http://www.yiiframework.com/extension/datetimepicker/
I use two date fields with this extension pertaining to start and end time respectively. So, what I want to achieve is be able to restrict the start datetime only to time in the future (neither past dates nor time should be selected) and the end time itself should be restricted to the maximum of three hours following the start time.
EXAMPLE: a user wants to schedule an event. They choose a date and time, which are of course in the future. Let's say they choose March 15, 13 O'clock as the start time in the start time field. Once they are done and move to the next field ("end time"), the respective datetimepicker restricts the range of time from March 15, 13:00 to March 15, 16:00.
Hence the second datetimepicker should be dynamically updated depending on the input of the first one.
It's possible o specify date range in the datetimepicker starting from the current date, but there is nothing like that for the time selection, so a user still can select time which has already passed.
It's not that I want to solve this problem with this extention, if anybody has any suggestions about YII solutions allowing to specify a datetime range in the most clean and effective way - it would be much appreciated.

Answer 1

You should use the edaterangepicker extension instead.

Answer 2

Given the API for the jquery timepicker addon. you should add the following to your widget call (along side 'model','attribute', etc)
'options'=>array(
'minDateTime'=>'<start dateTime here>',
'onSelect'=>'<JS function to run>'
)
The function you run on the "onSelect" event should dynamically set the minDateTime for the second dateTime input field, for ex:
function (selectedDateTime){
<EndDatePickerElement>.datetimepicker('option', 'minDateTime', <start dateTime here using selectedDateTime> );
}
There are more examples on the link provided earlier if you need to make it even more precise (like say if you wanted the starting date to be pushed back by the amount of time the user was on the page rather than it being set when the page was loaded. etc...)