我正在使用jQuery日期选择器来显示日历。我想知道是否可以使用它仅显示'年'而不是完整的日历?
我正在使用jQuery日期选择器来显示日历。我想知道是否可以使用它仅显示'年'而不是完整的日历?
**注意 :
**如果有人反对我现在回答这个问题!因为我尝试了这篇文章中的所有答案,都没有解决方法。所以我用自己的方式尝试并找到了解决方案,现在分享给下一个遇到类似问题的人。
HTML
<label for="startYear"> Start Year: </label>
<input name="startYear" id="startYear" class="date-picker-year" />
jQuery
<script type="text/javascript">
$(function() {
$('.date-picker-year').datepicker({
changeYear: true,
showButtonPanel: true,
dateFormat: 'yy',
onClose: function(dateText, inst) {
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, 1));
}
});
$(".date-picker-year").focus(function () {
$(".ui-datepicker-month").hide();
});
});
</script>
$(function() {
$('#datepicker1').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));
}
});
});
风格应该是
.ui-datepicker-calendar {
display: none;
}
2018年,
$('#datepicker').datepicker({
format: "yyyy",
weekStart: 1,
orientation: "bottom",
language: "{{ app.request.locale }}",
keyboardNavigation: false,
viewMode: "years",
minViewMode: "years"
});
$("your-selector").datepicker({
format: "yyyy",
viewMode: "years",
minViewMode: "years"
});
""your-selector" 可以使用id(#your-selector) 或者 class(.your-selector)。
我也遇到了同样的问题,在经过一天的研究后,我找到了这个解决方案:http://jsfiddle.net/konstantc/4jkef3a1/
// *** (month and year only) ***
$(function() {
$('#datepicker1').datepicker( {
yearRange: "c-100:c",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
closeText:'Select',
currentText: 'This year',
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 (M y) (mm/y)', new Date(year, month, 1)));
}
}).focus(function () {
$(".ui-datepicker-calendar").hide();
$(".ui-datepicker-current").hide();
$("#ui-datepicker-div").position({
my: "left top",
at: "left bottom",
of: $(this)
});
}).attr("readonly", false);
});
// --------------------------------
// *** (year only) ***
$(function() {
$('#datepicker2').datepicker( {
yearRange: "c-100:c",
changeMonth: false,
changeYear: true,
showButtonPanel: true,
closeText:'Select',
currentText: 'This year',
onClose: function(dateText, inst) {
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).val($.datepicker.formatDate('yy', new Date(year, 1, 1)));
}
}).focus(function () {
$(".ui-datepicker-month").hide();
$(".ui-datepicker-calendar").hide();
$(".ui-datepicker-current").hide();
$(".ui-datepicker-prev").hide();
$(".ui-datepicker-next").hide();
$("#ui-datepicker-div").position({
my: "left top",
at: "left bottom",
of: $(this)
});
}).attr("readonly", false);
});
// --------------------------------
// *** (year only, no controls) ***
$(function() {
$('#datepicker3').datepicker( {
dateFormat: "yy",
yearRange: "c-100:c",
changeMonth: false,
changeYear: true,
showButtonPanel: false,
closeText:'Select',
currentText: 'This year',
onClose: function(dateText, inst) {
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).val($.datepicker.formatDate('yy', new Date(year, 1, 1)));
},
onChangeMonthYear : function () {
$(this).datepicker( "hide" );
}
}).focus(function () {
$(".ui-datepicker-month").hide();
$(".ui-datepicker-calendar").hide();
$(".ui-datepicker-current").hide();
$(".ui-datepicker-prev").hide();
$(".ui-datepicker-next").hide();
$("#ui-datepicker-div").position({
my: "left top",
at: "left bottom",
of: $(this)
});
}).attr("readonly", false);
});
// --------------------------------
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<div class="container">
<h2 class="font-weight-light text-lg-left mt-4 mb-0"><b>jQuery UI Datepicker</b> custom select</h2>
<hr class="mt-2 mb-3">
<div class="row text-lg-left">
<div class="col-12">
<form>
<div class="form-label-group">
<label for="datepicker1">(month and year only : <code>id="datepicker1"</code> )</label>
<input type="text" class="form-control" id="datepicker1"
placeholder="(month and year only)" />
</div>
<hr />
<div class="form-label-group">
<label for="datepicker2">(year only : <code>input id="datepicker2"</code> )</label>
<input type="text" class="form-control" id="datepicker2"
placeholder="(year only)" />
</div>
<hr />
<div class="form-label-group">
<label for="datepicker3">(year only, no controls : <code>input id="datepicker3"</code> )</label>
<input type="text" class="form-control" id="datepicker3"
placeholder="(year only, no controls)" />
</div>
</form>
</div>
</div>
</div>
我知道这个问题已经很老了,但我认为我的解决方案可能对其他遇到此问题的人有用。希望能帮到你。
$(input).blur()
。 - Creekuse this code for jquery time picker.
$(function() {
$('#datepicker1').datepicker( {
changeMonth: false,
changeYear: true,
showButtonPanel: false,
dateFormat: 'yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date('2017'));
}
}).focus(function () {
$(".ui-datepicker-month").hide();
$(".ui-datepicker-calendar").hide();
});
});
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<input type="text" id="datepicker1"/>
尝试这样做:
在HTML中添加以下内容
<input type="text" id="datepicker"/>
$(function() {
$( "#datepicker" ).datepicker({dateFormat: 'yy', changeYear: true, changeMonth: false});
});
在CSS中添加
.ui-datepicker-calendar {
display: none;
}
.ui-datepicker-month {
display: none;
}
.ui-datepicker-prev{
display: none;
}
.ui-datepicker-next{
display: none;
}
$('#year').datepicker({
format: "yyyy",
viewMode: "years",
minViewMode: "years"
});
我希望它对你也能有神奇的作用。
$('#datepicker').datepicker({ dateFormat: 'yy' })