How to resize additional input in jquery ui Datepicker?

Question

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 want tot resize the input only when the date is selected via the datepicker? — Kushal, Jan 17 '16 at 16:14
Yes.I mean additional input will have default value and it will be disabled,but when user select date via datepicker value of additional input will be changed and also should resize width of input. — Nazár Atamaníuk, Jan 17 '16 at 16:21

score 0 · Answer 1 · edited May 23 '17 at 12:31

0

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');
    }
});

jsFiddle Demo

If you do not wish to use a plugin, you might wish to see this solution:

Adjust width of input field to its input

edited May 23 '17 at 12:31

Community

1
1

answered Jan 17 '16 at 16:26

cssyphus

37,875
18
96
111

Yes and no,we cant set width for input as you did 20px;It should change width of additional input automatically,for example if user choosed date December 19,2015 it will resize additional input for this date,but if user choose Juny 1,2015 width should be changed automatically in lesser side.Do you know what i mean?Here is example http://jsfiddle.net/4Qsa8/ but its work via input text which user writing – Nazár Atamaníuk Jan 17 '16 at 16:31

score 0 · Answer 2 · answered Jan 17 '16 at 16:26

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);
        }
    });

score 0 · Accepted Answer · edited May 23 '17 at 11:44

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, '&amp;').replace(/\s/g,'&nbsp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                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();

@NazárAtamaníuk Ok I've corrected the plugin to autoresize and not just autogrow. Cheers. — gmanousaridis, Jan 17 '16 at 16:55

How to resize additional input in jquery ui Datepicker?

3 Answers3