it-swarm.com.ru

Jquery Datepicker выбрать несколько диапазонов дат в одном календаре

Мое требование - разрешить пользователю выбирать несколько диапазонов дат в одном календаре, также нельзя допускать изменения предыдущих вариантов дат. Как это возможно? Ниже приведен код и ссылка на скрипку

HTML

<p>from</p>
<input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-datefrom">
<p>to</p>
<input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-dateto">

SCRIPT

$( function() {
    var dateFormat = "mm/dd/yy",
      from = $( "#sproid-bookingcondition-datefrom" )
        .datepicker({
          defaultDate: "+1w",
          changeMonth: true,
          numberOfMonths: 1
        })
        .on( "change", function() {
          to.datepicker( "option", "minDate", getDate( this ) );
        }),
      to = $( "#sproid-bookingcondition-dateto" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1
      })
      .on( "change", function() {
        from.datepicker( "option", "maxDate", getDate( this ) );
      });

    function getDate( element ) {
      var date;
      try {
        date = $.datepicker.parseDate( dateFormat, element.value );
      } catch( error ) {
        date = null;
      }

      return date;
    }
  } );
5
Shanaka

Пожалуйста, проверьте это может решить вашу проблему.

$(function() {
    $('input[name="daterange"]').daterangepicker();
    $('input[name="daterange"]').change(function(){
      $(this).val();
      console.log($(this).val());
    });
});
<html>
<head>
<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
 
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
</head>
<body>
  <input class="pull-right" type="text" name="daterange" value="01/15/2020 - 02/15/2010">
</body>
</html>

1
ankit verma

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

Быстрое и грязное решение - закомментировать строку, в которой массив выбранных дат будет сброшен .

0
dubrox

Я думаю, что этот Multi DatePicker поможет вам решить вашу проблему.

$('#mdp-demo').multiDatesPicker();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.css" rel="stylesheet"/>
<link href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.js"></script>
<div id="mdp-demo"></div>

0
thanveer pu

К сожалению, это не то, что плагин datepicker может сделать из коробки. Вам понадобится некоторый пользовательский JavaScript, чтобы включить это.

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

Единственное, что вам нужно изменить в этом коде, - это сгруппировать каждые две даты в диапазоны, но есть несколько способов сделать это в зависимости от желаемого UX. Лично я бы просто группировал каждые две даты как диапазон в порядке, выбранном пользователем. Затем, если они удаляют дату из какого-либо диапазона, удаляется весь диапазон (который здесь не закодирован, вам нужно будет добавить это).

Вот мой код:

<script>
// Maintain array of dates
var dates = new Array();

function addDate(date) {
    if (jQuery.inArray(date, dates) < 0) 
        dates.Push(date);
}

function removeDate(index) {
    dates.splice(index, 1);
}

// Adds a date if we don't have it yet, else remove it
function addOrRemoveDate(date) {
    var index = jQuery.inArray(date, dates);
    if (index >= 0) 
        removeDate(index);
    else 
        addDate(date);
    }

// Takes a 1-digit number and inserts a zero before it
function padNumber(number) {
var ret = new String(number);
if (ret.length == 1) 
    ret = "0" + ret;
    return ret;
}

jQuery(function () {
    jQuery("#datepicker").datepicker({
        onSelect: function (dateText, inst) {
            addOrRemoveDate(dateText);
        },
        beforeShowDay: function (date) {
            var year = date.getFullYear();
            // months and days are inserted into the array in the form, e.g "01/01/2009", but here the format is "1/1/2009"
            var month = padNumber(date.getMonth() + 1);
            var day = padNumber(date.getDate());
            // This depends on the datepicker's date format
            var dateString = month + "/" + day + "/" + year;

            var gotDate = jQuery.inArray(dateString, dates);
            if (gotDate >= 0) {
                // Enable date so it can be deselected. Set style to be highlighted
                return [true, "ui-state-highlight"];
            }
            // Dates not in the array are left enabled, but with no extra style
            return [true, ""];
        }
    });
});
</script>

А вот и скрипка: http://jsfiddle.net/gydL0epa/

0
lax1089