Jquery Datepicker在一個日曆中選擇多個日期範圍

我的要求是允許用戶在一個日曆中選擇多個日期範圍，以前的日期選擇不應允許更改。這怎麼可能？下面是代碼，並鏈接到fiddle 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; 
    } 
    });

來源

2017-04-18 Shanaka

在哪裏，這裏的問題？你的意思是多個日期範圍？ –

默認情況下，我們只能選擇一個日期範圍，要求是在一個日曆上選擇多個日期範圍。 – Shanaka

-1

試試這個

<!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>

，你可以下載JS文件FR om鏈接https://sourceforge.net/projects/multidatespickr/

來源

2017-04-18 10:58:09

此解決方案適用於單次日期選擇多次但不包括日期選擇的範圍。 – Shanaka

不幸的是，這不是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/

來源

2017-04-20 12:23:37 lax1089

正如其他人已經建議，我MultiDatesPicker接近你的需求。它已經允許single range selection，所以你可以插入該插件並編輯/改進它，以允許多個範圍選擇。

一個快速和骯髒的解決方案將註釋掉the line where the array of selected dates gets reset。

來源

2017-04-24 16:00:19 dubrox

請檢查這可能會解決您的問題。

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

我想這多日期選擇器會幫你解決你的問題。

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

**這對我有用多日期（自定義）感謝** –

Jquery Datepicker在一個日曆中選擇多個日期範圍

回答

相關問題