1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>MyTitle</title> 7 <script src="https://passer-by.com/calendar/dist/widget-calendar.min.js"></script> 8 <script src="https://passer-by.com/calendar/dist/calendar.min.js"></script> 9 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script> 10 </head> 11 12 <body> 13 <h1 id="test" style="display: flex; justify-content: center; align-items: center;"></h1> 14 <div style="display: flex; justify-content: center; align-items: center;"> 15 <input type="text" id="inputField" readonly placeholder="点击输入框弹出窗口" /> 16 </div> 17 <div id="popupWindow" 18 style="display:none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border: 1px solid #ccc; padding: 20px;"> 19 <!-- 浮窗内容 --> 20 <widget-calendar></widget-calendar> 21 </div> 22 23 <script> 24 // 自定义事件-选中日期: onSelect 25 document.querySelector('widget-calendar').addEventListener('onSelect', function (event) { 26 let data = event.detail; 27 $("#inputField").val(data['date']); 28 document.getElementById('test').innerText = 'onSelect：' + data['sYear'] + '-' + data['sMonth'] + '-' + data['sDay']; 29 }); 30 // 自定义事件-切换日期: onChange 31 document.querySelector('widget-calendar').addEventListener('onChange', function (event) { 32 let data = event.detail; 33 document.getElementById('test').innerText = 'onChange：' + data['sYear'] + '-' + data['sMonth'] + '-' + data['sDay']; 34 }); 35 // 自定义事件-初始化: onInit 36 document.querySelector('widget-calendar').addEventListener('onInit', function (event) { 37 let data = event.detail; 38 document.getElementById('test').innerText = 'onInit：' + data['sYear'] + '-' + data['sMonth'] + '-' + data['sDay']; 39 }); 40 41 42 // 农历日期: 2023 年 闰二月 初十 43 var lunar = calendar.getDateByLunar(2023, 2, 10, true); 44 console.log("lunar", lunar); 45 46 // 公历日期： 2024 年 3 月 12 日 47 var solar = calendar.getDateBySolar(2024, 3, 12); 48 console.log("solar", solar); 49 50 // 今天 51 var today = calendar.getToday(); 52 console.log("today", today); 53 54 // 点击输入框时显示浮窗 55 $(document).ready(function () { 56 $("#inputField").click(function () { 57 $("#popupWindow").show(); 58 }); 59 }); 60 61 // 点击其他地方或者关闭按钮时隐藏浮窗 62 // $(document).click(function (e) { 63 // if (!$(e.target).is('#inputField') && !$(e.target).is('#popupWindow')) { 64 // $("#popupWindow").hide(); 65 // } 66 // }); 67 $("#closeButton").click(function () { 68 $("#popupWindow").hide(); 69 }); 70 71 72 73 </script> 74 </body> 75 76 </html>
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。