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>
标签：公历,function,popupWindow,农历,中国,calendar,document,data,event From： https://www.cnblogs.com/yourwit/p/18069642