встроенный диапазон дат bootstrap datepicker - PullRequest
Новая
       14

встроенный диапазон дат bootstrap datepicker

1 голос
/ 19 апреля 2020

Доброе утро! :)

Я включил bootstrap DatePicker, как это:

enter image description here

Если пользователь нажимает на дату, я получаю Дата выбрана. 

$('.date-inline').on('changeDate', function (ev) {
    alert( $(".date-inline").data('datepicker') )
});

Теперь я хотел бы осознать, что пользователь может выбрать диапазон дат. пользователь должен выбрать начальную и конечную даты> указатель даты выделяет даты между начальной и конечной датой, и в результате я получаю диапазон.

Возможно ли это? Если да, то как? :)

ОБНОВЛЕНИЕ

Пользователь щелкает 13 апреля (первая дата) и 19 апреля (вторая дата). Теперь средство выбора даты должно отображать даты между выбранными даты как «выбранные» (selected = фоновый синий цвет, например «19» на снимке экрана выше)

И я хотел бы знать, какие даты выбраны (например, в массиве). Значения для этого примера являются: 

2020-04-13, 2020-04-14, 2020-04-15, 2020-04-16, 2020-04-17, 2020-04-18, 2020-04-19

1 Ответ

0 голосов
/ 19 апреля 2020

возьмите это: 

<!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="//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() {
    $( "#datepicker" ).datepicker();
    $("#datepicker2").datepicker({
    onSelect: function() {
    var currentDate1 =new Date($( "#datepicker" ).datepicker( "getDate" ));
  var currentDate2 = new Date($( "#datepicker2" ).datepicker( "getDate" ));
    $( "#datepicker3" ).datepicker({
      minDate:new Date(currentDate1),
      maxDate:new Date(currentDate2)
      });
    }
});


  } );

  </script>
</head>
<body>

<p>Date1: <input type="text" id="datepicker"></p>
<p>Date2: <input type="text" id="datepicker2" ></p>
<p>Date3: <input type="text" id="datepicker3"></p> 
</body>
</html>

посмотрите, как оно работает: https://jsfiddle.net/sugandhnikhil/ow20pzdk/127/

Спасибо !!!! : -)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...