jquery - jQuery datepicker 中按钮的位置
问题描述
我已经搜索了很多,但找不到我的问题的答案。
我已经在我的 jQuery DatePicker 中启用了按钮面板,但现在想知道是否可以更改按钮的位置?我需要一个“今天”和“昨天”按钮。
我已经为“昨天”编写了自定义按钮的代码,但是有没有办法改变它的位置?
我需要做的是按“昨天今天完成”的顺序排列按钮。目前它们显示为可以在此处看到的屏幕截图。
我也尝试为“今天”的自定义按钮编写代码,但它仍然没有正确定位,最重要的是,我似乎无法找到隐藏 buttonPanel 中默认按钮的方法.
我的日期选择器代码如下 - JSFiddle:
var options={
format: 'dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
beforeShow: function (input) {
//dpClearButton(input);
dpMaxButton(input);
},
showButtonPanel: true,
beforeShow: function (input) {
//dpClearButton(input);
dpMaxButton(input);
},
onChangeMonthYear: function (yy, mm, inst) {
dpMaxButton(inst.input);
}
};
function dpMaxButton (input) {
setTimeout(function () {
var d = new Date();
var yesterday = new Date((new Date()).valueOf() - 1000*60*60*24);
//alert (yesterday);
var buttonPane = $(input)
.datepicker("widget")
.find(".ui-datepicker-buttonpane");
$("<button>", {
text: "Yesterday",
click: function () {
jQuery(input).datepicker('setDate', yesterday);
jQuery(input).datepicker('hide'); }
}).appendTo(buttonPane).addClass("ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all");
}, 1)
};
date_input.datepicker(options);
$.datepicker._gotoToday = function(id) {
$(id).datepicker('setDate', new Date()).datepicker('hide').blur();
};
解决方案
我已经更新了代码:
http://jsfiddle.net/7Wygg/516/
首先添加的 css
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current{
float:none !important;
}
.pull-left{
float:left !important;
}
JS:
$(function() {
$(".datepicker").datepicker({
showButtonPanel: true,
beforeShow: function (input) {
//dpClearButton(input);
dpMaxButton(input);
},
onChangeMonthYear: function (yy, mm, inst) {
dpMaxButton(inst.input);
}
});
function dpMaxButton (input) {
setTimeout(function () {
var d = new Date();
var yesterday = new Date((new Date()).valueOf() - 1000*60*60*24);
//alert (yesterday);
var buttonPane = $(input)
.datepicker("widget")
.find(".ui-datepicker-buttonpane");
$("<button>", {
text: "Yesterday",
click: function () {
jQuery(input).datepicker('setDate', yesterday);
jQuery(input).datepicker('hide'); }
}).appendTo(buttonPane).addClass("ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all pull-left");
}, 1)
}
$.datepicker._gotoToday = function(id) {
$(id).datepicker('setDate', new Date()).datepicker('hide').blur();
};
});
推荐阅读
- reactjs - 如何在 React 和 Redux 应用程序的事件处理程序中调度操作
- google-app-engine - Google Cloud Scheduler 和 GAE cron 作业有什么区别?
- git - 将“混合”脏分支拆分为多个干净分支
- java - Apache Flink:java.lang.NoClassDefFoundError
- sympy - Sympy:“传播”共轭成总和
- c - 调用 pthread_exit() 时内存泄漏
- c# - Azure:通过证书从云工作者连接到密钥保管库
- rest - 简单的 CRUD 端点 Vs。更复杂的端点
- c++ - 如何使用右侧或左侧图像推断(推断)视差图中像素的坐标?
- xamarin - 在 Xamarin 中使用 Moq 进行 NUnit 单元测试