在单个Bootstrap Datepicker中选择日期范围 [英] Pick a date range in single Bootstrap Datepicker

问题描述

我正在使用 Bootstrap DatePicker v1.8.0

I am using Bootstrap DatePicker v1.8.0

需要在单个引导程序中选择范围，我需要将输入值按升序排列(以下示例).

Need to select range in a single bootstrap and I need the input value to be arranged in ascending order (example below).

推荐答案

在更改日期时，date数组将附加新的日期.获取日期并在changeDate事件侦听器中对其进行解析，然后再次进行设置.

On changing the date, the date array is appended with the new date. Get the dates and parse it in changeDate event listener and set it again.

$('#date').datepicker({
    format: "M yyyy",
    startView: 1,
    minViewMode: 1,
    maxViewMode: 2,
    multidate: true,
    multidateSeparator: "-",
    autoClose:true,
}).on("changeDate",function(event){
      var dates = event.dates, elem=$('#date');
      if(elem.data("selecteddates")==dates.join(",")) return; //To prevernt recursive call, that lead to lead the maximum stack in the browser.
      if(dates.length>2) dates=dates.splice(dates.length-1);
      dates.sort(function(a,b){return new Date(a).getTime()-new Date(b).getTime()});
      elem.data("selecteddates",dates.join(",")).datepicker('setDates',dates);
});

function getDates()
{
    console.log($("#date").datepicker("getDates"));
    console.log($("#date").datepicker("getUTCDates"));
    console.log($("#date").data('datepicker').getFormattedDate('yyyy/mm'));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"/>
<input type="text" id="date"><button onclick="getDates()">Get Dates</button>

要获取日期，

$("#date").datepicker("getDates")-返回以本地时间显示的所选开始日期和结束日期的数组.

$("#date").datepicker("getDates") - Returns an array of selected start and end dates in local time.

$("#date").datepicker("getUTCDates")-返回一个以UTC时间为单位的选定开始日期和结束日期的数组.

$("#date").datepicker("getUTCDates") - Returns an array of selected start and end dates in UTC time.

$("#date").data('datepicker').getFormattedDate('yyyy/mm')-以格式设置为给定格式并由multidateSeparator联接的字符串形式返回开始日期和结束日期的串联.

$("#date").data('datepicker').getFormattedDate('yyyy/mm') - Returns the concatenation of start and end dates as strings formatted to the given format and joined by the multidateSeparator.

这篇关于在单个Bootstrap Datepicker中选择日期范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！