Question

我想要做的是当用户点击按钮时，按钮下面会显示一个日历，如果他选择了一个日期，那么日期应该存储在页面周围的一些隐藏文本框中，我试过了使用jquery ui的datepicker但没有找到解决方案的运气，我有很多生成的按钮，我想要一个可以使用简单的onmousedown事件的解决方案。谢谢你的帮助

Answer 1

假设您已经下载了 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>

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

然后，您应该在<head>中实现类似以下的功能，以初始化datepicker （在这个例子中，用户可以选择从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>

然后，像这样的<input> HTML元素

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

提供请求的UI datepicker print screen

这就是jQueryUI的全部内容。

为了获得用户的输入，您可能希望实现一个JS函数，该函数将由输入元素中的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>

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

1 个答案: