如何使用 moment.js 来改变 jQuery 中的日期格式

给定一个日期，我们需要使用moment.js来改变日期的格式。为了实现这一功能，我们可以使用 moment().format() 函数。

moment()函数： moment()函数用于从一个字符串创建一个时刻。

语法:

moment(String);

参数：它接受一个字符串作为参数。

返回值：它返回时刻对象。

format() 函数： moment().format()函数用于格式化日期。格式可以以字符串的形式提供，作为参数传递给这个方法。

语法:

moment().format(String);

参数：该函数接受一个字符串类型的单一参数，它定义了格式。

返回值：该函数返回日期。

CDN Links:

<script type=”text/javascript” src=”https://code.jquery.com/jquery-1.9.1.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js”></script>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css”>

步骤:

首先，将jQuery、Moment.js和Bootstrap CDN链接添加到脚本中，或者从本地机器上下载它们。
创建一个日期和按钮的输入，以提交。
现在使用moment()方法将日期转换成一个时刻对象。
使用format()方法来改变日期的格式，下面是改变日期格式为 “DD-MM-YYY “的语法。

moment($("#date_val").val()).format('DD-MM-YYYY');

使用bootstrap给页面添加一些样式。

日期的格式化令牌：。

Token	Description	Example
YYYY	4位数的年份	2022年
YY	2位数的年份	22
MMMM	全长月	三月
MMM	3个字符的月份	3月
MM	年的月份，以零为单位	03
M	年的月份	3
DD	月的日期，零填充	02
D	本月的一天	2
做	本月的日期与数字顺序收缩	第2次

示例:

<!DOCTYPE html>
<html>
  
<head>
  
    <script type="text/javascript" src=
        "https://code.jquery.com/jquery-1.9.1.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js">
    </script>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
</head>
  
<body>
    <div class="container row my-2 mx-auto">
        <input type="date" data-provide="datepicker" 
            name="date" id="date_val">
        <button type="button" id="datebtn" 
            class="btn btn-primary row ml-2">
            Primary
        </button>
    </div>
  
    <div class=" w-25">
        <ul class="list-group">
            <li class="list-group-item "> DD-MM-YYYY :
                <span id="format1" 
                    class="text-primary"></span>
            </li>
            <li class="list-group-item ">DD MMMM YYYY :
                <span id="format2" 
                    class="text-primary"></span>
            </li>
            <li class="list-group-item ">DD/MM/YYYY :
                <span id="format3" 
                    class="text-primary"></span>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
  
        ("#datebtn").click(function () {
            var format1 = moment(("#date_val")
                .val()).format('DD-MM-YYYY');
  
            ("#format1").text(format1);
  
            var format2 = moment(("#date_val")
                .val()).format('DD MMMM YYYY');
  
            ("#format2").text(format2);
  
            var format3 = moment(("#date_val")
                .val()).format('DD/MM/YYYY');
  
            $("#format3").text(format3);
        });
    </script>
</body>
  
</html>