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


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


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


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


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


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


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


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"]').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


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


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


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


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


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


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


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


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


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


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"]').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"]').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"]').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"]').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


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


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


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


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


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


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


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


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"]').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"]').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


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


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


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


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


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


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


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


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"]').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"]').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"]').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"]').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


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


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


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


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


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


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


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


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"]').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


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


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


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


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


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


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


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


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


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"]').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"]').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"]').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"]').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

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.

Overwrite css into your child theme css