Javascript 如何从 JQuery 中的日期选择器中删除今天的按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5698832/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove todays button from datepicker in JQuery?
提问by Girish Chaudhari
I am new in jquery. I want to remove todays button from datepicker in Jquery. How to do that? I am using Jquery ui 1.8.10.
我是 jquery 的新手。我想从 Jquery 中的日期选择器中删除今天的按钮。怎么做？我正在使用 Jquery ui 1.8.10。
Regards, Girish
问候， 吉里什
回答by Gajendra Bang
use this style in your css file
在您的 css 文件中使用此样式
button.ui-datepicker-current { display: none; }
回答by Luis Batista
I have this:
我有这个：
$(".datepicker").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true,
yearRange: "c-150:c+30",
showButtonPanel:true,
closeText:'Clear',
beforeShow: function( input ) {
setTimeout(function () {
$(input).datepicker("widget").find(".ui-datepicker-current").hide();
var clearButton = $(input ).datepicker( "widget" ).find( ".ui-datepicker-close" );
clearButton.unbind("click").bind("click",function(){$.datepicker._clearDate( input );});
}, 1 );
}
}).attr("readonly", true);
the line :
线：
$(input).datepicker("widget").find(".ui-datepicker-current").hide();
hide the today button
隐藏今天按钮
回答by Peeter
Working example on jsfiddle
jsfiddle 上的工作示例
Read more on docs.jquery.com
在docs.jquery.com上阅读更多内容
$(document).ready(function() {
$("#datepicker").datepicker({
"showButtonPanel": false
});
});<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<input type="text" id="datepicker"/>回答by sohaib
you can hide it with css
你可以用css隐藏它
button.ui-datepicker-current { display: none; }
回答by Steve
You can remove the button by setting the showButtonPanelto false, but this will remove all buttons. If you want to just remove the Todaybutton, then you can use this snippet of code:
您可以通过将 设置showButtonPanel为 false来删除按钮，但这将删除所有按钮。如果您只想删除Today按钮，则可以使用以下代码片段：
$('<style type="text/css"> .ui-datepicker-current { display: none; } </style>').appendTo("head");
This will append a style rule to your page that will set the Todaybutton to have a display of none thereby hiding the button.
这会将样式规则附加到您的页面，该规则会将Today按钮设置为无显示，从而隐藏按钮。
Credit to goes to JQuery DatePicker Tweaksand jquery create css rule / class @ runtimefor the answer.
回答by viji
You can use showButtonPanel option to remove or show the buttons in datepicker
您可以使用 showButtonPanel 选项删除或显示日期选择器中的按钮
$( ".selector" ).datepicker({ showButtonPanel: true });
回答by ianace
回答by Wal Heredia
Here an example:
这里有一个例子：
<script>
$(document).ready(function() {
$("#DATETIME_START").Zebra_DatePicker({
format: "Y-m-d H:i:s",
show_select_today: false
});
});
</script>
this worked for me Hope it helps! :)
这对我有用希望它有帮助！:)
回答by konstantc
I had the same problem and, after a day of research, I came up with this solution: http://jsfiddle.net/konstantc/4jkef3a1/
我遇到了同样的问题，经过一天的研究，我想出了这个解决方案：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>I know this question is pretty old but I thought that my solution can be of use to others that encounter this problem. Hope it helps.
我知道这个问题已经很老了，但我认为我的解决方案对遇到此问题的其他人有用。希望能帮助到你。
