How can I set the width of dynamically added input
fields which are getting values via a jQueryUI datepicker widget?
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). So can I dynamically resize the input
make it lesser\\larger?
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/
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
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 ) :
(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();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.