MomentJS教程:示例

到目前为止,我们已经在MomentJS中学习了许多概念。本章为您提供了更多示例,以使您更好地理解。

显示两个日期之间的日期范围

这是一个显示两个给定日期之间的日期的示例。

<!DOCTYPE html>
<html>
   <head>
     <title>显示两个日期之间的日期范围 - Web176教程网www.web176.com</title>
      
      <style>
         table, td {
            border: 1px solid #F1E8E8;
            border-collapse: collapse;
            padding: 4px;
         }
         table tr:nth-child(odd) {
            background-color: #CFCACA;
         }
         table tr:nth-child(even) {
            background-color: #C4B4B4;
         }
      </style>
   </head>
   
   <body>
      <h1>Dates display between 2021-03-01 and 2021-04-01</h1>
      <div id="container">
         <table id="datedetails" ></table>
      </div>
     <script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
      <script type="text/JavaScript">
         function getDaterange(start, end, arr) {
            if (!moment(start).isSameOrAfter(end)) {
               if (arr.length==0) arr.push(moment(start).format("dddd, MMMM Do YYYY, h:mm:ss a"));
               var next = moment(start).add(1, 'd');
               arr.push(next.format("dddd, MMMM Do YYYY, h:mm:ss a"));
               getDaterange(next, end, arr);
            } else {
               return arr;
            }
            return arr;
         }
         var a = getDaterange("2021-03-01", "2021-04-01", []);
         var tr = "";
         for (var i = 0; i<a.length;i++ ) {
            tr += "<tr><td>"+a[i]+"</td></tr>";
         }
         document.getElementById("datedetails").innerHTML = tr;
      </script>
   </body>
</html>

我们想要显示2021-03-012021-04-01之间的所有日期。我们使用日期查询isSameOrAfter,日期添加和日期格式来实现所需的功能。

显示2021年3月1日至2021年4月1日之间的星期日

<!DOCTYPE html>
<html>
   <head>
      <title>显示2021年3月1日至2021年4月1日之间的星期日 - Web176教程网www.web176.com</title>
      <style>
         table, td {
            border: 1px solid #F1E8E8;
            border-collapse: collapse;
            padding: 4px;
         }
         table tr:nth-child(odd) {
            background-color: #CFCACA;
         }
         table tr:nth-child(even) {
            background-color: #C4B4B4;
         }
      </style>
   </head>
   
   <body>
    <h1>Sundays between 2021-03-01 and 2021-04-01</h1>
    <div id="container">
       <table id="datedetails"></table>
    </div>
     <script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script type="text/JavaScript">
       function getDaterange(start, end, arr) {
          if (!moment(start).isSameOrAfter(end)) {
             if (arr.length==0) {
                if (moment(start).format("dddd") === "Sunday") {
                   arr.push(moment(start).format("dddd, MMMM Do YYYY, h:mm:ss a"));
                }
             }
             var next = moment(start).add(1, 'd');
             if (moment(next).format("dddd") === "Sunday") {
                arr.push(next.format("dddd, MMMM Do YYYY, h:mm:ss a"));
             }
             getDaterange(next, end, arr);
          } else {
             return arr;
          }
          return arr;
       }
       var a = getDaterange("2021-03-01", "2021-04-01", []);
       var tr = "";
       for (var i = 0; i<a.length;i++ ) {
          tr += "<tr><td>"+a[i]+"</td></tr>";
       }
       document.getElementById("datedetails").innerHTML = tr;
    </script>
   </body>
</html>

根据区域设置显示日期详细信息

在这里,我们使用具有所有语言环境的moment.locale脚本。

<!DOCTYPE html>
<html>
  
   <head>
     <title>根据区域设置显示日期详细信息 - Web176教程网www.web176.com</title>
    <style type="text/css">
        div {
           margin-top: 16px!important;
           margin-bottom: 16px!important;
           width:100%;
        }
        table, td {
           border: 1px solid #F1E8E8;
           border-collapse: collapse;
           padding: 4px;
        }
        table tr:nth-child(odd) {
           background-color: #CFCACA;
        }
        table tr:nth-child(even) {
           background-color: #C4B4B4;
        }
     </style>
   </head>
   
   <body>
    <div >
        Select Locale : <select id="locale" onchange="updatelocale()" style="width:200px;">
           <option value="en">English</option>
           <option value="fr">French</option>
           <option value="fr-ca">French Canada</option>
           <option value="cs">Czech</option>
           <option value="zh-cn">Chinese</option>
           <option value="nl">Dutch<   /option>
           <option value="ka">Georgian</option>
           <option value="he">Hebrew</option>
           <option value="hi">Hindi</option>
           <option value="id">Indonesian</option>
           <option value="it">Italian</option>
           <option value="jv";Japanese</option>
           <option value="ko";Korean</option>
        </select>
     </div>
     <br/>
     <br/>>
     Display Date is different formats as per locale :<span id="localeid"></span><br/>
     <div>
        <table>
           <tr>
              <th>Format</th>
              <th>Display</th>
           </tr>
           <tr>
              <td><i>dddd, MMMM Do YYYY, h:mm:ss a</i></td>
              <td>
                 <div id="ldate"></div>
              </td>
           </tr>
           <tr>
              <td><i>LLLL</i></td>
              <td>
                 <div id="ldate1"></div>
              </td>
           </tr>
           <tr>
              <td><i>moment().format()</i></td>
              <td>
                 <div id="ldate2"></div>
              </td>
           </tr>
           <tr>
              <td><i>moment().calendar()</i></td>
              <td>
                 <div id="ldate3"></div>
              </td>
           </tr>
           <tr>
              <td><i>Months</i></td>
              <td>
                 <div id="ldate4"></div>
              </td>
           </tr>
           <tr>
              <td><i>Weekdays</i></td>
              <td>
                 <div id="ldate5"></div>
              </td>
           </tr>
        </table>
     </div>
    



    <script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    
    <script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>

    <script type="text/JavaScript">
        var updatelocale = function() {
           var a = moment.locale(document.getElementById("locale").value);
           var k = moment().format("dddd, MMMM Do YYYY, h:mm:ss a");
           var k1 = moment().format("LLLL");
           var k2 = moment().format();
           var k3 = moment().calendar();
           var k4 = moment.months();
           var k5 = moment.weekdays();
           document.getElementById("localeid").innerHTML = "<b>"+a+"</b>";
           document.getElementById("ldate").innerHTML = k;
           document.getElementById("ldate1").innerHTML = k1;
           document.getElementById("ldate2").innerHTML = k2;
           document.getElementById("ldate3").innerHTML = k3;
           document.getElementById("ldate4").innerHTML = k4;
           document.getElementById("ldate5").innerHTML = k5;
        };
        updatelocale();
     </script>
  </body>
   </body>
</html>

作者:terry,如若转载,请注明出处:https://www.web176.com/momentjs/2349.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年4月7日 上午11:43
下一篇 2021年4月7日 下午3:08

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注