DateRange Picker - Multipurpose Date Range Picker (WordPress Plugin)


If you have any query that are beyond the scope of this help file, please feel free to email us through Item Page Support Tab. Thanks so much!

Item Support

Thank you for purchasing the Item. If you have any questions that are beyond the scope of this help file, please feel free to email us with mention Purchase Code ( Where Is My Purchase Code?) via my user page contact form here. You can also Ping Us through Item Page Support Tab (better and fast). Thanks so much!


DateRange Picker is a Full Responsive Multipurpose Date Range Picker WordPress plugin. It can be simply integrated at your site easily and can be used with the proper documentation help. It looks great with all types of devices. Try out the demo.

Features


  • Full Calendar Date Range Picker
  • Easy month and year switch
  • Multi language (Included Instructions in Documentation)
  • 100% Responsive & Mobile-Friendly Layout
  • Browser Compatibility
  • Fully Customizable
  • Easy integration into your site
  • Well Documentation ( proper help instructions )
  • Dedicated Support
  • and Much More!

Installation


After extract the main zip file, you'll see these folders and files:

  • daterange-picker.zip >> Main Plugin package
  • daterange-picker-documentation >> help file folder

Each WordPress plugin can be installed in two ways: via ftp client or through the admin panel:

Installing Plugin via FTP client:
Installing Plugin via WordPress Admin Panel:

Settings


Spacial Note - You must have to follow
Please be noted that you must should not use: <script> tag. Just write the js code for your settings
mgsdaterangepicker-settings-js
Daterangepicker Calendar Setting
calendar-settings

You can mange any form just you have to know Form field name

calendar-settings
Daterangepicker Calendar Label Text Customization

$('input[name="hotelresvdaterange"]').daterangepicker({
locale: {
	format: 'MM-DD-YYYY',
        "separator": " - ",
        "applyLabel": "Apply",
        "cancelLabel": "Cancel",
        "customRangeLabel": "Custom Range",
	daysOfWeek: [
		"SUN",
		"MON",
		"TUE",
		"WED",
		"THU",
		"FRI",
		"SAT"
	],
	monthNames: [
		"January",
		"February",

calendar-label-text
Daterangepicker Calendar Language Setting
calendar-language-setting

If Your required Calendar Language is not English: Put the following js code in the DateRange Picker Custom Scripts settings option at very top:


moment.locale('fr');

- where "fr" is the Language Code. You have to change "fr" with your required Language Code
french-lang-cal french-lang-cal

DateRange Picker


Some Different Styles DateRange Picker JS (Matching Demo with Style-no. ...)

Demo: Custom Form example      Demo: Contact Form 7 example

Style-1: with Dropdown and Date Format: MM-DD-YYYY. Noted Field name reservationdatedaterange

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatedaterange" id="reservationdatedaterange" type="text" readonly required>

var todayDate = moment();
var next3days = moment().add(3, 'days');

$('input[name="reservationdatedaterange"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY',
		"separator": " to ",	//remove this line for default separator (-)
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	startDate: todayDate,
	endDate: next3days
});

Minified JS (Default Short Calendar Label English Text)

var todayDate = moment();
var next3days = moment().add(3, 'days');

$('input[name="reservationdatedaterange"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY',
		firstDay: 0
	},
	showDropdowns: true,
	startDate: todayDate,
	endDate: next3days
});

Style-1-2: Without Dropdown and Short Calendar Label Text - Date Format: DD MMMM, YYYY. Noted Field name reservationdatedaterange1

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatedaterange1" id="reservationdatedaterange1" type="text" readonly required>

var todayDate = moment();
var next3days = moment().add(3, 'days');

$('input[name="reservationdatedaterange1"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY'
	},
	startDate: todayDate,
	endDate: next3days
});

Style-2: Without Dropdown and All Past/Previous Days Disable. Noted Field name reservationdatedaterange2

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatedaterange2" id="reservationdatedaterange2" type="text" readonly required>

var todayDate = moment();
var next3days = moment().add(3, 'days');
var next5days = moment().add(5, 'days');

$('input[name="reservationdatedaterange2"]').daterangepicker({
	locale: {
		format: 'YYYY-MM-DD',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	startDate: next3days,
	endDate: next5days,
	minDate: todayDate
});

Minified JS (Default Short Calendar Label English Text)

var todayDate = moment();
var next3days = moment().add(3, 'days');
var next5days = moment().add(5, 'days');

$('input[name="reservationdatedaterange2"]').daterangepicker({
	locale: {
		format: 'YYYY-MM-DD',
		firstDay: 0
	},
	startDate: next3days,
	endDate: next5days,
	minDate: todayDate
});

Style-3: On Clck Apply button will Show Alert Box for Selected date. Noted Field name reservationdatedaterange3

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatedaterange3" id="reservationdatedaterange3" type="text" readonly required>

var todayDate = moment();
var nextWeek = moment().add(7, 'days');

$('input[name="reservationdatedaterange3"]').daterangepicker({
	locale: {
		format: 'YYYY/MM/DD',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	startDate: todayDate,
	endDate: nextWeek
	}, function(start, end, label) {
		alert("Your chosen date: " + start.format('YYYY/MM/DD') + ' to ' + end.format('YYYY/MM/DD'));
	}
);

Minified JS (Default Short Calendar Label English Text)

var todayDate = moment();
var nextWeek = moment().add(7, 'days');

$('input[name="reservationdatedaterange3"]').daterangepicker({
	locale: {
		format: 'YYYY/MM/DD',
		firstDay: 0
	},
	showDropdowns: true,
	startDate: todayDate,
	endDate: nextWeek
	}, function(start, end, label) {
		alert("Your chosen date: " + start.format('YYYY/MM/DD') + ' to ' + end.format('YYYY/MM/DD'));
	}
);

Style-4: Without Dropdown and Set minDate - Date Active from the Next Week. Noted Field name reservationdatedaterange4

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatedaterange4" id="reservationdatedaterange4" type="text" readonly required>

var nextWeek = moment().add(7, 'days');
var nextMonth = moment().add(30, 'days');

$('input[name="reservationdatedaterange4"]').daterangepicker({
	locale: {
		format: 'MM/DD/YYYY',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	endDate: nextMonth,
	minDate: nextWeek
	}, function(start, end, label) {
		alert("Your chosen date: " + start.format('MM/DD/YYYY') + ' to ' + end.format('MM/DD/YYYY'));
	}
);

Minified JS (Default Short Calendar Label English Text)

var nextWeek = moment().add(7, 'days');
var nextMonth = moment().add(30, 'days');

$('input[name="reservationdatedaterange4"]').daterangepicker({
	locale: {
		format: 'MM/DD/YYYY',
		firstDay: 0
	},
	endDate: nextMonth,
	minDate: nextWeek
	}, function(start, end, label) {
		alert("Your chosen date: " + start.format('MM/DD/YYYY') + ' to ' + end.format('MM/DD/YYYY'));
	}
);

Style-5: With Dropdown and Set minDate - Date Active from the Next Week. Noted Field name reservationdatedaterange5

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatedaterange5" id="reservationdatedaterange5" type="text" readonly required>

var nextWeek = moment().add(7, 'days');
var nextMonth = moment().add(30, 'days');

$('input[name="reservationdatedaterange5"]').daterangepicker({
	locale: {
		format: 'MMMM DD, YYYY',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	endDate: nextMonth,
	minDate: nextWeek
});

Minified JS (Default Short Calendar Label English Text)

var nextWeek = moment().add(7, 'days');
var nextMonth = moment().add(30, 'days');

$('input[name="reservationdatedaterange5"]').daterangepicker({
	locale: {
		format: 'MMMM DD, YYYY',
		firstDay: 0
	},
	showDropdowns: true,
	endDate: nextMonth,
	minDate: nextWeek
});

Style-6: Set minDate and maxDate - Date Active for a specific Date Range (December Current Year). Noted Field name reservationdatedaterange6

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatedaterange6" id="reservationdatedaterange6" type="text" readonly required>

var dt = new Date();
var cy = dt.getFullYear();
var minDates = '1 December, ' + cy;
var maxDates = '31 December, ' + cy;

$('input[name="reservationdatedaterange6"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	endDate: maxDates,
	minDate: minDates,
	maxDate: maxDates
	}, function(start, end, label) {
		alert("Your chosen date: " + start.format('DD MMMM, YYYY') + ' to ' + end.format('DD MMMM, YYYY'));
	}
);

Minified JS (Default Short Calendar Label English Text)

var dt = new Date();
var cy = dt.getFullYear();
var minDates = '1 December, ' + cy;
var maxDates = '31 December, ' + cy;

$('input[name="reservationdatedaterange6"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY',
		firstDay: 0
	},
	endDate: maxDates,
	minDate: minDates,
	maxDate: maxDates
	}, function(start, end, label) {
		alert("Your chosen date: " + start.format('DD MMMM, YYYY') + ' to ' + end.format('DD MMMM, YYYY'));
	}
);

Style-6-2: Set minDate and maxDate - Date Active for a specific Date Range (20 August - 20 September, 2027). Noted Field name reservationdatedaterange6-2

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatedaterange6-2" id="reservationdatedaterange6-2" type="text" readonly required>

$('input[name="reservationdatedaterange6-2"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	endDate: '20 September, 2027',
	minDate: '20 August, 2027',
	maxDate: '20 September, 2027'
	}, function(start, end, label) {
		alert("Your chosen date: " + start.format('DD MMMM, YYYY') + ' to ' + end.format('DD MMMM, YYYY'));
	}
);

