日期插件rolldate.js的使用

日期插件rolldate.js的使用css

 下載地址:http://www.jq22.com/jquery-info19834html

效果:jquery

 

 

代碼:ui

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="js/rolldate/rolldate.css" />
    <title>日期插件</title>
    <style> input{ display: block; border-radius: 4px; outline: none; border: 1px solid #ccc; width: 200px; height: 30px; margin: 20px auto; padding-right: 10px; text-align: right;
    }
    </style>
  </head>
  <body>

    <input readonly type="text" id="date" placeholder="YY-MM-DD" />


    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/rolldate/rolldate.js"></script>
    <script> $(function() { new rolldate.Date({ el: "#date", format: "YYYY-MM-DD", beginYear: 2000, endYear: 2100, theme: "blue", tapBefore: function(el) { console.log("插件開始觸發"); }, moveEnd: function(el, iscroll) { console.log("滾動結束"); }, confirmBefore: function(el, date) { console.log("肯定按鈕觸發"); }, confirmEnd: function(el, date) { console.log("插件運行結束"); } }); }); </script>
  </body>
</html>
相關文章
相關標籤/搜索