Question

我使用这个javascript代码来使用hijri日期选择器但是当我打开datepicker而不是单击div或在body上我的datepiker没有关闭。当我点击一边时，任何人都可以帮助关闭datepicker。我需要更正此代码并在我点击日历或正文外部时隐藏日历。

＆＃13;

<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>Health Athority</title>

	<link rel="stylesheet" href="https://ZulNs.github.io/libs/calendar.css"/>
	<script type="text/javascript" src="https://ZulNs.github.io/libs/hijri-date.js"></script>
	<script type="text/javascript" src="js_clander.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<style>
	.my_row{
		
		margin-top: 30px;
		padding: 20px;
	}
#testme{
width:400px;
    border: 3px solid blue;
}
</style>

</head>

<div id="testme">
<div id="datepicker"><input id="picked-text" type="text" size="35"/><input id="pick-button" type="button" onclick="pickADate();" value="pick"/></div>

</div>
<script type="text/javascript">

  var pickedTxt = document.getElementById('picked-text'),
        pickBtn = document.getElementById('pick-button'),
        datepicker = new Calendar();
    document.getElementById('datepicker').appendChild(datepicker.getElement());
    datepicker.getElement().style.marginTop = '10px';

    datepicker.callback = function() {
        pickedTxt.value = datepicker.getDate().getDateString();
        pickedTxt.selectionStart = 0;
        pickedTxt.selectionEnd = pickedTxt.value.length;
        pickedTxt.focus();
    };

    datepicker.onHide = function() {
        pickBtn.style.display = 'inline-block';
    };
	
    function pickADate() {
        pickBtn.style.display = 'none';
        datepicker.show();
    }

</body>
</html>

＆＃13;

Answer 1

你的例子似乎不起作用，你想要的只是在点击你可以通过Jquery focusout 功能实现它的身体时关闭选择器。

$('#datepicker').on('focusout', function(){
$('YourDatePickerID').hide();
});

Answer 2

这是工作..

您在这里错过了关闭</script>：

</script>
    </body>
    </html>

示例：

＆＃13;
＆＃13;
<html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> <title>Health Athority</title> <link rel="stylesheet" href="https://ZulNs.github.io/libs/calendar.css"/> <script type="text/javascript" src="https://ZulNs.github.io/libs/hijri-date.js"></script> <script src='https://ZulNs.github.io/libs/hijri-date.js'></script><script src='https://ZulNs.github.io/libs/calendar.js'></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <style> .my_row{ margin-top: 30px; padding: 20px; } #testme{ width:400px; border: 3px solid blue; } </style> </head> <div id="testme"> <div id="datepicker"><input id="picked-text" type="text" size="35"/><input id="pick-button" type="button" onclick="pickADate();" value="pick"/></div> </div> <script type="text/javascript"> var pickedTxt = document.getElementById('picked-text'), pickBtn = document.getElementById('pick-button'), datepicker = new Calendar(); document.getElementById('datepicker').appendChild(datepicker.getElement()); datepicker.getElement().style.marginTop = '10px'; datepicker.callback = function() { pickedTxt.value = datepicker.getDate().getDateString(); pickedTxt.selectionStart = 0; pickedTxt.selectionEnd = pickedTxt.value.length; pickedTxt.focus(); }; datepicker.onHide = function() { pickBtn.style.display = 'inline-block'; }; function pickADate() { pickBtn.style.display = 'none'; datepicker.show(); } </script> </body> </html>
＆＃13;
＆＃13;
＆＃13;

Answer 3

您必须将以下代码添加到脚本

$(document).mouseup(function (e) {
     var popup = $("#pick-button");
    if(!($('#pick-button').is(e.target)) && (!$(".header-button").is(e.target))&&(!$(".setting-button").is(e.target))) {
        datepicker.hide();
        pickBtn.style.display = 'inline-block';
    }
});

＆＃13;

var pickedTxt = document.getElementById('picked-text'),
        pickBtn = document.getElementById('pick-button'),
        datepicker = new Calendar();
    document.getElementById('datepicker').appendChild(datepicker.getElement());
    datepicker.getElement().style.marginTop = '10px';

    datepicker.callback = function() {
        pickedTxt.value = datepicker.getDate().getDateString();
        pickedTxt.selectionStart = 0;
        pickedTxt.selectionEnd = pickedTxt.value.length;
        pickedTxt.focus();
    };

    datepicker.onHide = function() {
        pickBtn.style.display = 'inline-block';
    };
	
    function pickADate() {
        pickBtn.style.display = 'none';
        datepicker.show();
    }
       $(document).mouseup(function (e) {
        var popup = $("#pick-button");
        if (!($('#pick-button').is(e.target))&&(!$(".header-button").is(e.target))&&(!$(".setting-button").is(e.target))) {
            datepicker.hide();
             pickBtn.style.display = 'inline-block';
        }
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>Health Athority</title>

	<link rel="stylesheet" href="https://ZulNs.github.io/libs/calendar.css"/>
	<script type="text/javascript" src="https://ZulNs.github.io/libs/hijri-date.js"></script>
	<script type="text/javascript" src="https://zulns.github.io/libs/calendar.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<style>
	.my_row{
		
		margin-top: 30px;
		padding: 20px;
	}
#testme{
width:400px;
    border: 3px solid blue;
}
</style>

</head>
<body>
<div id="testme">
<div id="datepicker"><input id="picked-text" type="text" size="35"/><input id="pick-button" type="button" onclick="pickADate();" value="pick"/></div>

</div>
</body>
</html>

＆＃13;

点击外部时，Datepicker不会关闭

3 个答案: