I guess something like this will do. Depends on what technique you use for the datepicker, but you’ll have to use a function that is fired when a value has been chosen. In that function you can check the value set against your two ranges.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<a href="https://code.jquery.com/jquery-1.12.4.js">https://code.jquery.com/jquery-1.12.4.js</a>
<a href="https://code.jquery.com/ui/1.12.1/jquery-ui.js">https://code.jquery.com/ui/1.12.1/jquery-ui.js</a>
$(function() {
$('#datepicker').datepicker({
onSelect: function() {
var date = $(this).val();
checkRange(date);
}
});
});
function checkRange(date) {
$('#div1').hide();
$('#div2').hide();
var checkDate = new Date(date),
a = new Date('2014/01/01'),
b = new Date('2015/01/02'),
c = new Date('2015/01/03'),
d = new Date('2016/09/10'),
inRange1 = checkDate >= a && checkDate = c && checkDate
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
DIV1
DIV2
</body>
</html>
