中国农历公历 

 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>

 

posted @ 2024-03-12 23:31  It's_OK  阅读(39)  评论(0)    收藏  举报