jqueryui Datepicker, date range limit to this year

Question

I've spent the last couple of hours tinkering and searching for answers with no luck however I'm sure this will be rather simple to some folks on here.

I'm looking to use jqueryui's Datepicker with in the "date range" mode, however I want to restrict the dates which can be selected to this year ONLY. I would also like to change the date format from mm/dd/yy to dd/mm/yy.

I shall post to original code as I don't see any value in posting any of my failed efforts.

Hoping somebody can help me out, thanks.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var dateFormat = "mm/dd/yy",
from = $( "#from" )
.datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3
})
.on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
}),
to = $( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3
})
.on( "change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});

function getDate( element ) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}

return date;
}
} );
</script>
</head>
<body>

score 0 · Accepted Answer · edited May 23 '17 at 11:54

Adapt following codes according to your needs:

$(function() {
    var year = (new Date).getFullYear();
    $( "#from" ).datepicker({
        minDate: new Date(year, 0, 1),
        maxDate: new Date(year, 11, 31)
    });
});

and

var from = $('#from').datepicker({ dateFormat: 'dd-mm-yy' }).val();

Original posts: here and here

For your specific example, this could be applied like this (untested I don't have your full code/css):

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>jQuery UI Datepicker - Select a Date Range</title>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script>
    $( function() {
        var year = (new Date).getFullYear();

        from = $( "#from" ).datepicker({
            minDate: new Date(year, 0, 1),
            maxDate: new Date(year, 11, 31),
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 3
        })
        .on( "change", function() {
            $( "#to" ).datepicker( "option", "minDate", new Date($("#from").datepicker().val() )); // You set the min date of `to` to be the selected date here
        }),

        to = $( "#to" ).datepicker({
            maxDate: new Date(year, 11, 31), // minDate has already been set
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 3
        });

        function getDate( element ) {
            var date;
            try {
                date = $(element).datepicker({ dateFormat: 'dd-mm-yy' }).val();
            } catch( error ) {
                date = null;
            }
            return date;
        }
    });
</script>
</head>

<body>

<!-- dummy datepickers -->
<div id="from"></div> 
<div id="to"></div> 

<!-- It is a good practice to import scripts at the end of your page, helps to render quicker the DOM -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</body>
</html>

Hope it helps ;)

Thank you Antoine, but where does this go in the original code and do I need to remove any existing info. Apologies for probably asking a question that's obvious to everybody apart from me! — teddytash, Apr 23 '17 at 13:13
@teddytash OK I will update my answer. However, I really recommend you to take the time to test / understand / customize my snippet of code and not simply copy / paste it ;) — Antoine, Apr 23 '17 at 13:48
thank you so much for all your help, intend to learn from it, no point asking otherwise. — teddytash, Apr 23 '17 at 14:22
You're welcome, I was saying that just in case. Happy coding ;-) — Antoine, Apr 23 '17 at 14:23

jqueryui Datepicker, date range limit to this year

1 Answers1