Minified JS (Default Short Calendar Label English Text)

$('input[name="reservationdatedaterange6-2"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY',
		firstDay: 0
	},
	endDate: '20 September, 2027',
	minDate: '20 August, 2027',
	maxDate: '20 September, 2027'
	}, function(start, end, label) {
		alert("Your chosen date: " + start.format('DD MMMM, YYYY') + ' to ' + end.format('DD MMMM, YYYY'));
	}
);

Style-7: Predefined Ranges as Like: Yesterday, Last 7 Days, Last 30 Days, Next 7 Days, This Month, Last Month. Noted Field name reservationdatedaterange7

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatedaterange7" id="reservationdatedaterange7" type="text" readonly required>

var start = moment().subtract(10, 'days');
var end = moment();

function drv(start, end) {
	$('input[name="reservationdatedaterange7"]').val(start.format('DD MMMM, YYYY') + ' - ' + end.format('DD MMMM, YYYY'));
}

$('input[name="reservationdatedaterange7"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY HH:mm',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	autoUpdateInput: false,
	startDate: start,
	endDate: end,
	ranges: {
	   'Today': [moment(), moment()],
	   'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
	   'Last 7 Days': [moment().subtract(6, 'days'), moment()],
	   'Last 30 Days': [moment().subtract(29, 'days'), moment()],
	   'Next 7 Days': [moment(), moment().add(7, 'days')],
	   'This Month': [moment().startOf('month'), moment().endOf('month')],
	   'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
	}
}, drv);
drv(start, end);

Minified JS (Default Short Calendar Label English Text)

var start = moment().subtract(10, 'days');
var end = moment();

function drv(start, end) {
	$('input[name="reservationdatedaterange7"]').val(start.format('DD MMMM, YYYY') + ' - ' + end.format('DD MMMM, YYYY'));
}

$('input[name="reservationdatedaterange7"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY HH:mm',
		firstDay: 0
	},
	showDropdowns: true,
	autoUpdateInput: false,
	startDate: start,
	endDate: end,
	ranges: {
	   'Today': [moment(), moment()],
	   'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
	   'Last 7 Days': [moment().subtract(6, 'days'), moment()],
	   'Last 30 Days': [moment().subtract(29, 'days'), moment()],
	   'Next 7 Days': [moment(), moment().add(7, 'days')],
	   'This Month': [moment().startOf('month'), moment().endOf('month')],
	   'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
	}
}, drv);
drv(start, end);

Style-8: All Past Day Disable and Short Calendar Label Text and Apply/Cancel Button Disable On date select will Show Alert Box for Selected date. Noted Field name reservationdatedaterange8

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatedaterange8" id="reservationdatedaterange8" type="text" readonly required>

var todayDate = moment();
var next3days = moment().add(3, 'days');
var next5days = moment().add(5, 'days');

$('input[name="reservationdatedaterange8"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY'
	},
	showDropdowns: true,
	startDate: next3days,
	endDate: next5days,
	minDate: todayDate
	}, function(start, end, label) {
		alert("Your chosen date: " + start.format('DD MMMM, YYYY') + ' to ' + end.format('DD MMMM, YYYY'));
	}
);

Style-9: With Dropdown All Past Day Disable and Apply/Cancel Button Disable. Noted Field name reservationdatedaterange9

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatedaterange9" id="reservationdatedaterange9" type="text" readonly required>

var todayDate = moment();
var next3days = moment().add(3, 'days');
var next5days = moment().add(5, 'days');

$('input[name="reservationdatedaterange9"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	autoApply: true,
	startDate: next3days,
	endDate: next5days,
	minDate: todayDate
});

Minified JS (Default Short Calendar Label English Text)

var todayDate = moment();
var next3days = moment().add(3, 'days');
var next5days = moment().add(5, 'days');

$('input[name="reservationdatedaterange9"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY',
		firstDay: 0
	},
	showDropdowns: true,
	autoApply: true,
	startDate: next3days,
	endDate: next5days,
	minDate: todayDate
});

Style-10: Without Dropdown All Past Day Disable and Apply/Cancel Button Disable On date select will Show Alert Box for Selected date. Noted Field name reservationdatedaterange10

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatedaterange10" id="reservationdatedaterange10" type="text" readonly required>

var todayDate = moment();
var next3days = moment().add(3, 'days');
var next5days = moment().add(5, 'days');

$('input[name="reservationdatedaterange10"]').daterangepicker({
	locale: {
		format: 'MMMM DD, YYYY',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	autoApply: true,
	startDate: next3days,
	endDate: next5days,
	minDate: todayDate
	}, function(start, end, label) {
		alert("Your chosen date: " + start.format('MMMM DD, YYYY') + ' to ' + end.format('MMMM DD, YYYY'));
	}
);

Minified JS (Default Short Calendar Label English Text)

var todayDate = moment();
var next3days = moment().add(3, 'days');
var next5days = moment().add(5, 'days');

$('input[name="reservationdatedaterange10"]').daterangepicker({
	locale: {
		format: 'MMMM DD, YYYY',
		firstDay: 0
	},
	showDropdowns: true,
	autoApply: true,
	startDate: next3days,
	endDate: next5days,
	minDate: todayDate
	}, function(start, end, label) {
		alert("Your chosen date: " + start.format('MMMM DD, YYYY') + ' to ' + end.format('MMMM DD, YYYY'));
	}
);

Style-11: Calendar Show Number of the Week. Noted Field name reservationdatedaterange11

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatedaterange11" id="reservationdatedaterange11" type="text" readonly required>

var next3days = moment().add(3, 'days');
var next5days = moment().add(5, 'days');

$('input[name="reservationdatedaterange11"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	showWeekNumbers: true,
	startDate: next3days,
	endDate: next5days
});

Minified JS (Default Short Calendar Label English Text)

var next3days = moment().add(3, 'days');
var next5days = moment().add(5, 'days');

$('input[name="reservationdatedaterange11"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY',
		firstDay: 0
	},
	showDropdowns: true,
	showWeekNumbers: true,
	startDate: next3days,
	endDate: next5days
});

Style-12: In this example more than 10 days select will not be possible. Noted Field name reservationdatedaterange12

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatedaterange12" id="reservationdatedaterange12" type="text" readonly required>

var next5days = moment().add(5, 'days');
var next15days = moment().add(15, 'days');

$('input[name="reservationdatedaterange12"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	dateLimit: {
		days: 10
	},
	showDropdowns: true,
	startDate: next5days,
	endDate: next15days
});

Minified JS (Default Short Calendar Label English Text)

var next5days = moment().add(5, 'days');
var next15days = moment().add(15, 'days');

$('input[name="reservationdatedaterange12"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY',
		firstDay: 0
	},
	dateLimit: {
		days: 10
	},
	showDropdowns: true,
	startDate: next5days,
	endDate: next15days
});

Style-13: Calendar with 12 hour Clock. Noted Field name reservationdatedaterange13

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatedaterange13" id="reservationdatedaterange13" type="text" readonly required>

var next5days = moment().add(5, 'days');
var next15days = moment().add(15, 'days');

$('input[name="reservationdatedaterange13"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY h:mm A',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	timePicker: true,
	startDate: next5days,
	endDate: next15days
});

Minified JS (Default Short Calendar Label English Text)

var next5days = moment().add(5, 'days');
var next15days = moment().add(15, 'days');

$('input[name="reservationdatedaterange13"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY h:mm A',
		firstDay: 0
	},
	showDropdowns: true,
	timePicker: true,
	startDate: next5days,
	endDate: next15days
});

Style-13-2: Calendar with 24 hour Clock. Noted Field name reservationdatedaterange13-2

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatedaterange13-2" id="reservationdatedaterange13-2" type="text" readonly required>

var next5days = moment().add(5, 'days');
var next15days = moment().add(15, 'days');

$('input[name="reservationdatedaterange13-2"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY H:mm',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	timePicker: true,
	timePicker24Hour: true,
	startDate: next5days,
	endDate: next15days
});

Minified JS (Default Short Calendar Label English Text)

var next5days = moment().add(5, 'days');
var next15days = moment().add(15, 'days');

$('input[name="reservationdatedaterange13-2"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY H:mm',
		firstDay: 0
	},
	showDropdowns: true,
	timePicker: true,
	timePicker24Hour: true,
	startDate: next5days,
	endDate: next15days
});

Style-14: Calendar in French Date Format: DD/MM/YYYY. Noted Field name reservationdatedaterange14

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatedaterange14" id="reservationdatedaterange14" type="text" readonly required>

moment.locale('fr');
var next5days = moment().add(5, 'days');
var next10days = moment().add(10, 'days');

$('input[name="reservationdatedaterange14"]').daterangepicker({
	locale: {
		format: 'DD/MM/YYYY',
        "applyLabel": "Appliquer",
        "cancelLabel": "Annuler",
		daysOfWeek: [
			"Dim",
			"Lun",
			"Mar",
			"Mer",
			"Jeu",
			"Ven",
			"Sam"
		],
		monthNames: [
			"Janvier",
			"Février",
			"Mars",
			"Avril",
			"Mai",
			"Juin",
			"Juillet",
			"Août",
			"Septembre",
			"Octobre",
			"Novembre",
			"Décembre"
		],
		firstDay: 0
	},
	showDropdowns: true,
	startDate: next5days,
	endDate: next10days
});

Minified JS (Default Short Calendar Label)

moment.locale('fr');
var next5days = moment().add(5, 'days');
var next10days = moment().add(10, 'days');

$('input[name="reservationdatedaterange14"]').daterangepicker({
	locale: {
		format: 'DD/MM/YYYY',
        "applyLabel": "Appliquer",
        "cancelLabel": "Annuler",
		firstDay: 0
	},
	showDropdowns: true,
	startDate: next5days,
	endDate: next10days
});

Style-14-2: Calendar in French Date Format: DD MMMM, YYYY. Noted Field name reservationdatedaterange14-2

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatedaterange14-2" id="reservationdatedaterange14-2" type="text" readonly required>

moment.locale('fr');
var next5days = moment().add(5, 'days');
var next10days = moment().add(10, 'days');

$('input[name="reservationdatedaterange14-2"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY',
        "applyLabel": "Appliquer",
        "cancelLabel": "Annuler",
		daysOfWeek: [
			"Dim",
			"Lun",
			"Mar",
			"Mer",
			"Jeu",
			"Ven",
			"Sam"
		],
		monthNames: [
			"Janvier",
			"Février",
			"Mars",
			"Avril",
			"Mai",
			"Juin",
			"Juillet",
			"Août",
			"Septembre",
			"Octobre",
			"Novembre",
			"Décembre"
		],
		firstDay: 0
	},
	showDropdowns: true,
	startDate: next5days,
	endDate: next10days
});

Minified JS (Default Short Calendar Label)

moment.locale('fr');
var next5days = moment().add(5, 'days');
var next10days = moment().add(10, 'days');

$('input[name="reservationdatedaterange14-2"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY',
        "applyLabel": "Appliquer",
        "cancelLabel": "Annuler",
		firstDay: 0
	},
	showDropdowns: true,
	startDate: next5days,
	endDate: next10days
});

Style-15: Default value Blank and Week Start day: Saturday. Noted Field name reservationdatedaterange15

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatedaterange15" id="reservationdatedaterange15" type="text" readonly required>

$('input[name="reservationdatedaterange15"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 6
	},
	showDropdowns: true,
	autoUpdateInput: false
});

$('input[name="reservationdatedaterange15"]').on('apply.daterangepicker', function(ev, picker) {
	$(this).val(picker.startDate.format('DD MMMM, YYYY') + ' - ' + picker.endDate.format('DD MMMM, YYYY'));
});

$('input[name="reservationdatedaterange15"]').on('cancel.daterangepicker', function(ev, picker) {
	$(this).val('');
});

Minified JS (Default Short Calendar Label English Text)

$('input[name="reservationdatedaterange15"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY',
		firstDay: 6
	},
	showDropdowns: true,
	autoUpdateInput: false
});

$('input[name="reservationdatedaterange15"]').on('apply.daterangepicker', function(ev, picker) {
	$(this).val(picker.startDate.format('DD MMMM, YYYY') + ' - ' + picker.endDate.format('DD MMMM, YYYY'));
});

$('input[name="reservationdatedaterange15"]').on('cancel.daterangepicker', function(ev, picker) {
	$(this).val('');
});

Style-16: Set startHour and endHour Only for 24hours mode. Noted Field name reservationdatedaterange16

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatedaterange16" id="reservationdatedaterange16" type="text" readonly required>

$('input[name="reservationdatedaterange16"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY H:mm',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 6
	},
	showDropdowns: true,
	timePicker: true,
	timePicker24Hour: true,
	startHour: 9,
	endHour: 17,
	timePickerIncrement: 5,
	startDate: next3days,
	endDate: next5days,
	minDate: todayDate
});

Minified JS (Default Short Calendar Label English Text)

$('input[name="reservationdatedaterange16"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY H:mm',
		firstDay: 6
	},
	showDropdowns: true,
	timePicker: true,
	timePicker24Hour: true,
	startHour: 9,
	endHour: 17,
	timePickerIncrement: 5,
	startDate: next3days,
	endDate: next5days,
	minDate: todayDate
});

Style-17: Enabled Hours Only for 24hours mode. Noted Field name reservationdatedaterange17

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatedaterange17" id="reservationdatedaterange17" type="text" readonly required>

$('input[name="reservationdatedaterange17"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY H:mm',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 6
	},
	showDropdowns: true,
	timePicker: true,
	timePicker24Hour: true,
	showEnabledHour: true,
	enabledHour: [8,9,10,11,12,13,14,17,18,19,20,21,22],
	timePickerIncrement: 5,
	startDate: next5days,
	endDate: next10days,
	minDate: todayDate
});

Minified JS (Default Short Calendar Label English Text)

$('input[name="reservationdatedaterange17"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY H:mm',
		firstDay: 6
	},
	showDropdowns: true,
	timePicker: true,
	timePicker24Hour: true,
	showEnabledHour: true,
	enabledHour: [8,9,10,11,12,13,14,17,18,19,20,21,22],
	timePickerIncrement: 5,
	startDate: next5days,
	endDate: next10days,
	minDate: todayDate
});

