jQuery实现简单日期格式化功能示例

2023年5月27日下午3:47 • JavaScript

下面是“jQuery实现简单日期格式化功能示例”的完整攻略：

什么是日期格式化？

在 JavaScript 中，日期对象通常以一定格式的字符串形式进行表示，而日期格式化是将日期对象转换成特定的字符串格式的过程。例如，“2021年8月16日”和“8/16/2021”就是两种不同的日期格式。

jQuery实现日期格式化

jQuery 提供了 format 函数，可以实现日期格式化的功能。下面是一个示例：

var date = new Date();
$.format.date(date, "yyyy年MM月dd日"); // 输出 "2021年08月16日"

其中，第一个参数 date 表示要格式化的日期对象，第二个参数 "yyyy年MM月dd日" 则表示日期字符串的格式，具体的格式化选项可以参照官方文档进行设置。需要注意的是，format 函数必须引入 jquery-ui.js 和 jquery.ui.datepicker-zh-CN.js 两个文件才能正常使用。

示例说明

示例一：将日期格式化成中文格式

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>日期格式化示例</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="//cdn.bootcss.com/jquery.ui.datepicker/1.11.4/datepicker-i18n/jquery.ui.datepicker-zh-CN.min.js"></script>
  <script>
    $(function() {
      var myDate = new Date();
      $("#date").text($.format.date(myDate, "yyyy 年 MM 月 dd 日 EEEE"));
    });
  </script>
</head>
<body>
  <div id="date"></div>
</body>
</html>

以上代码将当前日期格式化成“2021 年 08 月 16 日星期一”的形式，并在页面上进行展示。

示例二：将选定日期格式化成特定格式

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>日期格式化示例</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="//cdn.bootcss.com/jquery.ui.datepicker/1.11.4/datepicker-i18n/jquery.ui.datepicker-zh-CN.min.js"></script>
  <script>
    $(function() {
      $("#datepicker").datepicker({
        dateFormat: "yy-mm-dd",
        onSelect: function(date) {
          $("#date").text(date);
        }
      });
    });
  </script>
</head>
<body>
  <input type="text" id="datepicker">
  <div id="date"></div>
</body>
</html>

以上代码将日期选择器的日期格式设置成“yyyy-mm-dd”的形式，并将选择的日期在页面上以文本形式展示出来。需要注意的是，此示例需要引入 jQuery UI 的日期选择器组件来实现。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现简单日期格式化功能示例 - Python技术站