Datepicker不關閉點擊外部

我使用這個JavaScript代碼來使用hijri日期選擇器，但是當我打開datepicker並且比點擊div或身體上我的datepiker沒有關閉。當我點擊邊時，任何人都可以幫助關閉日期選擇器。我需要更正此代碼並隱藏日曆，當我點擊日曆或正文外部時。Datepicker不關閉點擊外部

<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> 
 

 
\t <link rel="stylesheet" href="https://ZulNs.github.io/libs/calendar.css"/> 
 
\t <script type="text/javascript" src="https://ZulNs.github.io/libs/hijri-date.js"></script> 
 
\t <script type="text/javascript" src="js_clander.js"></script> 
 
\t <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<style> 
 
\t .my_row{ 
 
\t \t 
 
\t \t margin-top: 30px; 
 
\t \t padding: 20px; 
 
\t } 
 
#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'; 
 
    }; 
 
\t 
 
    function pickADate() { 
 
     pickBtn.style.display = 'none'; 
 
     datepicker.show(); 
 
    } 
 

 
</body> 
 
</html>

來源

2017-08-01 Najeeb satti

例不工作 – anu

您的例子似乎不工作，所有你想要的是關閉選擇器，當你點擊的身體，你可以通過jQuery的實現其事件的內容功能。

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

來源

2017-08-01 06:47:36

這裏工作..

你缺少關閉</script>這裏：

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

例子：

<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> 
 

 
    \t <link rel="stylesheet" href="https://ZulNs.github.io/libs/calendar.css"/> 
 
    \t <script type="text/javascript" src="https://ZulNs.github.io/libs/hijri-date.js"></script> 
 
    \t <script src='https://ZulNs.github.io/libs/hijri-date.js'></script><script src='https://ZulNs.github.io/libs/calendar.js'></script> 
 
    \t <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
    <style> 
 
    \t .my_row{ 
 
    \t \t 
 
    \t \t margin-top: 30px; 
 
    \t \t padding: 20px; 
 
    \t } 
 
    #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'; 
 
     }; 
 
    \t 
 
     function pickADate() { 
 
      pickBtn.style.display = 'none'; 
 
      datepicker.show(); 
 
     } 
 
    </script> 
 
    </body> 
 
    </html>

來源

2017-08-01 06:53:32

你有下面的代碼添加到您的腳本

$(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'; 
    } 
});

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'; 
 
    }; 
 
\t 
 
    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'; 
 
     } 
 
    });

<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> 
 

 
\t <link rel="stylesheet" href="https://ZulNs.github.io/libs/calendar.css"/> 
 
\t <script type="text/javascript" src="https://ZulNs.github.io/libs/hijri-date.js"></script> 
 
\t <script type="text/javascript" src="https://zulns.github.io/libs/calendar.js"></script> 
 
\t <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<style> 
 
\t .my_row{ 
 
\t \t 
 
\t \t margin-top: 30px; 
 
\t \t padding: 20px; 
 
\t } 
 
#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>

來源

2017-08-01 06:57:14 Dhaarani

@Najeeb薩蒂果有任何疑問讓我知道 – Dhaarani

你好Dhaarani現在它的正常工作我添加了我的項目。我花了一整天的時間來隱藏這個日期選擇器。我沒有成功隱藏這個。我嘗試你的代碼並添加我的項目對我非常有幫助。非常感謝。 –

@Najeeb satti歡迎 – Dhaarani

Datepicker不關閉點擊外部

回答

相關問題