jquery - 如何使用 Jquery 在不同的 div 中显示月份选择器
问题描述
我需要在一个不同的 div 中显示月份选择器UI,但所选值将使用 Jquery 获取到输入字段。我在下面解释我的代码。
<!DOCTYPE html>
<html>
<head>
<title>Parent-Child Communication</title>
<link rel="stylesheet" type="text/css" href="jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="monthpicker.css" />
<script src="jquery-2.2.3.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="monthpicker.min.js"></script>
</head>
<body>
<input id="sDate" type="text" />
<div id="packagetour_datepickerpick"></div>
<script type="text/javascript">
$('#sDate').Monthpicker();
</script>
</body>
</html>
在这里,我需要在内部显示月份选择器,<div id="packagetour_datepickerpick"></div>
但应将所选值提取到输入字段。(这里是演示代码)[ http://plnkr.co/edit/vtth4dTXTUapFfFQB8MC?p=preview]。
解决方案
注意:如评论部分所述
我创建了一个使用以下库的运行示例。
- https://code.jquery.com/jquery-1.9.1.js
- https://code.jquery.com/ui/1.9.2/jquery-ui.js
- https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css
- https://rawgit.com/KidSysco/jquery-ui-month-picker/v3.0.0/demo/MonthPicker.min.css
- https://rawgit.com/KidSysco/jquery-ui-month-picker/v3.0.0/demo/MonthPicker.min.js
$("#packagetour_datepickerpick").MonthPicker({
SelectedMonth: '04/' + new Date().getFullYear(),
AltField: '#sDate',
OnAfterChooseMonth: function(selectedDate) {
// Do something with selected JavaScript date.
// console.log(selectedDate);
}
});
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/KidSysco/jquery-ui-month-picker/v3.0.0/demo/MonthPicker.min.css" rel="stylesheet"/>
<script src="https://rawgit.com/KidSysco/jquery-ui-month-picker/v3.0.0/demo/MonthPicker.min.js"></script>
<input id="sDate" type="text" />
<div id="packagetour_datepickerpick"></div>
我希望它会帮助你。:)
推荐阅读
- javascript - 不会发生对表类的 CSS 更改
- angular - Dragula 服务在目标中添加最后一滴
- liquibase - 添加新表列时,我在 Liquibase 脚本中找不到 IF_NOT_EXIST 的任何属性
- flutter - 如何知道 post 方法何时仍在 Stream builder 中加载
- python - 迭代字典列表,其中包含字典列表
- javascript - Javascript setInterval 函数提高点击速度
- sql - Postgres 通过 powershell 输出格式并存储在日志中
- angular - 在做角度时我得到如下错误
- philips-hue - Philip Hue Rest API Auth 2 令牌
- android - 类扩展基类时无法生成 JSON 转换类