Jquery don't allow previous dates to be selected on date picker

Question

So I have a date picker which only allows 2 dates per month to be selected, the 1st and the 15th. The problem is it still allows previous dates to be picked. For example, if its the 1st of October all previous dates shouldn't be able to be selected. How can I make it so all previous dates cannot be selected?

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input id="side-datepicker">

$('#side-datepicker').datepicker({
     beforeShowDay: function (date) {
    //getDate() returns the day (0-31)
     if (date.getDate() == 1 || date.getDate() == 15) {
     return [true, ''];
    }
    return [false, ''];
    },


    });

Answer 1

 $('#side-datepicker').datepicker({ beforeShowDay: function (date) { let today = new Date('2019-10-24'); //if you want the current date to be selectable uncomment the following line //today.setDate(today.getDate() -1); if (date > today && (date.getDate() == 1 || date.getDate() == 15)) { return [true, '']; } return [false, '']; } });

 <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <input id="side-datepicker">

Answer 2

You are going to want to use the min date options to enforce a bottom on the date picker like so:

 var currentTime = new Date() var minDate = new Date(currentTime.getFullYear(), currentTime.getMonth(), +1); //first day of current month $('#side-datepicker').datepicker({ minDate: minDate, beforeShowDay: function (date) { //getDate() returns the day (0-31) if (date.getDate() == 1 || date.getDate() == 15) { return [true, '']; } return [false, '']; }, });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <input id="side-datepicker">

If you want to restrict it to just the current month and days that have not passed. Example only allow 1st and 15 but today is Oct 25th (past the 1st and 15) so the first available date to pick would be Nov 1st then you would mod your min date as follows:

var minDate = new Date(currentTime.getFullYear(), currentTime.getMonth(), currentTime.getDate()); //current date

ex:

 var currentTime = new Date() var minDate = new Date(currentTime.getFullYear(), currentTime.getMonth(), currentTime.getDate()); //current date $('#side-datepicker').datepicker({ minDate: minDate, beforeShowDay: function (date) { //getDate() returns the day (0-31) if (date.getDate() == 1 || date.getDate() == 15) { return [true, '']; } return [false, '']; }, });

 <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <input id="side-datepicker">