1. ホーム
  2. 質問と答え
  3. Jquery Datepickerは1つのカレンダーで複数の日付範囲を選択します

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

2017-04-18 37 views
5

私の要件は、1つのカレンダーで複数の日付範囲を選択できるようにすることです。これはどのように可能ですか？以下はfiddleJquery Datepickerは1つのカレンダーで複数の日付範囲を選択します

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; 
    } 
    });

出典

2017-04-18 Shanaka

+1

？複数の日付範囲はどういう意味ですか？ –

+0

デフォルトでは1つの日付範囲しか選択できません。要件は1つのカレンダーで複数の日付範囲を選択することです。 – Shanaka

答えて

-1

を使用すると、JSファイルFRをダウンロードすることができ、この

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <script src="Scripts/jquery-1.11.1.js"></script> 
    <script src="Scripts/jquery-ui-1.11.1.js"></script> 
    <script src="Scripts/jquery-ui.multidatespicker.js"></script> 
    <link href="css/jquery-ui.css" rel="stylesheet" /> 
    <link href="css/jquery-ui.structure.css" rel="stylesheet" /> 
    <link href="css/jquery-ui.theme.css" rel="stylesheet" /> 
    <link href="css/pepper-ginder-custom.css" rel="stylesheet" /> 
    <link href="css/prettify.css" rel="stylesheet" /> 
</head> 

<body> 
    <input type="text" id="fromDate" /> 
    <script> 
     $(function() { 
      $('#fromDate').multiDatesPicker(); 
     }); 
    </script> 
</body> 
</html>

を試していますomのリンクhttps://sourceforge.net/projects/multidatespickr/

出典

2017-04-18 10:58:09

+0

このソリューションは、単一の日付選択に複数回適用できますが、日付選択の範囲には適用されません。 – Shanaka

0

残念ながら、これは、日付ピッカーのプラグインは、箱から行うことができるものではありません。これを有効にするにはカスタム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/

出典

2017-04-20 12:23:37 lax1089

0

これが問題を解決する可能性があることをご確認ください。

$(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>

出典

2017-04-25 10:12:25

0

私は、このマルチ日付ピッカーはあなたの問題を解決するためにあなたを助けると思います。問題はここに

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

出典

2017-04-26 12:23:37

+0

**これは複数の日付を持つ私にとって便利です（カスタム）ありがとうございました** –

関連する問題

 関連する問題