Multilingual jQuery Date Range Picker

by Posted on

Multilingual jQuery Date Range Picker – Are you working on multi language website and looking for a plugin to add date range feature on your website then In this post I am going to share Multilingual jQuery Date Range Picker. The Plugin support fully customizable, cross-browser and multi-language which enable the users to select custom date ranges. helpful to add this feature on reporting section of your website panel.

date range picker

Integrate Multilingual jQuery Date Range Picker

Libraries

Include all the required jQuery libraries + moment.js on page.

<!--CSS-->
<link rel="stylesheet" href="daterangepicker.css">
 
<!--JS-->
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="jquery.daterangepicker.js"></script>


HTML

Here is sample input field where date range picker need to integrate.

 <input id="date-range-picker" value="">

JS

Call the date range picker on input field with default feature.

$(function() {   
 $('#date-range-picker').dateRangePicker();
});

Using following options you can customize date range picker.

$(function() {   
  $('#date-range-picker').dateRangePicker({
	autoClose: false,
	format: 'YYYY-MM-DD',
	separator: ' to ',
	language: 'auto',
	startOfWeek: 'sunday',// or monday
	getValue: function()
	{
		return $(this).val();
	},
	setValue: function(s)
	{
		if(!$(this).attr('readonly') && !$(this).is(':disabled') && s != $(this).val())
		{
			$(this).val(s);
		}
	},
	startDate: false,
	endDate: false,
	time: {
		enabled: false
	},
	minDays: 0,
	maxDays: 0,
	showShortcuts: false,
	shortcuts:
	{
		//'prev-days': [1,3,5,7],
		//'next-days': [3,5,7],
		//'prev' : ['week','month','year'],
		//'next' : ['week','month','year']
	},
	customShortcuts : [],
	inline:false,
	container:'body',
	alwaysOpen:false,
	singleDate:false,
	lookBehind: false,
	batchMode: false,
	duration: 200,
	stickyMonths: false,
	dayDivAttrs: [],
	dayTdAttrs: [],
	applyBtnClass: '',
	singleMonth: 'auto',
	hoveringTooltip: function(days, startTime, hoveringTime)
	{
		return days > 1 ? days + ' ' + lang('days') : '';
	},
	showTopbar: true,
	swapTime: false,
	selectForward: false,
	selectBackward: false,
	showWeekNumbers: false,
	getWeekNumber: function(date) //date will be the first day of a week
	{
		return moment(date).format('w');
	},
	monthSelect: false,
	yearSelect: false
  });
});




Events will be triggerred on the date range picker DOM

$(function() {   
 $('#date-range-picker').dateRangePicker()
.bind('datepicker-first-date-selected', function(event, obj)
{
	/* This event will be triggered when first date is selected */
	console.log(obj);
	// obj will be something like this:
	// {
	// 		date1: (Date object of the earlier date)
	// }
})
.bind('datepicker-change',function(event,obj)
{
	/* This event will be triggered when second date is selected */
	console.log(obj);
	// obj will be something like this:
	// {
	// 		date1: (Date object of the earlier date),
	// 		date2: (Date object of the later date),
	//	 	value: "2013-06-05 to 2013-06-07"
	// }
})
.bind('datepicker-apply',function(event,obj)
{
	/* This event will be triggered when user clicks on the apply button */
	console.log(obj);
})
.bind('datepicker-close',function()
{
	/* This event will be triggered before date range picker close animation */
	console.log('before close');
})
.bind('datepicker-closed',function()
{
	/* This event will be triggered after date range picker close animation */
	console.log('after close');
})
.bind('datepicker-open',function()
{
	/* This event will be triggered before date range picker open animation */
	console.log('before open');
})
.bind('datepicker-opened',function()
{
	/* This event will be triggered after date range picker open animation */
	console.log('after open');
})
 
});

API Methods

$(function() {   
$('#date-range-picker').data('dateRangePicker')
    //set date range, two date strings should follow the `format` in config object,
    //set the third argument to be `true` if you don't want this method to trigger a `datepicker-change` event.
	.setDateRange('2013-11-20','2013-11-25');
	//set the start date to the specified date
	.setStart('2013-11-20');
	//set the end date to the specified date
	//set the second argument to `true` if you don't want this method to trigger a `datepicker-change` event.
	.setEnd('2013-11-25');
	.clear();		// clear date range
	.close();		// close date range picker overlay
	.open();		// open date range picker overlay
	.resetMonthsView();	// reset to default months
	.destroy();		// destroy all date range picker related things
});

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.


Published by admin