Style-18: Set Booking active after 16 hours from current time and Set startHour and endHour. Noted Field name reservationdatedaterange18

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatedaterange18" id="reservationdatedaterange18" type="text" readonly required>

$('input[name="reservationdatedaterange18"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY H:mm',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 6
	},
	showDropdowns: true,
	timePicker: true,
	timePicker24Hour: true,
	startHour: 9,
	endHour: 17,
	timePickerIncrement: 5,
	startDate: next3days,
	endDate: next5days,
	minDate: moment().startOf('hour').add(16, 'hour')
});

Minified JS (Default Short Calendar Label English Text)

$('input[name="reservationdatedaterange18"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY H:mm',
		firstDay: 6
	},
	showDropdowns: true,
	timePicker: true,
	timePicker24Hour: true,
	startHour: 9,
	endHour: 17,
	timePickerIncrement: 5,
	startDate: next3days,
	endDate: next5days,
	minDate: moment().startOf('hour').add(16, 'hour')
});

Single Date Picker


Some Different Styles Single Date Picker JS (Matching Demo with Style-no. )

Demo: Custom Form example      Demo: Contact Form 7 example

Style-1: with Dropdown and Date Format: MM-DD-YYYY. Noted Field name reservationdatesingledate

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledate" id="reservationdatesingledate" type="text" readonly required>

var todayDate = moment();

$('input[name="reservationdatesingledate"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	startDate: todayDate
});

Minified JS (Default Short Calendar Label English Text)

var todayDate = moment();

$('input[name="reservationdatesingledate"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY',
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	startDate: todayDate
});

Style-1-2: Without Dropdown and Short Calendar Label Text - Date Format: MM-DD-YYYY. Noted Field name reservationdatesingledate1

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledate1" id="reservationdatesingledate1" type="text" readonly required>

var todayDate = moment();

$('input[name="reservationdatesingledate1"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY'
	},
	singleDatePicker: true,
	startDate: todayDate
});

Style-2: All Future Date Disable as like for Date of Birth - Date Format: MMMM DD, YYYY. Noted Field name reservationdatesingledate2

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledate2" id="reservationdatesingledate2" type="text" readonly required>

var todayDate = moment();

$('input[name="reservationdatesingledate2"]').daterangepicker({
	locale: {
		format: 'MMMM DD, YYYY',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	startDate: todayDate,
	maxDate: todayDate
});

Minified JS (Default Short Calendar Label English Text)

var todayDate = moment();

$('input[name="reservationdatesingledate2"]').daterangepicker({
	locale: {
		format: 'MMMM DD, YYYY',
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	startDate: todayDate,
	maxDate: todayDate
});

Style-3: Style With Dropdown and Date Format: YYYY/MM/DD. Noted Field name reservationdatesingledate3

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledate3" id="reservationdatesingledate3" type="text" readonly required>

var todayDate = moment();

$('input[name="reservationdatesingledate3"]').daterangepicker({
	locale: {
		format: 'YYYY/MM/DD',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	startDate: todayDate
});

Minified JS (Default Short Calendar Label English Text)

var todayDate = moment();

$('input[name="reservationdatesingledate3"]').daterangepicker({
	locale: {
		format: 'YYYY/MM/DD',
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	startDate: todayDate
});

Style-3-2: Style Without Dropdown and Date Format: YYYY/MM/DD. Noted Field name reservationdatesingledate3-2

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledate3-2" id="reservationdatesingledate3-2" type="text" readonly required>

var todayDate = moment();

$('input[name="reservationdatesingledate3-2"]').daterangepicker({
	locale: {
		format: 'YYYY/MM/DD',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	singleDatePicker: true,
	startDate: todayDate
});

Minified JS (Default Short Calendar Label English Text)

var todayDate = moment();

$('input[name="reservationdatesingledate3-2"]').daterangepicker({
	locale: {
		format: 'YYYY/MM/DD',
		firstDay: 0
	},
	singleDatePicker: true,
	startDate: todayDate
});

Style-4: Set minDate - Date Active from the Next Week. Noted Field name reservationdatesingledate4

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledate4" id="reservationdatesingledate4" type="text" readonly required>

var nextWeek = moment().add(7, 'days');

$('input[name="reservationdatesingledate4"]').daterangepicker({
	locale: {
		format: 'MM/DD/YYYY',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	minDate: nextWeek
});

Minified JS (Default Short Calendar Label English Text)

var nextWeek = moment().add(7, 'days');

$('input[name="reservationdatesingledate4"]').daterangepicker({
	locale: {
		format: 'MM/DD/YYYY',
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	minDate: nextWeek
});

Style-5: Set minDate - Date Active from the Next Week - Date Format: MMMM DD, YYYY. Noted Field name reservationdatesingledate5

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledate5" id="reservationdatesingledate5" type="text" readonly required>

var nextWeek = moment().add(7, 'days');

$('input[name="reservationdatesingledate5"]').daterangepicker({
	locale: {
		format: 'MMMM DD, YYYY',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	minDate: nextWeek
});

Minified JS (Default Short Calendar Label English Text)

var nextWeek = moment().add(7, 'days');

$('input[name="reservationdatesingledate5"]').daterangepicker({
	locale: {
		format: 'MMMM DD, YYYY',
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	minDate: nextWeek
});

Style-6: Set minDate and maxDate - Date Active for a specific Date Range (December Current Year). Noted Field name reservationdatesingledate6

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledate6" id="reservationdatesingledate6" type="text" readonly required>

var dt = new Date();
var cy = dt.getFullYear();
var minDates = '1 December, ' + cy;
var maxDates = '31 December, ' + cy;

$('input[name="reservationdatesingledate6"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	singleDatePicker: true,
	minDate: minDates,
	maxDate: maxDates
});

Minified JS (Default Short Calendar Label English Text)

var dt = new Date();
var cy = dt.getFullYear();
var minDates = '1 December, ' + cy;
var maxDates = '31 December, ' + cy;

$('input[name="reservationdatesingledate6"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY',
		firstDay: 0
	},
	singleDatePicker: true,
	minDate: minDates,
	maxDate: maxDates
});

Style-6-2: Set minDate and maxDate - Date Active for a specific Date Range (20 August - 20 September, 2027). Noted Field name reservationdatesingledate6-2

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledate6-2" id="reservationdatesingledate6-2" type="text" readonly required>

$('input[name="reservationdatesingledate6-2"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	singleDatePicker: true,
	minDate: '20 August, 2027',
	maxDate: '20 September, 2027'
});

Minified JS (Default Short Calendar Label English Text)

$('input[name="reservationdatesingledate6-2"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY',
		firstDay: 0
	},
	singleDatePicker: true,
	minDate: '20 August, 2027',
	maxDate: '20 September, 2027'
});

Style-7: Set minDate and maxDate - Date Active for a specific Date Range (20 August Current Year - Next 3 Years). Noted Field name reservationdatesingledate7

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledate7" id="reservationdatesingledate7" type="text" readonly required>

$('input[name="reservationdatesingledate7"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	showDropdowns: true,
	minDate: '20 August, 2018',
	maxDate: '20 August, 2020'
});

Minified JS (Default Short Calendar Label English Text)

$('input[name="reservationdatesingledate7"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY',
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	showDropdowns: true,
	minDate: '20 August, 2018',
	maxDate: '20 August, 2020'
});

Style-8: All Past Day Disable as like for Card Expired Date. Noted Field name reservationdatesingledate8

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledate8" id="reservationdatesingledate8" type="text" readonly required>

var todayDate = moment();
var next3days = moment().add(3, 'days');

$('input[name="reservationdatesingledate8"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY'
	},
	showDropdowns: true,
	singleDatePicker: true,
	startDate: next3days,
	minDate: todayDate
});

