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

在哪里，这里的问题？你的意思是多个日期范围？ –

默认情况下，我们只能选择一个日期范围，要求是在一个日历上选择多个日期范围。 – Shanaka

答

试试这个

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

此解决方案适用于单次日期选择多次但不包括日期选择的范围。 – 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/

答

正如其他人已经建议，我MultiDatesPicker接近你的需求。它已经允许single range selection，所以你可以插入该插件并编辑/改进它，以允许多个范围选择。

一个快速和肮脏的解决方案将注释掉the line where the array of selected dates gets reset。

答

请检查这可能会解决您的问题。

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

答

我想这多日期选择器会帮你解决你的问题。

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

**这对我有用多日期（自定义）感谢** –

Jquery Datepicker在一个日历中选择多个日期范围

相关推荐