Jquery Datepicker在一个日历中选择多个日期范围
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery Datepicker在一个日历中选择多个日期范围相关的知识，希望对你有一定的参考价值。
我的要求是允许用户在一个日历中选择多个日期范围，也不允许更改以前的日期选择。这怎么可能？以下是fiddle的代码和链接
<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;
}
} );
答案
请检查这可能会解决您的问题。
$(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>另一答案
不幸的是，这不是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/
另一答案
我认为这个多日期选择器可以帮助您解决问题。
$('#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>另一答案
正如其他人已经建议的那样，我的MultiDatesPicker接近您的需求。它已经允许single range selection，所以你可以分叉该插件并编辑/改进它以允许多个范围选择。
一个快速而肮脏的解决方案是评论the line where the array of selected dates gets reset。
另一答案
试试这个
<!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>
你可以从https://sourceforge.net/projects/multidatespickr/链接下载js文件
以上是关于Jquery Datepicker在一个日历中选择多个日期范围的主要内容，如果未能解决你的问题，请参考以下文章
OnClick日历图标日历未打开Jquery Datepicker