用按钮点击按钮位置创建日历摊牌

我想要做的事情基本上有一个日历显示在按钮下方，当它被用户点击时，并且，如果他选择日期，日期应该被存储在页面周围的一些隐藏文本框中，我尝试了jquery ui的datepicker，但没有找到解决方案的运气，我有很多生成的按钮，我想要一个可以使用简单的onmousedown事件的解决方案。感谢您的帮助用按钮点击按钮位置创建日历摊牌

来源

2017-04-13 Maxpnl

假设你已经下载了jquery-ui-1.1xxcustom.zip *或全jQuery的UI-1.1xxzip *（其中x是版本你选择）并且已将ziped文件内容到您的网页<head>如下

<!-- jQueryUI date theme stylesheet --> 
<link rel="stylesheet" href="css/jquery-ui.css"> 
<link rel="stylesheet" href="css/jquery-ui.theme.css"> 
<!-- http://getbootstrap.com/ --> 
<link href="/css/bootstrap.min.css" rel="stylesheet"/> 
<!-- app's own CSS --> 
<link href="/css/formstyles.css" rel="stylesheet"/> 
<!-- https://jquery.com/ --> 
<script src="/js/jquery-1.12.4.js"></script> 
<!-- http://getbootstrap.com/ --> 
<script src="/js/bootstrap.min.js"></script> 
<!-- https://jQueryUI.com/ --> 
<script src="/js/jquery-ui.js"></script> 
<!-- app's own js scripts --> 
<script src="/js/formscripts.js"></script>

** 不要忘记从下载的.zip到项目的css文件夹复制到“图片”文件夹中。

那么，你应该执行类似下面的功能，进入<head>还，初始化日期选择（在这个例子中，用户可以选择在80年，愤怒的日期样今天出生日期/ 1937迄今为止 - 今天/ 2002年http://jqueryui.com/datepicker/#dropdown-month-year）。

<script> 
/*global $*/ 
$(function(){ 
    $("#datepicker").datepicker({ minDate: "-80Y", maxDate: "-15Y", 
    changeMonth: true, changeYear: true, yearRange: "-80:+0" 
    }); 
}); 
    </script>

然后，像这样

<div class="form-group"> 
    <h5>Date of birth :</h5> 
    <input class="form-control btn btn-default" id="datepicker" name="birth_date" value="Your birthday" type="button"/> 
</div>

的<input> HTML元素提供所请求的UI datepicker print screen

这是所有jQueryUI的。

为了得到用户的输入，你可能要实现将由onchange属性，在输入元素

<input class="form-control btn btn-default" id="datepicker" name="birth_date" value="Your birthday" type="button" onchange="myFunction()"/> 
<textarea id="x" hidden></textarea> 
<script> 
    function myfunction(){ 
    document.getElementById("x").innerHTML = 
    document.getElementById("datepicker").value;} 
</script>

来源

2017-04-13 21:28:42 Gfour

感谢您的帮助的人，可触发JS功能，反正我已经决定了一个更简单方法（在每个按钮上打开一个弹出窗口），但是我会在下次需要做类似的事情时记住这一点：D – Maxpnl

用按钮点击按钮位置创建日历摊牌

回答

相关问题