How to Implement Date Range Picker?

[poeziafree]

Hello

I have been struggling with implementing the date range picker similar to https://www.daterangepicker.com/

Is there any solution available? Two separate date boxes don't seem comfortable.

Thanks in advance

[jarry]

This is a very simple plugin to select a date range.

Code:

/**
 * daterangebox - EasyUI for jQuery
 */
(function($){
	function createBox(target){
		var state = $.data(target, 'daterangebox');
		var opts = state.options;
		
		$(target).addClass('daterangebox-f').combo($.extend({}, opts, {
			onShowPanel:function(){
				setValue(this, $(this).daterangebox('getText'));
				opts.onShowPanel.call(this);
			}
		}));
		if (!state.calendar1 && !state.calendar2){
			var panel = $(target).combo('panel').css('overflow','hidden').addClass('f-column');
			var cc = $('<div class="daterangebox-calendar-inner f-row f-full" style="height:100%"></div>').prependTo(panel);
			state.calendar1 = $('<div class="f-full"></div>').appendTo(cc).calendar({
				height: '100%'
			});
			state.calendar2 = $('<div class="f-full"></div>').appendTo(cc).calendar({
				height: '100%'
			});
			var buttons = $('<div class="datebox-button" style="text-align:center"></div>').appendTo(panel);
			var ok = $('<a class="datebox-button-a" href="javascript:;" style="line-height:30px;margin-right:30px">Ok</a>').appendTo(buttons);
			var cancel = $('<a class="datebox-button-a" href="javascript:;" style="line-height:30px;">Cancel</a>').appendTo(buttons);
			ok.on('click', function(){
				var value1 = $.fn.datebox.defaults.formatter.call(target, state.calendar1.calendar('options').current);
				var value2 = $.fn.datebox.defaults.formatter.call(target, state.calendar2.calendar('options').current);
				setValue(target, value1+opts.valueSeparator+value2);
				$(target).combo('hidePanel');
			});
			cancel.on('click', function(){
				$(target).combo('hidePanel');
			});
		}
	}
	function setValue(target, value){
		var state = $.data(target, 'daterangebox');
		var opts = state.options;
		var values = value.split(opts.valueSeparator);
		state.calendar1.calendar('moveTo', $.fn.datebox.defaults.parser.call(target, values[0]));
		state.calendar2.calendar('moveTo', $.fn.datebox.defaults.parser.call(target, values[1]));
		if (values[0]){
			values[0] = $.fn.datebox.defaults.formatter.call(target, state.calendar1.calendar('options').current);
		}
		if (values[1]){
			values[1] = $.fn.datebox.defaults.formatter.call(target, state.calendar2.calendar('options').current);
		}
		$(target).combo('setText', values.join(opts.valueSeparator)).combo('setValue', values.join(opts.valueSeparator));
	}
	$.fn.daterangebox = function(options, param){
		if (typeof options == 'string'){
			var method = $.fn.daterangebox.methods[options];
			if (method){
				return method(this, param);
			} else {
				return this.combo(options, param);
			}
		}
		options = options || {};
		return this.each(function(){
			var state = $.data(this, 'daterangebox');
			if (state){
				$.extend(state.options, options);
			} else {
				$.data(this, 'daterangebox', {
					options: $.extend({}, $.fn.daterangebox.defaults, $.fn.daterangebox.parseOptions(this), options)
				});
			}
			createBox(this);
		});
	};
	$.fn.daterangebox.methods = {
		options: function(jq){
			var copts = jq.combo('options');
			return $.extend($.data(jq[0], 'daterangebox').options, {
				width: copts.width,
				height: copts.height,
				originalValue: copts.originalValue,
				disabled: copts.disabled,
				readonly: copts.readonly
			});
		}
	};
	$.fn.daterangebox.parseOptions = function(target){
		return $.extend({}, $.fn.combo.parseOptions(target), $.parser.parseOptions(target, []));
	};
	$.fn.daterangebox.defaults = $.extend({}, $.fn.combo.defaults, {
		editable: false,
		valueSeparator: '-'
	});
})(jQuery);

[poeziafree]

Thanks, Jerry

Could you please provide an example of how to use it?

[jarry]

This is the usage example.

Code:

$(function(){
	$('#dr').daterangebox({
		panelWidth:600,
		panelHeight:300,

		value: '1/11/2022-1/17/2022',
		onChange: function(v1){
			console.log(v1)
		}
	})
})
<input id="dr" style="width:300px">