Style-9: All Past Day Disable as like for Card Expired Date. Noted Field name reservationdatesingledate9

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledate9" id="reservationdatesingledate9" type="text" readonly required>

var todayDate = moment();
var next3days = moment().add(3, 'days');

$('input[name="reservationdatesingledate9"]').daterangepicker({
	locale: {
		format: 'MMMM, YYYY',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	startDate: next3days,
	minDate: todayDate
});

Minified JS (Default Short Calendar Label English Text)

var todayDate = moment();
var next3days = moment().add(3, 'days');

$('input[name="reservationdatesingledate9"]').daterangepicker({
	locale: {
		format: 'MMMM, YYYY',
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	startDate: next3days,
	minDate: todayDate
});

Style-10: All Past Day Disable and On date select will Show Alert Box for Selected date. Noted Field name reservationdatesingledate10

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledate10" id="reservationdatesingledate10" type="text" readonly required>

var todayDate = moment();
var next3days = moment().add(3, 'days');

$('input[name="reservationdatesingledate10"]').daterangepicker({
	locale: {
		format: 'MMMM DD, YYYY',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	startDate: next3days,
	minDate: todayDate
	}, function(start, end, label) {
		alert("Your chosen date: " + start.format('MMMM DD, YYYY'));
	}
);

Minified JS (Default Short Calendar Label English Text)

var todayDate = moment();
var next3days = moment().add(3, 'days');

$('input[name="reservationdatesingledate10"]').daterangepicker({
	locale: {
		format: 'MMMM DD, YYYY',
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	startDate: next3days,
	minDate: todayDate
	}, function(start, end, label) {
		alert("Your chosen date: " + start.format('MMMM DD, YYYY'));
	}
);

Style-11: Calendar Show Number of the Week. Noted Field name reservationdatesingledate11

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledate11" id="reservationdatesingledate11" type="text" readonly required>

var next3days = moment().add(3, 'days');

$('input[name="reservationdatesingledate11"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	showWeekNumbers: true,
	startDate: next3days
});

Minified JS (Default Short Calendar Label English Text)

var next3days = moment().add(3, 'days');

$('input[name="reservationdatesingledate11"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY',
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	showWeekNumbers: true,
	startDate: next3days
});

Style-12: Set Start Date after 15 Days from the current Date. Noted Field name reservationdatesingledate12

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledate12" id="reservationdatesingledate12" type="text" readonly required>

var next15days = moment().add(15, 'days');

$('input[name="reservationdatesingledate12"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	minDate: next15days
});

Minified JS (Default Short Calendar Label English Text)

var next15days = moment().add(15, 'days');

$('input[name="reservationdatesingledate12"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY',
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	minDate: next15days
});

Style-13: Calendar with 12 hour Clock. Noted Field name reservationdatesingledate13

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledate13" id="reservationdatesingledate13" type="text" readonly required>

var next5days = moment().add(5, 'days');

$('input[name="reservationdatesingledate13"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY h:mm A',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	startDate: next5days
});

Minified JS (Default Short Calendar Label English Text)

var next5days = moment().add(5, 'days');

$('input[name="reservationdatesingledate13"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY h:mm A',
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	startDate: next5days
});

Style-13-2: Calendar with 24 hour Clock. Noted Field name reservationdatesingledate13-2

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledate13-2" id="reservationdatesingledate13-2" type="text" readonly required>

var next5days = moment().add(5, 'days');

$('input[name="reservationdatesingledate13-2"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY H:mm',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePicker24Hour: true,
	startDate: next5days
});

Minified JS (Default Short Calendar Label English Text)

var next5days = moment().add(5, 'days');

$('input[name="reservationdatesingledate13-2"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY H:mm',
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePicker24Hour: true,
	startDate: next5days
});

Style-14: Calendar in French. Noted Field name reservationdatesingledate14

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledate14" id="reservationdatesingledate14" type="text" readonly required>

moment.locale('fr');
var next5days = moment().add(5, 'days');

$('input[name="reservationdatesingledate14"]').daterangepicker({
	locale: {
		format: 'DD/MM/YYYY',
        "applyLabel": "Appliquer",
        "cancelLabel": "Annuler",
		daysOfWeek: [
			"Dim",
			"Lun",
			"Mar",
			"Mer",
			"Jeu",
			"Ven",
			"Sam"
		],
		monthNames: [
			"Janvier",
			"Février",
			"Mars",
			"Avril",
			"Mai",
			"Juin",
			"Juillet",
			"Août",
			"Septembre",
			"Octobre",
			"Novembre",
			"Décembre"
		],
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	startDate: next5days
});

Minified JS (Default Short Calendar Label)

moment.locale('fr');
var next5days = moment().add(5, 'days');

$('input[name="reservationdatesingledate14"]').daterangepicker({
	locale: {
		format: 'DD/MM/YYYY',
        "applyLabel": "Appliquer",
        "cancelLabel": "Annuler",
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	startDate: next5days
});

Style-15: Default value Blank and Week Start day: Saturday. Noted Field name reservationdatesingledate15

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledate15" id="reservationdatesingledate15" type="text" readonly required>

$('input[name="reservationdatesingledate15"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY',
        "applyLabel": "Appliquer",
        "cancelLabel": "Annuler",
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 6
	},
	showDropdowns: true,
	singleDatePicker: true,
	autoUpdateInput: false
});

$('input[name="reservationdatesingledate15"]').on('apply.daterangepicker', function(ev, picker) {
	$(this).val(picker.startDate.format('DD MMMM, YYYY'));
});

$('input[name="reservationdatesingledate15"]').on('cancel.daterangepicker', function(ev, picker) {
	$(this).val('');
});

Minified JS (Default Short Calendar Label English Text)

$('input[name="reservationdatesingledate15"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY',
		firstDay: 6
	},
	showDropdowns: true,
	singleDatePicker: true,
	autoUpdateInput: false
});

$('input[name="reservationdatesingledate15"]').on('apply.daterangepicker', function(ev, picker) {
	$(this).val(picker.startDate.format('DD MMMM, YYYY'));
});

$('input[name="reservationdatesingledate15"]').on('cancel.daterangepicker', function(ev, picker) {
	$(this).val('');
});

Style-16: Set startHour and endHour Only for 24hours mode. Noted Field name reservationdatesingledate16

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledate16" id="reservationdatesingledate16" type="text" readonly required>

$('input[name="reservationdatesingledate16"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY H:mm',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 6
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePicker24Hour: true,
	startHour: 9,
	endHour: 17,
	timePickerIncrement: 5,
	startDate: next3days,
	endDate: next5days,
	minDate: todayDate
});

Minified JS (Default Short Calendar Label English Text)

$('input[name="reservationdatesingledate16"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY H:mm',
		firstDay: 6
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePicker24Hour: true,
	startHour: 9,
	endHour: 17,
	timePickerIncrement: 5,
	startDate: next3days,
	endDate: next5days,
	minDate: todayDate
});

Style-17: Enabled Hours Only for 24hours mode. Noted Field name reservationdatesingledate17

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledate17" id="reservationdatesingledate17" type="text" readonly required>

$('input[name="reservationdatesingledate17"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY H:mm',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 6
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePicker24Hour: true,
	showEnabledHour: true,
	enabledHour: [8,9,10,11,12,13,14,17,18,19,20,21,22],
	timePickerIncrement: 5,
	startDate: next5days,
	endDate: next10days,
	minDate: todayDate
});

Minified JS (Default Short Calendar Label English Text)

$('input[name="reservationdatesingledate17"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY H:mm',
		firstDay: 6
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePicker24Hour: true,
	showEnabledHour: true,
	enabledHour: [8,9,10,11,12,13,14,17,18,19,20,21,22],
	timePickerIncrement: 5,
	startDate: next5days,
	endDate: next10days,
	minDate: todayDate
});

Style-18: Set Booking active after 16 hours from current time and Set startHour and endHour. Noted Field name reservationdatesingledate18

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledate18" id="reservationdatesingledate18" type="text" readonly required>

