|
|
相关文章推荐
|
精明的皮带 · String.ToCharArray ...· 5 月前 · |
|
|
霸气的麦片 · WebSocket获取httpSession ...· 1 年前 · |
|
|
痴情的葫芦 · ElectronJS ...· 1 年前 · |
|
|
热心的楼梯 · MVVM --- 实现多层级通知 - ...· 1 年前 · |
|
|
玩命的牛肉面 · java jsonpath ...· 1 年前 · |
我正在使用jQuery日期选择器在我的应用程序中显示日历。我想知道是否可以使用它来显示月份和年份(2010年5月)，而不是日历？
20 个回答
高票数
最新
Stack Overflow用户
回答于2010-02-06 00:12
得票数
2
内容： http://www.mattkruse.com/javascript/calendarpopup/
选择月份-选择示例
Stack Overflow用户
回答于2010-02-06 00:14
得票数
-2
使用
onSelect
回调并手动删除年份部分，并手动设置字段中的文本
Stack Overflow用户
修改于2017-05-23 20:26
得票数
66
@Ben Koehler ，太完美了！我做了一个小的修改，以便多次使用日期选择器的单个实例可以按预期工作。如果不进行此修改，则不会正确解析日期，并且不会突出显示先前选择的日期。
<!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">
<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));
beforeShow : function(input, inst) {
var datestr;
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNamesShort'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
</script>
<style>
.ui-datepicker-calendar {
display: none;
</style>
</head>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
</body>
</html>
Stack Overflow用户
回答于2010-12-28 07:26
得票数
1
我知道这有点晚了，但我在几天前遇到了同样的问题，我已经找到了一个很好的、顺利的解决方案。首先，我发现了一个很棒的日期选择器 here
然后我更新了示例附带的CSS类(jquery.calendarPicker.css)，如下所示：
.calMonth {
/*border-bottom: 1px dashed #666;
padding-bottom: 5px;
margin-bottom: 5px;*/
.calDay
;
}当你改变任何东西时，这个插件会触发一个事件DateChanged，所以你没有点击某一天也没关系(它非常适合作为一年一月的选择器)
希望它能帮上忙！
Stack Overflow用户
回答于2011-05-09 20:53
得票数
10
<style>
.ui-datepicker table{
display: none;
}
<script type="text/javascript">
$(function() {
$( "#manad" ).datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'yy-mm',
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));
beforeShow : function(input, inst) {
if ((datestr = $(this).val()).length > 0) {
actDate = datestr.split('-');
year = actDate[0];
month = actDate[1]-1;
$(this).datepicker('option', 'defaultDate', new Date(year, month));
$(this).datepicker('setDate', new Date(year, month));
});
这将解决问题=)但是我想要timeFormat yyyy-mm
但仅在FF4中尝试过
Stack Overflow用户
修改于2012-01-18 02:41
得票数
3
如果有人还想要多个日历，那么将此功能添加到jquery ui中并不是很难。使用最小化的搜索：
x+='<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix'+t+'">'+(/all|left/.test(t)&&C==0?c?f:n:"")+(在x前面加上这个
var accl = ''; if(this._get(a,"justMonth")) {accl = ' ui-datepicker-just_month';}搜索
<table class="ui-datepicker-calendar并将其替换为
<table class="ui-datepicker-calendar'+accl+'还可以搜索
this._defaults={将其替换为
this._defaults={justMonth:false,对于css，您应该使用：
.ui-datepicker table.ui-datepicker-just_month{
display: none;
}完成所有操作后，只需转到所需的datepicker init函数并提供设置变量
$('#txt_month_chart_view').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
justMonth: true,
create: function(input, inst) {
$(".ui-datepicker table").addClass("badbad");
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));
});
justMonth: true
是这里的关键:)
Stack Overflow用户
修改于2011-06-24 17:31
得票数
3
我遇到了日期选择器和月份选择器的混合问题。我就是这样解决的。
$('.monthpicker').focus(function()
$(".ui-datepicker-calendar").show();
}).datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM/yy',
create: function (input, inst) {
onClose: function(dateText, inst) {
var month = 1+parseInt($("#ui-datepicker-div .ui-datepicker-month :selected").val());
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
});
Stack Overflow用户
修改于2016-02-05 16:06
得票数
95
这个 code 对我来说工作得很完美：
<script type="text/javascript">
$(document).ready(function()
$(".monthPicker").datepicker({
dateFormat: 'MM yy',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
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).val($.datepicker.formatDate('MM yy', new Date(year, month, 1)));
$(".monthPicker").focus(function () {
$(".ui-datepicker-calendar").hide();
$("#ui-datepicker-div").position({
my: "center top",
at: "center bottom",
of: $(this)
</script>
<label for="month">Month: </label>
<input type="text" id="month" name="month" class="monthPicker" />输出为：
Stack Overflow用户
回答于2011-05-24 20:48
得票数
4
这只是我的问题，还是它在IE(8)中不能正常工作？单击done时日期会更改，但datepicker会再次打开，直到您实际单击页面中的某处以松开对输入字段的关注...
我正在想办法解决这个问题。
<!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">
<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>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
</body>
</html>
Stack Overflow用户
修改于2012-10-20 11:11
得票数
1
我还需要一个月的采摘器。我做了一个简单的，标题上是年份，下面是4个月的3行。请看一下： Simple monthyear picker with jQuery 。
Stack Overflow用户
回答于2012-10-12 12:46
得票数
9
我今天也有同样的需求，我在github上找到了这个，使用jQueryUI，用月份选择器代替了日历中的天
Stack Overflow用户
修改于2012-11-28 23:07
得票数
18
上面的答案都很好。我唯一的抱怨是，一旦设置了值，就不能清除它。此外，我更喜欢扩展jquery-like-a-plugin方法。
这对我来说非常有效：
$.fn.monthYearPicker = function(options) {
options = $.extend({
dateFormat: "MM yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showAnim: ""
}, options);
function hideDaysFromCalendar() {
var thisCalendar = $(this);
$('.ui-datepicker-calendar').detach();
// Also fix the click event on the Done button.
$('.ui-datepicker-close').unbind("click").click(function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
$(this).datepicker(options).focus(hideDaysFromCalendar);
}然后像这样调用：
$('input.monthYearPicker').monthYearPicker();
Stack Overflow用户
回答于2012-12-19 00:54
得票数
5
我需要一个月/年选择器来选择两个字段(From & To)，当选择一个字段时，会在另一个字段上设置最大/最小值……就像挑选机票日期一样。我有问题设置的最大和min...the日期的另一个字段将被擦除。感谢上面的几个帖子……我终于弄明白了。您必须以非常特定的顺序设置选项和日期。
有关完整解决方案，请参阅此小提琴： Month/Year Picker @ JSFiddle
代码：
var searchMinDate = "-2y";
var searchMaxDate = "-1m";
if ((new Date()).getDate() <= 5) {
searchMaxDate = "-2m";
$("#txtFrom").datepicker({
dateFormat: "M yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showAnim: "",
minDate: searchMinDate,
maxDate: searchMaxDate,
showButtonPanel: true,
beforeShow: function (input, inst) {
if ((datestr = $("#txtFrom").val()).length > 0) {
var year = datestr.substring(datestr.length - 4, datestr.length);
var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), "#txtFrom").datepicker('option', 'monthNamesShort'));
$("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1));
$("#txtFrom").datepicker('setDate', new Date(year, month, 1));
onClose: function (input, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1));
$("#txtFrom").datepicker('setDate', new Date(year, month, 1));
var to = $("#txtTo").val();
$("#txtTo").datepicker('option', 'minDate', new Date(year, month, 1));
if (to.length > 0) {
var toyear = to.substring(to.length - 4, to.length);
var tomonth = jQuery.inArray(to.substring(0, to.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort'));
$("#txtTo").datepicker('option', 'defaultDate', new Date(toyear, tomonth, 1));
$("#txtTo").datepicker('setDate', new Date(toyear, tomonth, 1));
$("#txtTo").datepicker({
dateFormat: "M yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showAnim: "",
minDate: searchMinDate,
maxDate: searchMaxDate,
showButtonPanel: true,
beforeShow: function (input, inst) {
if ((datestr = $("#txtTo").val()).length > 0) {
var year = datestr.substring(datestr.length - 4, datestr.length);
var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort'));
$("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1));
$("#txtTo").datepicker('setDate', new Date(year, month, 1));
onClose: function (input, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1));
$("#txtTo").datepicker('setDate', new Date(year, month, 1));
var from = $("#txtFrom").val();
$("#txtFrom").datepicker('option', 'maxDate', new Date(year, month, 1));
if (from.length > 0) {
var fryear = from.substring(from.length - 4, from.length);
var frmonth = jQuery.inArray(from.substring(0, from.length - 5), $("#txtFrom").datepicker('option', 'monthNamesShort'));
$("#txtFrom").datepicker('option', 'defaultDate', new Date(fryear, frmonth, 1));
$("#txtFrom").datepicker('setDate', new Date(fryear, frmonth, 1));
});还可以如上所述将其添加到样式块中：
.ui-datepicker-calendar { display: none !important; }
Stack Overflow用户
回答于2013-03-05 19:30
得票数
2
我喜欢@user1857829的回答和他的“像插件一样的扩展jquery方法”。我只做了一点修改，这样当您以任何方式更改月份或年份时，选择器实际上会在字段中写入日期。我发现，在使用了一小段时间后，我更喜欢这种行为。
jQuery.fn.monthYearPicker = function(options) {
options = $.extend({
dateFormat: "mm/yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showAnim: "",
onChangeMonthYear: writeSelectedDate
}, options);
function writeSelectedDate(year, month, inst ){
var thisFormat = jQuery(this).datepicker("option", "dateFormat");
var d = jQuery.datepicker.formatDate(thisFormat, new Date(year, month-1, 1));
inst.input.val(d);
function hideDaysFromCalendar() {
var thisCalendar = $(this);
jQuery('.ui-datepicker-calendar').detach();
// Also fix the click event on the Done button.
jQuery('.ui-datepicker-close').unbind("click").click(function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
thisCalendar.datepicker("hide");
jQuery(this).datepicker(options).focus(hideDaysFromCalendar);
}
Stack Overflow用户
修改于2013-03-19 04:53
得票数
8
这是我想出来的。它隐藏日历而不需要额外的样式块，并添加了一个clear按钮来处理一旦单击输入就无法清除该值的问题。在同一页上也可以很好地处理多个月选择器。
HTML：
<input type='text' class='monthpicker'>JavaScript：
$(".monthpicker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm",
showButtonPanel: true,
currentText: "This Month",
onChangeMonthYear: function (year, month, inst) {
$(this).val($.datepicker.formatDate('yy-mm', new Date(year, month - 1, 1)));
onClose: function(dateText, inst) {
var month = $(".ui-datepicker-month :selected").val();
var year = $(".ui-datepicker-year :selected").val();
$(this).val($.datepicker.formatDate('yy-mm', new Date(year, month, 1)));
}).focus(function () {
$(".ui-datepicker-calendar").hide();
}).after(
$("<a href='javascript: void(0);'>clear</a>").click(function() {
$(this).prev().val('');
);
Stack Overflow用户
修改于2019-08-21 11:11
得票数
4
如果你正在寻找一个月的选择器，试试这个 jquery.mtz.monthpicker
这对我来说很有效。
options = {
pattern: 'yyyy-mm', // Default is 'mm/yyyy' and separator char is not mandatory
selectedYear: 2010,
startYear: 2008,
finalYear: 2012,
monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
$('#custom_widget').monthpicker(options);
Stack Overflow用户
修改于2014-02-03 20:27
得票数
5
我综合了上述许多好的答案，得出了以下结论：
$('#payCardExpireDate').datepicker(
dateFormat: "mm/yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
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)).trigger('change');
beforeShow : function(input, inst) {
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = datestr.substring(0, 2);
$(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
$(this).datepicker('setDate', new Date(year, month-1, 1));
}).focus(function () {
$(".ui-datepicker-calendar").hide();
$("#ui-datepicker-div").position({
my: "center top",
at: "center bottom",
of: $(this)
});这被证明是有效的，但面临着许多错误，所以我被迫在datepicker的几个地方打补丁：
if($.datepicker._get(inst, "dateFormat") === "mm/yy")
$(".ui-datepicker-calendar").hide();
}patch1:在_showDatepicker中:平滑皮肤；
patch2:在_checkOffset中:纠正月份选择器的位置(否则当字段在浏览器底部时，偏移量检查为关闭)；
patch3: in onClose of _hideDatepicker:否则，当关闭日期字段时，日期字段会闪烁很短的时间，这是非常恼人的。
我知道我的解决方案远不是很好，但现在它正在发挥作用。希望能有所帮助。
Stack Overflow用户
修改于2021-10-26 15:19
得票数
0
对于月份选择器，使用jQuery
v1.7.2
我有下面的javascript，它就是这样做的
$l("[id$=txtDtPicker]").monthpicker({
showOn: "both",
buttonImage: "../../images/Calendar.png",
buttonImageOnly: true,
// Default is 'mm/yyyy' and separator char is not mandatory
pattern: 'yyyymm',
monthNames: [
'Jan',
'Fev',
'Mar',
'Abr',
'Mai',
'Jun',
'Jul',
'Ago',
'Set',
'Out',
'Nov',
'Dez'
});
Stack Overflow用户
回答于2018-04-04 17:36
得票数
0
感谢Ben Koehler的解决方案。
但是，我在使用多个日期选择器实例时遇到了问题，其中一些需要用于日期选择。Ben Koehler的解决方案(在编辑3中)有效，但在所有情况下都隐藏了日期选择。以下是解决此问题的更新：
$('.date-picker').datepicker({
dateFormat: "mm/yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function(dateText, inst) {
if($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1) {
$(this).datepicker(
'setDate',
new Date(
$("#ui-datepicker-div .ui-datepicker-year :selected").val(),
$("#ui-datepicker-div .ui-datepicker-month :selected").val(),
).trigger('change');
$('.date-picker').focusout();
$("#ui-datepicker-div").removeClass("month_year_datepicker");
beforeShow : function(input, inst) {
if((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = datestr.substring(0, 2);
$(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
$(this).datepicker('setDate', new Date(year, month-1, 1));
$("#ui-datepicker-div").addClass("month_year_datepicker");
});
推荐文章