[英]How to resize additional input in jquery ui Datepicker?
How can I set the width of dynamically added input
fields which are getting values via a jQueryUI datepicker widget? 如何设置通过jQueryUI datepicker小部件获取值的动态添加的input
字段的宽度?
I have 2 inputs, "Calendar input" is where we are choosing date and it will be added automatically inside of our additional input via altField
method (core method of datepicker). 我有2个输入,“日历输入”是我们选择日期的地方,它将通过altField
方法( altField
核心方法)自动添加到我们的其他输入中。 So can I dynamically resize the input
make it lesser\\larger? 那么我可以动态调整input
大小以使其变小或变大吗?
Additional input: <input type="text" id="alternate" value="December,19 2015"><br>
Calendar input: <input type="text" id="from">
$("#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
altField: "#alternate",
altFormat: "MM d, yy",
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
Here is a link to the fiddle - https://jsfiddle.net/mhf7kxo4/ 这是小提琴的链接-https: //jsfiddle.net/mhf7kxo4/
Do you mean like this? 你是这个意思吗
$("#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
altField: "#alternate",
altFormat: "MM d, yy",
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
$('input').css('width','auto');
}
});
If you do not wish to use a plugin, you might wish to see this solution: 如果您不想使用插件,则可能希望看到以下解决方案:
As you just want to do some stuff on datepicker date selection you can just add your stuff in the onClose
or onSelect
callback of the date picker 当您只想对日期选择器日期选择做一些事情时,您可以将您的东西添加到日期选择器的onClose
或onSelect
回调中
Example: 例:
$("#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
altField: "#alternate",
altFormat: "MM d, yy",
onClose: function (selectedDate) {
// do you stuff over here
$("#alternate").width(100).removeClass("disabled");
$("#to").datepicker("option", "minDate", selectedDate);
}
});
Here is a working fiddle of what you are looking for. 这里是工作提琴 ,你在找什么。
Basic input autoresize plugin ( just extended isValidWidthChange limitation of this one ) : 基本输入自动调整大小的插件(这只是延长isValidWidthChange限制一个 ):
(function($){
$.fn.autoResizeInput= function(o) {
o = $.extend({
maxWidth: 1000,
minWidth: 0,
comfortZone: 70
}, o);
this.filter('input:text').each(function(){
var minWidth = o.minWidth || $(this).width(),
val = '',
input = $(this),
testSubject = $('<tester/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap'
}),
check = function() {
if (val === (val = input.val())) {return;}
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&').replace(/\s/g,' ').replace(/</g, '<').replace(/>/g, '>');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
currentWidth = input.width(),
isValidWidthChange = ( (newWidth < currentWidth || newWidth > currentWidth )&& newWidth >= minWidth)
|| (newWidth > minWidth && newWidth < o.maxWidth);
// Animate width
if (isValidWidthChange) {
input.width(newWidth);
}
};
testSubject.insertAfter(input);
$(this).bind('keyup keydown blur update', check);
});
return this;
};
})(jQuery);
Just add these lines too: 只需添加以下行:
$("#from")
.datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
altField: "#alternate",
altFormat: "MM d, yy",
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
$("#alternate").focus().blur();
}
});
$("#alternate")
.autoResizeInput({
maxWidth: 18,
minWidth: 11,
comfortZone: 5
})
.focus()
.blur();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.