是否可以在“日期选择器"天视图中看到开始日期和结束日期? [英] Get the start and end dates visible in a datepicker days view?

问题描述

我正在使用

我如何获得这些日期?

解决方案

没有任何内置选项/方法可以获取您所要求的日期.但是以下方法为您提供这些日期.

方法:获取当前月份，将其减去 .old 天数即可获得开始日期，或添加 .new code>天以获取结束日期.

即使更改 weekStart 选项也可以使用.

  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 =开始:" + startofmonth;enddate.textContent =结束:" + 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">开始:</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); 

有关为何不应该使用dayOfWeek进行加减运算以获取开始/结束日期的信息(必须阅读):

1. 日期选择器始终具有7列(按预期)和6行(恒定).例如，以 May，2019 这个月为例，它有31天，日历中只需要5行，但是显示6行，包括下个月的日期.在这里加/减将不起作用.

2. 如果更改了 weekStart ，则在按天进行加/减时必须考虑 weekStart .

I am using bootstrap datepicker

I wanna get the first and the last dates in the calendar.

How can I get those dates?

解决方案

There is no any in-built option/method to get the dates what you have asked. But the following approach gives you those dates.

Approach : Get the current month, subtract it by the number of .old days to get the starting date or add the number of .new days to get the end date.

It works even if the weekStart is option is changed.

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

Note: If you are using other locales instead of en, then replace the first line in the show method by the following lines.

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

Update on Why addition/subtraction by dayOfWeek to start/end dates shouldn't be used to get the result (Must read):

1. The datepicker always has 7 columns(as intended) and 6 rows(constant). For instance, take the month May, 2019, it has 31 days and need only 5 rows in the calendar, but 6 rows are displayed, including the next month's dates. Here the addition/subtraction won't work.

2. If weekStart is changed, weekStart must be taken into consideration while addition/subtraction by day.

这篇关于是否可以在“日期选择器"天视图中看到开始日期和结束日期?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！