如何使用 Jquery 在不同的 div 中显示月份选择器

Posted

技术标签:

【中文标题】如何使用 Jquery 在不同的 div 中显示月份选择器【英文标题】:How to display the monthpicker in diferent div using Jquery 【发布时间】:2018-10-26 11:00:46 【问题描述】:

我需要在一个不同的 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>

这里我需要在&lt;div id="packagetour_datepickerpick"&gt;&lt;/div&gt; 中显示月份选择器,但选择的值应该被提取到输入字段。 (这里是演示代码 )[http://plnkr.co/edit/vtth4dTXTUapFfFQB8MC?p=preview].

【问题讨论】:

你能分享一下jsfiddle链接吗? @NirajKaushal :当然。让我做 plunkr 演示。 @NirajKaushal:检查此plnkr.co/edit/vtth4dTXTUapFfFQB8MC?p=preview 链接。 您使用的是哪个版本的monthpicker 版本好像有点老了。在最近的版本中,可以进行内联渲染:github.com/KidSysco/jquery-ui-month-picker/wiki/Inline-Menu 【参考方案1】:

注意:如评论部分所述


我创建了一个使用以下库的运行示例。

    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>

希望对你有所帮助。 :)

【讨论】:

但它与ui/1.12.1有点不兼容。 可能是,但它与 ui-1.11.4 兼容 它也适用于最新版本的 jQuery UI 1.12.1。我已经更新了我的答案,看看吧 bus 添加SelectedMonth: new Date().getMonth()+'/' + new Date().getFullYear() 后获取当前月份,年份在变化。 ohh..month 从 0 开始,这就是为什么..任何方式都非常感谢您的帮助。

以上是关于如何使用 Jquery 在不同的 div 中显示月份选择器的主要内容,如果未能解决你的问题,请参考以下文章

js/jquery网页每次刷新随机显示不同的DIV

JQuery完整日历,如何更改视图

如何使用jquery在div上显示div中的图像?

js或jquery如何控制同一套html调用不同的CSS设置?

如何利用jQuery局部刷新页面中的div元素

如何使用 jQuery 显示来自 JSON 的多个数组?