在寻找JavaScript月采摘器
我正在寻找一个JavaScript月份select工具。 我已经在网站上使用jQuery,所以如果它是一个jQuery插件,那将很适合。 我也接受其他select。
基本上,我在jQuery UI Date Picker的简化版本之后。 我不在乎这个月的哪一天,只是月份和年份。 使用date选取器控件感觉像是矫枉过正和kludge。 我知道我可以使用一对select框,但感觉混乱,然后我也需要一个确认button。
我在设想一个由六列组成的两行或三行四列的网格,用于月份select,以及当前和未来的年份。 (也许列出几年的能力?我不能看到有人需要提前一年或两年以上,所以如果我能列出当前和未来两年,这将是膨胀。)
这真的只是DatePicker的一个愚蠢的版本。 有这样的事情吗?
对于那些仍然期待这个(像我一样)的人来说,这里是一个美丽,易用,jQuery UI兼容,有据可查,经过testing的替代scheme:
它的默认用法很简单,如下所示:
$("input[type='month']").MonthPicker();
- GitHub上
- 摆弄示例和testing
本克勒从这个等价的问题提供了一个jquery ui破解,正常工作。 引用这里为了方便起见,所有功劳都是他的。
JSFiddle这个解决scheme
– 这是一个黑客(用整个.html文件更新):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css"> <script type="text/javascript"> $(function() { $('.date-picker').datepicker( { changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'MM yy', onClose: function(dateText, inst) { var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); $(this).datepicker('setDate', new Date(year, month, 1)); } }); }); </script> <style> .ui-datepicker-calendar { display: none; } </style> </head> <body> <label for="startDate">Date :</label> <input name="startDate" id="startDate" class="date-picker" /> </body> </html>
find一个lucianocosta.info 。 它看起来不错:
更新2016年2月13日:链接工程
我在程序中使用了这个脚本 。 虽然它是古老的,它适用于所有的浏览器。 如果你往下看“月份select日历”,我相信这是你正在寻找的。 那里的例子有在新窗口(ew)中打开日历,但1设置(如第二个例子)使它显示ala jQuery。 祝你好运。
随意看看我自己的jQuery插件:
使用方便 :
$("#myTextInput").Monthpicker();
目前还没有很多选项,但是您可以将input限制在一个月的限制范围内。
还有一些事件提供了两个月份select器(开始和结束date)之间编码相互依赖的方式
你可以在这里find一个现场演示: Codepen
你可以自由地从Github获取源代码并且改变你想要的任何东西: Github仓库
我有一天挑了一个dateselect器。 我发现了另外两个有趣的例子可以帮助你,但是我不确定你如何去做,而不显示日历。 大多数“dateselect器”只是假设你想要看日历。 您可能会更好地查找自定义button,您可以configuration一些自定义button。
以下是我所看到的:
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/index.html
我结束了使用这个: http : //jqueryui.com/demos/datepicker/
如果你对JQuery有什么好处,你可能会想出一个好的小项目。