web-dev-qa-db-ja.com

jquery Datepickerは1つのカレンダーで複数の日付範囲を選択します

私の要件は、ユーザーが単一のカレンダーで複数の日付範囲を選択できるようにすることです。また、以前の日付の選択は変更できないようにする必要があります。これはどのようにして可能ですか？以下は、コードとリンクです fiddle

[〜＃〜] 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">

[〜＃〜]スクリプト[〜＃〜]

$( 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;
    }
  } );
javascriptjqueryjquery-uidatepickerjquery-ui-datepicker
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>
2
ankit verma

他の人がすでに提案したように、私の MultiDatesPicker はあなたのニーズに近づきます。 単一の範囲の選択 をすでに許可しているため、そのプラグインをフォークして編集/改善し、複数の範囲の選択を許可できます。

すばやく簡単な解決策は、コメントアウトすることです 選択した日付の配列がリセットされる行 。

0
dubrox

このマルチ日付ピッカーは、問題の解決に役立つと思います。

$('#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イベントを使用して、あなたが望むものに近づく方法を見つけました。選択された日付の独自の配列を維持するため、残念ながら現在の日付を表示するテキストボックスなどと統合されません。インラインコントロールとして使用しているだけで、現在選択されている日付の配列をクエリできます。

このコードについて変更する必要があるのは、2つの日付ごとに範囲にグループ化することだけですが、目的のUXに応じて複数の方法でこれを行うことができます。個人的には、ユーザーが選択した順序で、2つの日付ごとに範囲としてグループ化します。次に、いずれかの範囲から日付を削除すると、範囲全体が削除されます（ここではコーディングされていません。追加する必要があります）。

これが私のコードです：

<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