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',
	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:
	{
		
		
		
		
	},
	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) 
	{
		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)
{
	
	console.log(obj);
	
	
	
	
})
.bind('datepicker-change',function(event,obj)
{
	
	console.log(obj);
	
	
	
	
	//	 	value: "2013-06-05 to 2013-06-07"
	
})
.bind('datepicker-apply',function(event,obj)
{
	
	console.log(obj);
})
.bind('datepicker-close',function()
{
	
	console.log('before close');
})
.bind('datepicker-closed',function()
{
	
	console.log('after close');
})
.bind('datepicker-open',function()
{
	
	console.log('before open');
})
.bind('datepicker-opened',function()
{
	
	console.log('after open');
})
 
});

API Methods

$(function() {   
$('#date-range-picker').data('dateRangePicker')
    
    
	.setDateRange('2013-11-20','2013-11-25');
	
	.setStart('2013-11-20');
	
	
	.setEnd('2013-11-25');
	.clear();		
	.close();		
	.open();		
	.resetMonthsView();	
	.destroy();		
});

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