JS/JQ日期加减|极客教程

JS/JQ日期加减

在前端开发中，我们经常会遇到需要对日期进行加减操作的需求，比如计算未来某个日期、获取昨天的日期等。而JavaScript和jQuery是两种常用的前端技术，下面将详细介绍使用这两种技术来进行日期加减操作的方法。

JavaScript日期加减

JavaScript的Date对象提供了丰富的日期和时间操作方法，包括日期的加减操作。

获取当前日期

首先，我们可以使用new Date()来获取当前日期和时间：

var currentDate = new Date();
console.log(currentDate);

运行以上代码，会输出当前的日期和时间，例如：

Mon Jul 19 2021 15:41:20 GMT+0800 (中国标准时间)

日期加减

接下来，我们可以使用Date对象的方法来进行日期的加减操作。下面是一些常用的日期加减操作示例：

加上一天

var currentDate = new Date();
currentDate.setDate(currentDate.getDate() + 1);
console.log(currentDate);

运行以上代码，会输出当前日期的下一天的日期。

减去一周

var currentDate = new Date();
currentDate.setDate(currentDate.getDate() - 7);
console.log(currentDate);

运行以上代码，会输出当前日期的上一周的日期。

加上一个月

var currentDate = new Date();
currentDate.setMonth(currentDate.getMonth() + 1);
console.log(currentDate);

运行以上代码，会输出当前日期的下一个月的日期。

通过以上方法，可以实现日期的简单加减操作。需要注意的是，Date对象的getMonth()方法返回的月份是从0开始计数的。

jQuery日期加减

除了原生JavaScript的操作，我们还可以使用jQuery库来进行日期的加减操作。jQuery有一些插件可以方便地处理日期和时间，比如jQuery UI DatePicker。

使用jQuery UI DatePicker

首先，我们需要引入jQuery库和jQuery UI库：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

然后，我们可以使用DatePicker插件来创建一个日期选择器：

<input type="text" id="datepicker">

$(function() {
  $("#datepicker").datepicker();
});

运行以上代码，会在页面上生成一个日期选择器，用户可以通过选择日期来获取输入的日期值。

日期加减

通过jQuery UI DatePicker插件，我们可以方便地实现日期的加减操作。下面是一些常用的日期加减操作示例：

加上一天

$(function() {
  $("#datepicker").datepicker();

  $("#addDay").click(function() {
    var selectedDate = $("#datepicker").datepicker("getDate");
    selectedDate.setDate(selectedDate.getDate() + 1);
    $("#datepicker").datepicker("setDate", selectedDate);
  });
});

在页面上添加一个按钮：

<button id="addDay">加一天</button>

点击”加一天”按钮后，输入框中的日期会加上一天。

减去一周

$(function() {
  $("#datepicker").datepicker();

  $("#subtractWeek").click(function() {
    var selectedDate = $("#datepicker").datepicker("getDate");
    selectedDate.setDate(selectedDate.getDate() - 7);
    $("#datepicker").datepicker("setDate", selectedDate);
  });
});

在页面上添加一个按钮：

<button id="subtractWeek">减一周</button>

点击”减一周”按钮后，输入框中的日期会减去一周。

通过以上方法，我们可以利用jQuery UI DatePicker插件方便地实现日期的加减操作。

总结

本文介绍了使用JavaScript和jQuery来进行日期加减操作的方法，分别通过原生的Date对象和jQuery UI DatePicker插件实现了日期的简单加减。在实际开发中，根据具体的需求和场景，选择合适的方法来处理日期操作，可以提升开发效率和用户体验。

JS/JQ日期加减