JQuery UI中Datepicker實現單選年份或月份的案例

本文轉載自查看原文 2020-01-01 20:53 744 學習篇

按照於網上的一部分案例，終於自己實現了利用Datepicker單選年份或月份。

需要進入的css與js分別為：

1、jquery-ui.css

2、bootstrap-datetimepicker.min.css

3、jquery-1.11.3.min.js

4、jquery-ui.js

5、bootstrap-datetimepicker.min.js

6、bootstrap-datetimepicker.zh-CN.js

一、實現年份的單選

樣例：

代碼如下：

 1 <html lang="en">
 2 <head>
 3   <meta charset="utf-8">
 4   <meta name="viewport" content="width=device-width, initial-scale=1">
 5   <title>jQuery UI Datepicker - Default functionality</title>
 6   <link rel="stylesheet" href="jquery-ui.css">
 7   <link rel="stylesheet" href="bootstrap-datetimepicker.min.css">
 8   <!--調用JS，這里是url-->
 9   <script src="jquery-1.11.3.min.js"></script>
10   <script src="jquery-ui.js"></script>
11   <script src="bootstrap-datetimepicker.min.js"></script>
12   <script src="bootstrap-datetimepicker.zh-CN.js"></script>
13   <style>
14           .ui-datepicker-calendar { 
15               display: none; 
16           }
17           .ui-datepicker-month {
18               display: none;
19           }
20   </style>
21   <!--寫函數-->
22   <script>
23       $( function() {
24         $("#datepicker").datepicker({
25             changeYear: true, 
26             showButtonPanel: true, 
27             dateFormat: 'yy',
28             onClose: function(dateText, inst) { 
29                 var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
30                 $(this).datepicker('setDate', new Date(year, 1, 1)); 
31             }
32         });
33       })
34   </script>
35 </head>
36 <body>
37  
38  <!--調用id，id是唯一標識-->
39 <p>Year: <input type="text" id="datepicker"></p>
40 </body>
41 </html>

二、實現月份的單選

樣例：

代碼如下：

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="jquery-ui.css">
  <link rel="stylesheet" href="bootstrap-datetimepicker.min.css">
  <!--調用JS，這里是url-->
  <script src="jquery-1.11.3.min.js"></script>
  <script src="jquery-ui.js"></script>
  <script src="bootstrap-datetimepicker.min.js"></script>
  <script src="bootstrap-datetimepicker.zh-CN.js"></script>
  <style>
          .ui-datepicker-calendar { 
              display: none; 
          }
          .ui-datepicker-year {
              display: none;
          }
  </style>
  <!--寫函數-->
  <script>
      $( function() {
        $("#datepicker").datepicker({
            changeMonth: true, 
            showButtonPanel: true, 
            dateFormat: 'mm',   
            onClose: function(dateText, inst) { 
                var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); 
                console.log("month="+ month);
                $("#datepicker").val(parseInt(month) + 1);
            }
        });
    })    
  </script>
</head>
<body>
 
 <!--調用id，id是唯一標識-->
<p>Month: <input type="text" id="datepicker"></p>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery UI 中的 datepicker( )方法 vue實現年份/月份下拉為jQuery UI 中的DatePicker 控件改造一個Clear按鈕 jQuery UI Datepicker中文顯示 Jquery根據年份和月份獲取本月的開始/結束時間 JQuery UI Datepicker中文顯示的方法 js中獲得當前時間是年份和月份 js中獲得當前時間是年份和月份 js中獲得當前時間是年份和月份從日期對象中獲取(年份、月份、日期、時間等數字)