在日期选择器天视图中显示开始和结束日期？

Question

我想获取日历中的第一个和最后一个日期。

我怎样才能得到这些日期？

Answer 1

我找到了解决方案。在动作“显示”中，我输入了这段代码。

(e) => {
    let date = e.date;    
    date.setUTCFullYear(date.getFullYear(), date.getMonth(), 1);
    let weekDay = date.getDay();    

    let daysAgo;
    if (weekDay == 1) {
        daysAgo = 8;
    } else if (weekDay == 0) {
        daysAgo = 7;
    } else {
        daysAgo = weekDay;
    }

    let begin = new Date(date.getTime() - daysAgo * 24 * 60 * 60 * 1000);
    let end   = new Date(begin.getTime() + 43 * 24 * 60 * 60 * 1000);
}

现在在变量 begin 和 end 中我们有相应的日期。

Answer 2

没有任何内置的 option/method 来获取您所要求的日期。但是以下方法为您提供了这些日期。

Approach : 获取当前月份，减去.old天数得到起始日期或加上.new天数获取结束日期。

即使更改 weekStart is 选项也能正常工作。

var startdate = document.getElementById("startdate");
var enddate = document.getElementById("enddate");

$("#date").datepicker('update', new Date()).on("show",function(date){
    var date = new Date($(this).data("datepicker").getDate());
    var startofmonth = new Date(date.getFullYear(), date.getMonth(),1);
    var endofmonth = new Date(date.getFullYear(), date.getMonth()+1, 0);
    startofmonth.setDate(startofmonth.getDate()-$(".datepicker .old.day").length);
    endofmonth.setDate(endofmonth.getDate()+$(".datepicker .new.day").length);
    startdate.textContent = "Start : "+startofmonth;
    enddate.textContent = "End : "+endofmonth;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css"/>

<span id="startdate">Start : </span><br>
<span id="enddate">End : </span><br>
<input id="date">

注意：如果您使用其他语言环境而不是 en，则将 show 方法中的第一行替换为以下行。

var language = $("#date").data("datepicker").o.language;
var months = $.fn.datepicker.dates[language].months;
var view = document.querySelector(".datepicker-days .datepicker-switch").textContent.split(" ");
var date = new Date(view[1],months.indexOf(view[0]),1);

更新为什么 addition/subtraction by dayOfWeek 到 start/end 日期不应该用于获取结果（必读）：

日期选择器总是有 7 列（按预期）和 6 行（不变）。例如，2019 年 5 月，它有 31 天，日历中只需要 5 行，但显示 6 行，包括下个月的日期。这里 addition/subtraction 不起作用。
如果weekStart改变，weekStart必须考虑，而addition/subtraction按天计算。

在日期选择器天视图中显示开始和结束日期？

Get the start and end dates visible in a datepicker days view?

jquery

bootstrap-datepicker