如何在 jquery ui 日期选取器中调整其他输入的大小

How to resize additional input in jquery ui Datepicker?

本文关键字：其他 调整 输入 jquery ui 选取 日期      更新时间：2023-09-26

如何设置动态添加的input字段的宽度，这些字段通过jQueryUI日期选择器小部件获取值？

我有 2 个输入，"日历输入"是我们选择日期的地方，它将通过altField方法（日期选择器的核心方法）自动添加到我们的附加输入中。那么我可以动态调整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);
    }
});

这是小提琴的链接 - https://jsfiddle.net/mhf7kxo4/

这是您正在寻找的内容的工作小提琴。

基本输入自动调整大小插件（只是扩展了 isValidWidth更改此插件的限制）：

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

只需添加以下行：

$("#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();

由于您只想在日期选择器日期选择上做一些事情，因此您可以将内容添加到日期选择器的onClose或onSelect回调中

例：

    $("#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);
        }
    });

你的意思是这样吗？

    $("#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 演示

如果您不想使用插件，您可能希望看到以下解决方案：

将输入字段的宽度调整为其输入

相关文章：