Jquery не позволяет выбирать предыдущие даты при выборе даты - PullRequest
Новая
       40

Jquery не позволяет выбирать предыдущие даты при выборе даты

2 голосов
/ 25 октября 2019

Итак, у меня есть средство выбора даты, которое позволяет выбирать только 2 даты в месяц, 1 и 15 числа. Проблема в том, что он позволяет выбирать предыдущие даты. Например, если 1 октября, все предыдущие даты не должны быть выбраны. Как сделать так, чтобы все предыдущие даты не могли быть выбраны? 

<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, ''];
    },


    });

Ответы [ 2 ]

0 голосов
/ 25 октября 2019

Вы захотите использовать параметры минимальной даты, чтобы установить нижнюю границу для выбора даты, например: 

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">

Если вы хотите ограничить его только текущим месяцем и днями, которые не прошли. Например, допустимы только 1-е и 15-е, но сегодня 25 октября (после 1-го и 15-го), поэтому первой доступной датой для выбора будет 1-е ноября, а затем вы измените минимальную дату следующим образом: 

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">
0 голосов
/ 25 октября 2019 

$('#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">
...