$('input[name="reservationdatesingledate18"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY H:mm',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 6
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePicker24Hour: true,
	startHour: 9,
	endHour: 17,
	timePickerIncrement: 5,
	startDate: next3days,
	endDate: next5days,
	minDate: moment().startOf('hour').add(16, 'hour')
});

Minified JS (Default Short Calendar Label English Text)

$('input[name="reservationdatesingledate18"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY H:mm',
		firstDay: 6
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePicker24Hour: true,
	startHour: 9,
	endHour: 17,
	timePickerIncrement: 5,
	startDate: next3days,
	endDate: next5days,
	minDate: moment().startOf('hour').add(16, 'hour')
});

Single Date & Time Picker


Some Different Styles Single Date & Time Picker JS (Matching Demo with Style-no. )

Demo: Custom Form example      Demo: Contact Form 7 example

Style-1: with Dropdown. Noted Field name reservationdatesingledatetime

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledatetime" id="reservationdatesingledatetime" type="text" readonly required>

var todayDate = moment();

$('input[name="reservationdatesingledatetime"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY h:mm A',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 5,
	startDate: todayDate
});

Minified JS (Default Short Calendar Label English Text)

var todayDate = moment();

$('input[name="reservationdatesingledatetime"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY h:mm A',
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 5,
	startDate: todayDate
});

Style-1-2: Without Dropdown and Short Calendar Label Text. Noted Field name reservationdatesingledatetime1

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledatetime1" id="reservationdatesingledatetime1" type="text" readonly required>

var todayDate = moment();

$('input[name="reservationdatesingledatetime1"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY h:mm A'
	},
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 5,
	startDate: todayDate
});

Style-2: All Past/Previous Date Disable as like Event Date & Time. Noted Field name reservationdatesingledatetime2

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledatetime2" id="reservationdatesingledatetime2" type="text" readonly required>

var todayDate = moment();
var next3days = moment().add(3, 'days');

$('input[name="reservationdatesingledatetime2"]').daterangepicker({
	locale: {
		format: 'YYYY-MM-DD h:mm A',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 5,
	startDate: next3days,
	minDate: todayDate
});

Minified JS (Default Short Calendar Label English Text)

var todayDate = moment();
var next3days = moment().add(3, 'days');

$('input[name="reservationdatesingledatetime2"]').daterangepicker({
	locale: {
		format: 'YYYY-MM-DD h:mm A',
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 5,
	startDate: next3days,
	minDate: todayDate
});

Style-3: Style With Dropdown. Noted Field name reservationdatesingledatetime3

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledatetime3" id="reservationdatesingledatetime3" type="text" readonly required>

var todayDate = moment();

$('input[name="reservationdatesingledatetime3"]').daterangepicker({
	locale: {
		format: 'YYYY/MM/DD h:mm:ss A',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 5,
	timePickerSeconds: true,
	startDate: todayDate
});

Minified JS (Default Short Calendar Label English Text)

var todayDate = moment();

$('input[name="reservationdatesingledatetime3"]').daterangepicker({
	locale: {
		format: 'YYYY/MM/DD h:mm:ss A',
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 5,
	timePickerSeconds: true,
	startDate: todayDate
});

Style-3-2: Style Without Dropdown. Noted Field name reservationdatesingledatetime3-2

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledatetime3-2" id="reservationdatesingledatetime3-2" type="text" readonly required>

var todayDate = moment();

$('input[name="reservationdatesingledatetime3-2"]').daterangepicker({
	locale: {
		format: 'YYYY/MM/DD h:mm:ss A',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 5,
	timePickerSeconds: true,
	startDate: todayDate
});

Minified JS (Default Short Calendar Label English Text)

var todayDate = moment();

$('input[name="reservationdatesingledatetime3-2"]').daterangepicker({
	locale: {
		format: 'YYYY/MM/DD h:mm:ss A',
		firstDay: 0
	},
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 5,
	timePickerSeconds: true,
	startDate: todayDate
});

Style-4: Set minDate - Date Active from the Next Week. Noted Field name reservationdatesingledatetime4

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledatetime4" id="reservationdatesingledatetime4" type="text" readonly required>

var nextWeek = moment().add(7, 'days');

$('input[name="reservationdatesingledatetime4"]').daterangepicker({
	locale: {
		format: 'MM/DD/YYYY h:mm A',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 1,
	minDate: nextWeek
	}, function(start, end, label) {
		alert("Your chosen date: " + start.format('MM/DD/YYYY h:mm A'));
	}
);

Minified JS (Default Short Calendar Label English Text)

var nextWeek = moment().add(7, 'days');

$('input[name="reservationdatesingledatetime4"]').daterangepicker({
	locale: {
		format: 'MM/DD/YYYY h:mm A',
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 1,
	minDate: nextWeek
	}, function(start, end, label) {
		alert("Your chosen date: " + start.format('MM/DD/YYYY h:mm A'));
	}
);

Style-5: Set minDate - Date Active from the Next Week and 5 minutes Interval. Noted Field name reservationdatesingledatetime5

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledatetime5" id="reservationdatesingledatetime5" type="text" readonly required>

var nextWeek = moment().add(7, 'days');

$('input[name="reservationdatesingledatetime5"]').daterangepicker({
	locale: {
		format: 'MMMM DD, YYYY h:mm A',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 5,
	minDate: nextWeek
});

Minified JS (Default Short Calendar Label English Text)

var nextWeek = moment().add(7, 'days');

$('input[name="reservationdatesingledatetime5"]').daterangepicker({
	locale: {
		format: 'MMMM DD, YYYY h:mm A',
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 5,
	minDate: nextWeek
});

Style-6: Set minDate and maxDate - Date Active for a specific Date Range (December Current Year). Noted Field name reservationdatesingledatetime6

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledatetime6" id="reservationdatesingledatetime6" type="text" readonly required>

var dt = new Date();
var cy = dt.getFullYear();
var minDates = '1 December, ' + cy;
var maxDates = '31 December, ' + cy;

$('input[name="reservationdatesingledatetime6"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY h:mm A',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 10,
	minDate: minDates,
	maxDate: maxDates
	}, function(start, end, label) {
		alert("Your chosen date: " + start.format('DD MMMM, YYYY h:mm A'));
	}
);

Minified JS (Default Short Calendar Label English Text)

var dt = new Date();
var cy = dt.getFullYear();
var minDates = '1 December, ' + cy;
var maxDates = '31 December, ' + cy;

$('input[name="reservationdatesingledatetime6"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY h:mm A',
		firstDay: 0
	},
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 10,
	minDate: minDates,
	maxDate: maxDates
	}, function(start, end, label) {
		alert("Your chosen date: " + start.format('DD MMMM, YYYY h:mm A'));
	}
);

Style-6-2: Set minDate and maxDate - Date Active for a specific Date Range (20 August - 20 September, 2027). Noted Field name reservationdatesingledatetime6-2

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledatetime6-2" id="reservationdatesingledatetime6-2" type="text" readonly required>

$('input[name="reservationdatesingledatetime6-2"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY h:mm A',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 10,
	minDate: '20 August, 2027',
	maxDate: '20 September, 2027'
	}, function(start, end, label) {
		alert("Your chosen date: " + start.format('DD MMMM, YYYY h:mm A'));
	}
);

Minified JS (Default Short Calendar Label English Text)

$('input[name="reservationdatesingledatetime6-2"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY h:mm A',
		firstDay: 0
	},
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 10,
	minDate: '20 August, 2027',
	maxDate: '20 September, 2027'
	}, function(start, end, label) {
		alert("Your chosen date: " + start.format('DD MMMM, YYYY h:mm A'));
	}
);

Style-7: All Future Date Disable as like for Date of Birth. Noted Field name reservationdatesingledatetime7

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledatetime7" id="reservationdatesingledatetime7" type="text" readonly required>

var todayDate = moment();

$('input[name="reservationdatesingledatetime7"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY h:mm A',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	showDropdowns: true,
	timePicker: true,
	timePickerIncrement: 10,
	maxDate: todayDate
});

Minified JS (Default Short Calendar Label English Text)

var todayDate = moment();

$('input[name="reservationdatesingledatetime7"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY h:mm A',
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	showDropdowns: true,
	timePicker: true,
	timePickerIncrement: 10,
	maxDate: todayDate
});

Style-8: All Past Day Disable and On date select will Show Alert Box for Selected date. Noted Field name reservationdatesingledatetime8

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledatetime8" id="reservationdatesingledatetime8" type="text" readonly required>

var todayDate = moment();
var next3days = moment().add(3, 'days');

$('input[name="reservationdatesingledatetime8"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY h:mm A',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 15,
	startDate: next3days,
	minDate: todayDate
	}, function(start, end, label) {
		alert("Your chosen date: " + start.format('DD MMMM, YYYY h:mm A'));
	}
);

