EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: A-K on October 06, 2014, 03:27:14 AM

Title: min/max values in Datetimebox
Post by: A-K on October 06, 2014, 03:27:14 AM

Hey,
Is there an option for min and max values in datetimebox?
I need to disable the dates that are not between the min and max value.

all I could do is check the date entered in the onchange event and clean the value
if its not between the min/max, But this solution is not user friendly and requires unnecessary clicks from the user.

Thanks.

Title: Re: min/max values in Datetimebox
Post by: jarry on October 07, 2014, 09:38:00 AM

The alternative solution is to extend a validation type to constrain the date value range. Please refer to this document http://www.jeasyui.com/documentation/validatebox.php

Title: Re: min/max values in Datetimebox
Post by: A-K on October 07, 2014, 09:49:05 AM

Thanks for the replay,
About the validation, it will still show all the dates that are not in the range
which may confuse the user, also the validation would be active when the user pressed a value
and the panel is closed and only then the error will be shown, or I am missing something?

I really need to not allow the user select the dates that are outside of the range and it should be
easily understood for the user which dates are valid and which not. If you can show
a simple example of the validation it would really help.

Thanks.

Title: Re: min/max values in Datetimebox
Post by: jarry on October 07, 2014, 06:33:33 PM

The validator function of calendar can be used to determine if a calendar day can be selected. The code below shows how to check constraint on date range.

Code:

$('#dd').datebox({
	min:'10/2/2014',
	max:'10/7/2014',
	onShowPanel:function(){
		var opts = $(this).datebox('options');
		$(this).datebox('calendar').calendar({
			validator: function(date){
				var min = opts.parser(opts.min);
				var max = opts.parser(opts.max);
				if (min <= date && date <= max){
					return true;
				} else {
					return false;
				}
			}
		});
	}
})