希吉里日期选择器（Hijri Datepicker）缺失选日后自动关闭功能求助

我明白你遇到的这个问题有多闹心——选完日期弹窗还一直留在页面上确实影响体验。针对这款希吉里日期选择器库，我整理了两种可行的解决方案，你可以按需尝试：

方案一：使用组件自带的auto-close属性 #

这款库其实内置了自动关闭的配置项，只需要在<datepicker-hijri>标签中添加auto-close属性，就能实现选择日期后弹窗自动关闭的效果。修改后的完整代码如下：

<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<title>تجربة محدد التاريخ الهجري</title>
<script src="https://cdn.jsdelivr.net/gh/abublihi/datepicker-hijri@master/build/datepicker-hijri.js"></script>
<link href="https://fonts.googleapis.com/css?family=Tajawal&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet">
</head>
<style>
body { font-family: 'Tajawal', serif; }
.center { padding: 10% 0; }
input { border-radius: 4px; }
</style>
<body style="text-align: center; height: 100hv;">
<div class="center">
<h2>تجربة محدد التاريخ الهجري</h2>
<input type="text" id="calender" value="1441/02/01">
<button id="calender2" onloadeddata="console.log(this)">حدد التاريخ :</button>
<!-- 新增auto-close属性 -->
<datepicker-hijri reference="calender" placement="bottom" selected-date="1441/02/01" auto-close></datepicker-hijri>
<datepicker-hijri reference="calender2" placement="bottom" selected-date="1441/02/01" auto-close></datepicker-hijri>
</div>
</body>
</html>

方案二：手动监听事件触发关闭 #

如果第一种方案不生效，咱们可以通过监听日期选择事件，手动调用组件的关闭方法来实现效果。只需要在页面末尾添加一段JavaScript代码即可：

<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<title>تجربة محدد التاريخ الهجري</title>
<script src="https://cdn.jsdelivr.net/gh/abublihi/datepicker-hijri@master/build/datepicker-hijri.js"></script>
<link href="https://fonts.googleapis.com/css?family=Tajawal&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet">
</head>
<style>
body { font-family: 'Tajawal', serif; }
.center { padding: 10% 0; }
input { border-radius: 4px; }
</style>
<body style="text-align: center; height: 100hv;">
<div class="center">
<h2>تجربة محدد التاريخ الهجري</h2>
<input type="text" id="calender" value="1441/02/01">
<button id="calender2" onloadeddata="console.log(this)">حدد التاريخ :</button>
<datepicker-hijri reference="calender" placement="bottom" selected-date="1441/02/01"></datepicker-hijri>
<datepicker-hijri reference="calender2" placement="bottom" selected-date="1441/02/01"></datepicker-hijri>
</div>

<script>
// 获取所有日期选择器组件实例
const datePickers = document.querySelectorAll('datepicker-hijri');

datePickers.forEach(picker => {
    // 监听日期选择完成事件
    picker.addEventListener('dateSelected', () => {
        // 调用组件内置的close方法关闭弹窗
        picker.close();
    });
});
</script>
</body>
</html>

优先推荐第一种方案，它属于库的原生配置，更简洁省心；如果原生配置不生效，第二种手动监听的方式肯定能解决问题。

内容的提问来源于stack exchange，提问作者motion channel