Minified JS (Default Short Calendar Label English Text)

var todayDate = moment();
var next3days = moment().add(3, 'days');

$('input[name="reservationdatesingledatetime8"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY h:mm A',
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 15,
	startDate: next3days,
	minDate: todayDate
	}, function(start, end, label) {
		alert("Your chosen date: " + start.format('DD MMMM, YYYY h:mm A'));
	}
);

Style-9: Without Dropdown and All Past Day Disable as like Event Date & Time. Noted Field name reservationdatesingledatetime9

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledatetime9" id="reservationdatesingledatetime9" type="text" readonly required>

var todayDate = moment();
var next3days = moment().add(3, 'days');

$('input[name="reservationdatesingledatetime9"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY h:mm A',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 5,
	autoApply: true,
	startDate: next3days,
	minDate: todayDate
});

Minified JS (Default Short Calendar Label English Text)

var todayDate = moment();
var next3days = moment().add(3, 'days');

$('input[name="reservationdatesingledatetime9"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY h:mm A',
		firstDay: 0
	},
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 5,
	autoApply: true,
	startDate: next3days,
	minDate: todayDate
});

Style-10: All Past Day Disable and On Clck Apply button will Show Alert Box for Selected date. Noted Field name reservationdatesingledatetime10

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledatetime10" id="reservationdatesingledatetime10" type="text" readonly required>

var todayDate = moment();
var next3days = moment().add(3, 'days');

$('input[name="reservationdatesingledatetime10"]').daterangepicker({
	locale: {
		format: 'YYYY/MM/DD h:mm A',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 5,
	autoApply: true,
	startDate: next3days,
	minDate: todayDate
	}, function(start, end, label) {
		alert("Your chosen date: " + start.format('MMMM DD, YYYY'));
	}
);

Minified JS (Default Short Calendar Label English Text)

var todayDate = moment();
var next3days = moment().add(3, 'days');

$('input[name="reservationdatesingledatetime10"]').daterangepicker({
	locale: {
		format: 'YYYY/MM/DD h:mm A',
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 5,
	autoApply: true,
	startDate: next3days,
	minDate: todayDate
	}, function(start, end, label) {
		alert("Your chosen date: " + start.format('MMMM DD, YYYY'));
	}
);

Style-11: Calendar Show Number of the Week. Noted Field name reservationdatesingledatetime11

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledatetime11" id="reservationdatesingledatetime11" type="text" readonly required>

var next3days = moment().add(3, 'days');

$('input[name="reservationdatesingledatetime11"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY h:mm A',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 1,
	showWeekNumbers: true,
	startDate: next3days
});

Minified JS (Default Short Calendar Label English Text)

var next3days = moment().add(3, 'days');

$('input[name="reservationdatesingledatetime11"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY h:mm A',
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 1,
	showWeekNumbers: true,
	startDate: next3days
});

Style-12: Set Start Date after 15 Days from the current Date. Noted Field name reservationdatesingledatetime12

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledatetime12" id="reservationdatesingledatetime12" type="text" readonly required>

var next15days = moment().add(15, 'days');

$('input[name="reservationdatesingledatetime12"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY h:mm A',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 5,
	minDate: next15days
});

Minified JS (Default Short Calendar Label English Text)

var next15days = moment().add(15, 'days');

$('input[name="reservationdatesingledatetime12"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY h:mm A',
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 5,
	minDate: next15days
});

Style-13: Calendar with 12 hour Clock. Noted Field name reservationdatesingledatetime13

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledatetime13" id="reservationdatesingledatetime13" type="text" readonly required>

var next5days = moment().add(5, 'days');

$('input[name="reservationdatesingledatetime13"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY HH:mm: A',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 1,
	startDate: next5days
});

Minified JS (Default Short Calendar Label English Text)

var next5days = moment().add(5, 'days');

$('input[name="reservationdatesingledatetime13"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY HH:mm: A',
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 1,
	startDate: next5days
});

Style-13-2: Calendar with 24 hour Clock. Noted Field name reservationdatesingledatetime13-2

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledatetime13-2" id="reservationdatesingledatetime13-2" type="text" readonly required>

var next5days = moment().add(5, 'days');

$('input[name="reservationdatesingledatetime13-2"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY HH:mm',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePicker24Hour: true,
	timePickerIncrement: 5,
	startDate: next5days
});

Minified JS (Default Short Calendar Label English Text)

var next5days = moment().add(5, 'days');

$('input[name="reservationdatesingledatetime13-2"]').daterangepicker({
	locale: {
		format: 'MM-DD-YYYY HH:mm',
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePicker24Hour: true,
	timePickerIncrement: 5,
	startDate: next5days
});

Style-14: Calendar in French. Noted Field name reservationdatesingledatetime14

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledatetime14" id="reservationdatesingledatetime14" type="text" readonly required>

moment.locale('fr');
var next5days = moment().add(5, 'days');

$('input[name="reservationdatesingledatetime14"]').daterangepicker({
	locale: {
		format: 'DD/MM/YYYY h:mm A',
        "applyLabel": "Appliquer",
        "cancelLabel": "Annuler",
		daysOfWeek: [
			"Dim",
			"Lun",
			"Mar",
			"Mer",
			"Jeu",
			"Ven",
			"Sam"
		],
		monthNames: [
			"Janvier",
			"Février",
			"Mars",
			"Avril",
			"Mai",
			"Juin",
			"Juillet",
			"Août",
			"Septembre",
			"Octobre",
			"Novembre",
			"Décembre"
		],
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 1,
	startDate: next5days
});

Minified JS (Default Short Calendar Label)

moment.locale('fr');
var next5days = moment().add(5, 'days');

$('input[name="reservationdatesingledatetime14"]').daterangepicker({
	locale: {
		format: 'DD/MM/YYYY h:mm A',
        "applyLabel": "Appliquer",
        "cancelLabel": "Annuler",
		firstDay: 0
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 1,
	startDate: next5days
});

Style-15: Default value Blank and Week Start day: Monday. Noted Field name reservationdatesingledatetime15

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledatetime15" id="reservationdatesingledatetime15" type="text" readonly required>

$('input[name="reservationdatesingledatetime15"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY h:mm A',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 1
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 5,
	autoUpdateInput: false
});
	
$('input[name="reservationdatesingledatetime15"]').on('apply.daterangepicker', function(ev, picker) {
	$(this).val(picker.startDate.format('DD MMMM, YYYY h:mm A'));
});

$('input[name="reservationdatesingledatetime15"]').on('cancel.daterangepicker', function(ev, picker) {
	$(this).val('');
});

Minified JS (Default Short Calendar Label English Text)

$('input[name="reservationdatesingledatetime15"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY h:mm A',
		firstDay: 1
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePickerIncrement: 5,
	autoUpdateInput: false
});
	
$('input[name="reservationdatesingledatetime15"]').on('apply.daterangepicker', function(ev, picker) {
	$(this).val(picker.startDate.format('DD MMMM, YYYY h:mm A'));
});

$('input[name="reservationdatesingledatetime15"]').on('cancel.daterangepicker', function(ev, picker) {
	$(this).val('');
});

Style-16: Set startHour and endHour Only for 24hours mode. Noted Field name reservationdatesingledatetime16

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledatetime16" id="reservationdatesingledatetime16" type="text" readonly required>

$('input[name="reservationdatesingledatetime16"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY H:mm',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 6
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePicker24Hour: true,
	startHour: 9,
	endHour: 17,
	timePickerIncrement: 5,
	startDate: next3days,
	endDate: next5days,
	minDate: todayDate
});

