jQuery 日期选择器中按钮的位置
Position of buttons in jQuery datepicker
我已经搜索了很多,但找不到我的问题的答案。
我在 jQuery DatePicker 中启用了按钮面板,但现在想知道是否可以更改按钮的位置?我需要一个 "Today" 和 "Yesterday" 按钮。
我已经为 "Yesterday" 编写了自定义按钮的代码,但是有没有办法改变它的位置?
我需要做的是按 "Yesterday Today Done" 的顺序设置按钮。目前它们显示为可以在此处看到 screenshot。
我也尝试为 "Today" 的自定义按钮编写代码,但它仍然无法正确定位,而且最重要的是,我似乎无法找到一种方法来隐藏 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();
};
});
我已经搜索了很多,但找不到我的问题的答案。
我在 jQuery DatePicker 中启用了按钮面板,但现在想知道是否可以更改按钮的位置?我需要一个 "Today" 和 "Yesterday" 按钮。
我已经为 "Yesterday" 编写了自定义按钮的代码,但是有没有办法改变它的位置?
我需要做的是按 "Yesterday Today Done" 的顺序设置按钮。目前它们显示为可以在此处看到 screenshot。
我也尝试为 "Today" 的自定义按钮编写代码,但它仍然无法正确定位,而且最重要的是,我似乎无法找到一种方法来隐藏 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();
};
});