如何从JQuery的日期选择器中删除今天的按钮
How to remove todays button from datepicker in JQuery?
我是jquery新手。我想把今天的按钮从Jquery的日期picker中移除。怎么做呢?我使用Jquery ui 1.8.10。
问候,Girish
在你的CSS文件中使用这个样式
button.ui-datepicker-current { display: none; }
我有这个:
$(".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);
$(input).datepicker("widget").find(".ui-datepicker-current").hide();
隐藏今日按钮
jsfiddle的工作示例
阅读更多关于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"/>可以用css隐藏
button.ui-datepicker-current { display: none; }
您可以通过将showButtonPanel设置为false来删除按钮，但这将删除所有按钮。如果您只想删除Today按钮，那么您可以使用以下代码片段:
$('<style type="text/css"> .ui-datepicker-current { display: none; } </style>').appendTo("head");
这将添加一个样式规则到你的页面，将Today按钮设置为无显示，从而隐藏按钮。
信用去JQuery DatePicker调整和JQuery创建css规则/类@运行时的答案。
您可以使用showButtonPanel选项来删除或显示日期选择器中的按钮
$( ".selector" ).datepicker({ showButtonPanel: true });
要删除today按钮，请添加以下行:
$('#sandbox-datepicker').datepicker({
todayBtn: false
});
$('.timecalender').datepicker({
dateFormat: 'yy-mm-dd',
timeFormat: 'H:mm',
buttonText: 'Select Date',
showsTime: true,
timeOnly: true,
}).focus(function () {
$(".ui-datepicker-current").hide();
});
再添加一个块。只检查$("#sameName").focus();
$( "#sameName" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'M yy',
showButtonPanel: true,
maxDate : 0 });
$("#sameName").focus(function () {
$(".ui-datepicker-current").hide();
});
查看minDate你可以这样实现
$( ".selector" ).datepicker({ minDate: new Date(2007, 1 - 1, 1) });
只需将今天的日期作为minDate，那么它将排除今天的日期
下面是一个例子:
<script>
$(document).ready(function() {
$("#DATETIME_START").Zebra_DatePicker({
format: "Y-m-d H:i:s",
show_select_today: false
});
});
</script>
这对我有效希望能有所帮助!:)
我也有同样的问题，经过一天的研究，我想出了这个解决方案: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>我知道这个问题很老了，但是我认为我的解决方案可以对遇到这个问题的其他人有用。
您可以选择合适的日期格式
$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });
如果不需要，可以从上面删除dd这可能对你有帮助!!
相关文章：
- 使用php或javascript从facebook相册URL中删除多余的部分
- RegEx删除空属性?例如，如果(class=“”||class=“”）移除;否则就下课
- 如何删除多行HTML排列中的空白
- 如何从rails中的代码中删除新行( ）
- 删除对HTML元素的拖动
- 当图像转换为本地存储的DataURL时，EXIF被删除
- 按顺序添加和删除类
- iframe正在添加标签，需要删除它们
- 如何在HTML输入字段中添加不可删除的后缀
- addData(）从最新图表中删除.js 2.1.3-怎么了
- 如何覆盖锚点元素's href目标，并在我点击转到目标javascript时删除其他错误
- 删除CKEditor工具栏按钮，但不删除功能
- 当浏览器上的后退按钮到达主页时，我需要删除Class
- 正在删除node.js中已验证的网站
- 正在从页面中删除iframe
- 如何从 HTML 查询中删除项目
- 如果今天是会计年度的最后一天，请从下拉菜单中删除当前年份
- jQuery ui datepicker:删除黄色高亮(取消高亮)今天'
- 比较日期并删除比今天早的日期
- 如何从JQuery的日期选择器中删除今天的按钮