Minified JS (Default Short Calendar Label English Text)

$('input[name="reservationdatesingledatetime16"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY H:mm',
		firstDay: 6
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePicker24Hour: true,
	startHour: 9,
	endHour: 17,
	timePickerIncrement: 5,
	startDate: next3days,
	endDate: next5days,
	minDate: todayDate
});

Style-17: Enabled Hours Only for 24hours mode. Noted Field name reservationdatesingledatetime17

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledatetime17" id="reservationdatesingledatetime17" type="text" readonly required>

$('input[name="reservationdatesingledatetime17"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY H:mm',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 6
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePicker24Hour: true,
	showEnabledHour: true,
	enabledHour: [8,9,10,11,12,13,14,17,18,19,20,21,22],
	timePickerIncrement: 5,
	startDate: next5days,
	endDate: next10days,
	minDate: todayDate
});

Minified JS (Default Short Calendar Label English Text)

$('input[name="reservationdatesingledatetime17"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY H:mm',
		firstDay: 6
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePicker24Hour: true,
	showEnabledHour: true,
	enabledHour: [8,9,10,11,12,13,14,17,18,19,20,21,22],
	timePickerIncrement: 5,
	startDate: next5days,
	endDate: next10days,
	minDate: todayDate
});

Style-18: Set Booking active after 16 hours from current time and Set startHour and endHour. Noted Field name reservationdatesingledatetime18

Demo: Custom Form example      Demo: Contact Form 7 example

<input name="reservationdatesingledatetime18" id="reservationdatesingledatetime18" type="text" readonly required>

$('input[name="reservationdatesingledatetime18"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY H:mm',
		daysOfWeek: [
			"SUN",
			"MON",
			"TUE",
			"WED",
			"THU",
			"FRI",
			"SAT"
		],
		monthNames: [
			"January",
			"February",
			"March",
			"April",
			"May",
			"June",
			"July",
			"August",
			"September",
			"October",
			"November",
			"December"
		],
		firstDay: 6
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePicker24Hour: true,
	startHour: 9,
	endHour: 17,
	timePickerIncrement: 5,
	startDate: next3days,
	endDate: next5days,
	minDate: moment().startOf('hour').add(16, 'hour')
});

Minified JS (Default Short Calendar Label English Text)

$('input[name="reservationdatesingledatetime18"]').daterangepicker({
	locale: {
		format: 'DD MMMM, YYYY H:mm',
		firstDay: 6
	},
	showDropdowns: true,
	singleDatePicker: true,
	timePicker: true,
	timePicker24Hour: true,
	startHour: 9,
	endHour: 17,
	timePickerIncrement: 5,
	startDate: next3days,
	endDate: next5days,
	minDate: moment().startOf('hour').add(16, 'hour')
});

Options

  • startDate (Date object, moment object or string) The start of the initially selected date range
  • endDate: (Date object, moment object or string) The end of the initially selected date range
  • minDate: (Date object, moment object or string) The earliest date a user may select
  • maxDate: (Date object, moment object or string) The latest date a user may select
  • dateLimit: (object) The maximum span between the selected start and end dates. Can have any property you can add to a moment object (i.e. days, months)
  • showDropdowns: (boolean) Show year and month select boxes above calendars to jump to a specific month and year
  • showWeekNumbers: (boolean) Show localized week numbers at the start of each week on the calendars
  • showISOWeekNumbers: (boolean) Show ISO week numbers at the start of each week on the calendars
  • timePicker: (boolean) Allow selection of dates with times, not just dates
  • timePickerIncrement: (number) Increment of the minutes selection list for times (i.e. 30 to allow only selection of times ending in 0 or 30)
  • timePicker24Hour: (boolean) Use 24-hour instead of 12-hour times, removing the AM/PM selection
  • timePickerSeconds: (boolean) Show seconds in the timePicker
  • ranges: (object) Set predefined date ranges the user can select from. Each key is the label for the range, and its value an array with two dates representing the bounds of the range
  • showCustomRangeLabel: (boolean) Displays an item labeled "Custom Range" at the end of the list of predefined ranges, when the ranges option is used. This option will be highlighted whenever the current date range selection does not match one of the predefined ranges. Clicking it will display the calendars to select a new range.
  • alwaysShowCalendars: (boolean) Normally, if you use the ranges option to specify pre-defined date ranges, calendars for choosing a custom date range are not shown until the user clicks "Custom Range". When this option is set to true, the calendars for choosing a custom date range are always shown instead.
  • opens: (string: 'left'/'right'/'center') Whether the picker appears aligned to the left, to the right, or centered under the HTML element it's attached to
  • drops: (string: 'down' or 'up') Whether the picker appears below (default) or above the HTML element it's attached to
  • buttonClasses: (array) CSS class names that will be added to all buttons in the picker
  • applyClass: (string) CSS class string that will be added to the apply button
  • cancelClass: (string) CSS class string that will be added to the cancel button
  • locale: (object) Allows you to provide localized strings for buttons and labels, customize the date format, and change the first day of week for the calendars. Check off "locale (with example settings)" in the configuration generator to see how to customize these options.
  • singleDatePicker: (boolean) Show only a single calendar to choose one date, instead of a range picker with two calendars; the start and end dates provided to your callback will be the same single date chosen
  • autoApply: (boolean) Hide the apply and cancel buttons, and automatically apply a new date range as soon as two dates or a predefined range is selected
  • startHour: (number) Set Strat hour of the time picker 24hours mode
  • endHour: (number) Set end hour of the time picker 24hours mode
  • showEnabledHour: (boolean) Activate Enable Hour mode
  • enabledHour: (array) Array List of enabled hours example 24hours mode: [8,9,10,11,12,13,14,17,18,19,20,21,22]. Requires to set showEnabledHour: true

Methods

  • setStartDate(Date/moment/string): Sets the date range picker's currently selected start date to the provided date
  • setEndDate(Date/moment/string): Sets the date range picker's currently selected end date to the provided date

Events

Several events are triggered on the element you attach the picker to, which you can listen for.

  • show.daterangepicker: Triggered when the picker is shown
  • hide.daterangepicker: Triggered when the picker is hidden
  • showCalendar.daterangepicker: Triggered when the calendar(s) are shown
  • hideCalendar.daterangepicker: Triggered when the calendar(s) are hidden
  • apply.daterangepicker: Triggered when the apply button is clicked, or when a predefined range is clicked
  • cancel.daterangepicker: Triggered when the cancel button is clicked

Some applications need a "clear" instead of a "cancel" functionality, which can be achieved by changing the button label and watching for the cancel event:

While passing in a callback to the constructor is the easiest way to listen for changes in the selected date range, you can also do something every time the apply button is clicked even if the selection hasn't changed:

Calendar in Another Langauage
calendar-Langauage
How to change Color

Open calendar.css from plugin css folder in any editor. Search #fb9902 and replace all with your chosen color code.

Open calendar.css from plugin css folder in any editor. Search rgba(251, 153, 2, .3) and replace all with your chosen rgba.

Open calendar.css from plugin css folder in any editor. Search rgba(251, 153, 2, 0.075) and replace all with your chosen rgba.

Open calendar.css from plugin css folder in any editor. Search rgba(251, 153, 2, .6) and replace all with your chosen rgba.

OR

Overwrite css into your child theme css