点击下拉列表中的jQuery / Bootstrap datepicker
[英]JQuery / Bootstrap datepicker on click dropdown
问题描述
I'm new to front end development so forgive my ignorance here, but I have Bootstrap dropdown menus and when the user clicks on them, I want it to pull up the datepicker so the user can select a date. 
我是前端开发的新手，所以请您原谅我的无知，但是我有Bootstrap下拉菜单，当用户单击它们时，我希望它拉起日期选择器，以便用户可以选择日期。 Then I'll eventually pass the menu selection and date selection into variables, but I can't even get to the point where I can get the datepicker to pop up when selecting the menu. 然后，我最终将菜单选择和日期选择传递给变量，但是我什至无法选择菜单时弹出日期选择器。
Below are a couple examples of what I've tried, though I've tried quite a few different techniques. 以下是我尝试过的几个示例，尽管我尝试了很多不同的技术。 The first one I got from Pere's suggestion on this thread JQuery UI Datepicker: Making a link trigger datepicker but I get an error saying datepicker is not a function when I run it. 我从Pere在此线程上的建议中得到的第一个JQuery UI Datepicker：创建链接触发datepicker，但是在运行它时出现错误，指出datepicker不是函数。 I'm sure someone here will look at this right away and be able to figure out what I'm doing wrong, so please help me out. 我敢肯定，这里有人会马上看这个，并且能够找出我在做什么错，所以请帮助我。
$(document).ready(function () { $('#datepicker').datepicker() $('.dropdown-item').click(function () { $('#datepicker').toggle() }); });
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Menu </button> <div class="dropdown-menu"> <a class="dropdown-item" id="1">1</a> <a class="dropdown-item" id="2">2</a> <a class="dropdown-item" id="3">3</a> <a class="dropdown-item" id="4">4</a> <input type=date id=datepicker> </div> </div>
$(document).ready(function () { $('#datepicker').hide() $('.dropdown-item').click(function () { $('#datepicker').show() }); });
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Menu </button> <div class="dropdown-menu"> <a class="dropdown-item" id="1">1</a> <a class="dropdown-item" id="2">2</a> <a class="dropdown-item" id="3">3</a> <a class="dropdown-item" id="4">4</a> <input type=date id=datepicker> </div> </div>
1 个解决方案
解决方案1
0 2018-08-17 19:02:11
If anyone stumbles upon the same problem as me, after pulling my hair out all day, below is what I finally settled on and it works! 如果有人整天弄乱我的头发，却偶然发现了与我相同的问题，那么下面就是我终于解决的问题，它可以解决！ It returns both the date and the dropdown row's ID, so I will be able to pass that into my larger application. 它同时返回日期和下拉行的ID，因此我可以将其传递给我的大型应用程序。
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Datepicker</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <script src="../static/bootstrap-datepicker.js"></script> <link href="../static/bootstrap-datepicker.css" rel="stylesheet" /> <script> $(document).ready(function () { $('.dropdown-item').datepicker({ format: 'mm/dd/yyyy' }); $('.dropdown-item').on('changeDate', function (event) { alert(this.id + ' ' + event.format()); }); }); </script> </head> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Menu </button> <div class="dropdown-menu"> <a class="dropdown-item" id="1">1</a> <a class="dropdown-item" id="2">2</a> <a class="dropdown-item" id="3">3</a> <a class="dropdown-item" id="4">4</a> <input id=datepicker /> </div> </div> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.