show blocs of 3 months using a JS datepicker

Question

I want the date picker using js to show blocs of three months per year I mean if today is November to show month of October, November, and December

this is my code

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>

<p>Select Date: <input type="text" class="datepicker"></p>
<script>
    $(document).ready(function () {
            var today = new Date();
            $('.datepicker').datepicker({
                format: 'mm-dd-yyyy',
                autoclose:true,
                endDate: "today-1d",
                minDate:"today+1d",
                maxDate: "+2m"
            }).on('changeDate', function (ev) {
                    $(this).datepicker('hide');
                });


            $('.datepicker').keyup(function () {
                if (this.value.match(/[^0-9]/g)) {
                    this.value = this.value.replace(/[^0-9^-]/g, '');
                }
            });
        });
</script>

this shows 2 months from now but I want it to be months form trimester of the year
I want the past dates to be disabled and only show in blocs of three months the date picker depending on the current date, example 4th July it's on the trimester of July-August-September

score 1 · Accepted Answer · answered Nov 07 '19 at 21:34

1

I think this is what you are looking for:

showCurrentAtPos: 1

http://jsfiddle.net/x2mg3brn/3/

answered Nov 07 '19 at 21:34

Peter Andersson

94
3

Typel · Answer 2 · 2019-11-07T21:57:04.803

jQuery datepicker accepts a javascript Date object for minDate and maxDate.

minDate

var today = new Date();
// this returns the first day of the previous month
yourMinDate = new Date(today.getFullYear(), today.getMonth()-1, 1);

maxDate

var today = new Date();
// this returns the last day of the next month
yourMaxDate = new Date(today.getFullYear(), today.getMonth()+2, 0);

Then just pass your new objects in place of "today+1d" and "+2m"

EDIT: I think the question might have changed since I started this answer. minDate and maxDate determine which dates are selectable and do not relate to showing multiple month blocks at a time. For that, try using the numberOfMonths parameter, or take a look at this answer for grouping in quarters.

show blocs of 3 months using a JS datepicker

2 Answers2