Как скрыть второй календарь в палитре дат? - PullRequest
Новая
       17

Как скрыть второй календарь в палитре дат?

0 голосов
/ 04 июля 2018

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

Здесь я покажу свой HTML-код: 

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<div>
  <input type="text" id="dates" name="dates" value="" />
</div>


<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script type="text/javascript">
  $(function() {
    //$('input[name="dates"]').daterangepicker();

    var naArray = ["20180705", "20180706", "20180707", "20180708", "20180709", "20180710", "20180711", "20180712", "20180713"];

    function isDateAvailable(date) {
      return naArray.indexOf(date.format('YYYYMMDD')) > -1;
    }

    $('input[name="dates"]').daterangepicker({
      isInvalidDate: isDateAvailable,
      minDate: new Date()
    }, function(start, end, label) {

      for (var d = start._d; d <= end._d; d.setDate(d.getDate() + 1)) {
        var isValid = true;

        var formattedDate = d.getFullYear().toString() + pad((parseInt(d.getMonth()) + 1), 2).toString() + pad(d.getDate(), 2).toString();

        if (naArray.indexOf(formattedDate) > -1) {
          isValid = false;
          break;
        }
      }

      if (!isValid) {
        alert('Please select valid date range.');
        $('.cancelBtn').trigger('click');
      }
    });
  });

  function pad(str, max) {
    str = str.toString();
    return str.length < max ? pad("0" + str, max) : str;
  }
</script>

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

введите описание изображения здесь

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

Я пытался скрыть с помощью CSS, но в то время я не могу получить цвет фона темы в выбранные даты следующего месяца. Форекс: с 18-07-2018 по 03-08-2018 выберите, затем в период с 01-08-2018 по 03-08-2018, цвет фона не отображается, а при выборе даты начала и конца дат с 01 по 03 в Цвет мыши при наведении тоже не приходит.

здесь Мой ожидаемый скриншот. введите описание изображения здесь

1 Ответ

0 голосов
/ 04 июля 2018

Похоже, невозможно иметь daterangepicker, используя один календарь.

Когда вы устанавливаете "singleDatePicker": true,, это не дает вам возможность выбора диапазона дат, но вы можете выбрать только одну дату.

Вы можете создавать различные конфигурации на ваш выбор и увидеть ожидаемые результаты здесь:

http://www.daterangepicker.com/#config

...