日期插件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>