JavaScript实现设置默认日期范围为最近40天的方法分析

要设置默认日期范围为最近40天，可以通过以下步骤实现：

1.使用JavaScript获取当前时间

首先，我们需要获取当前时间作为默认结束时间。我们可以使用 JavaScript 的 Date() 函数获取当前时间：

let now = new Date();
let endDate = now.toISOString().substr(0, 10);

这里，我们通过 new Date() 创建了一个当前时间的对象，然后使用 toISOString() 方法获取ISO格式的字符串，最后使用 substr() 方法取出其中的日期部分（即年月日）。现在，我们就得到了当前时间作为默认结束时间 endDate。

2.计算默认开始时间

接下来，我们需要计算默认开始时间。由于需要的是最近40天的时间范围，因此，我们可以通过当前时间减去40天来获得默认开始时间。以下是示例代码：

let startDateObj = new Date();
startDateObj.setDate(now.getDate() - 40);
let startDate = startDateObj.toISOString().substr(0, 10);

我们使用 new Date() 创建了一个当前时间的对象，然后在此基础上使用 setDate() 方法，将其日期减去40天，得到开始时间日期对象 startDateObj。最后，我们和上面一样使用 toISOString() 和 substr() 方法，获取 ISO 格式的字符串形式的日期。

3.设置日期控件的默认值

现在我们已经得到了默认的开始时间和结束时间，接下来就是将这两个时间设置为日期控件的默认值。以 jQuery UI 的日期选择器为例，以下是示例代码：

$('#datepicker').datepicker({
    minDate: startDate,
    maxDate: endDate
});

这里，我们使用 datepicker() 方法初始化了一个日期选择器，并将其最小日期设为 startDate，最大日期设为 endDate，这样就得到了一个默认时间范围为最近40天的日期控件。

示例说明

示例1

假如我们要设置一个具有开始时间和结束时间两个日期选择器的表单。以下是代码示例：

<form>
  <label for="start">开始日期：</label>
  <input type="text" id="start" name="start">
  <br>
  <label for="end">结束日期：</label>
  <input type="text" id="end" name="end">
</form>

然后，我们可以使用之前的 JavaScript 代码来设置默认值：

let now = new Date();
let endDate = now.toISOString().substr(0, 10);

let startDateObj = new Date();
startDateObj.setDate(now.getDate() - 40);
let startDate = startDateObj.toISOString().substr(0, 10);

$('#start').datepicker({
    minDate: startDate,
    maxDate: endDate
}).val(startDate);

$('#end').datepicker({
    minDate: startDate,
    maxDate: endDate
}).val(endDate);

这里，我们首先通过之前的步骤获取了默认的开始日期和结束日期。然后，我们使用 datepicker() 方法初始化两个日期选择器，并将它们的最小日期设为 startDate，最大日期设为 endDate，并将默认值设为这两个日期。

示例2

假如我们要将 ECharts 的日期选择器默认的日期范围设置为最近40天。以下是代码示例：

let now = new Date();
let endDate = now.toISOString().substr(0, 10);

let startDateObj = new Date();
startDateObj.setDate(now.getDate() - 40);
let startDate = startDateObj.toISOString().substr(0, 10);

let option = {
    xAxis: {
        type: 'time',
        min: startDate,
        max: endDate
    },
    ...
};

let chart = echarts.init(document.getElementById('chart'));
chart.setOption(option);

这里，我们首先通过之前的步骤获取了默认的开始日期和结束日期。然后，我们将 ECharts 的 x 轴的最小值设为 startDate，最大值设为 endDate，这样就默认了一个时间范围为最近40天的图表。