jQuery UI Datepicker autoSize Option

Опубликовано: 22 Декабря, 2021

Пользовательский интерфейс jQuery состоит из виджетов графического интерфейса, визуальных эффектов и тем, реализованных с использованием jQuery, CSS и HTML. Пользовательский интерфейс jQuery отлично подходит для создания интерфейсов пользовательского интерфейса для веб-страниц. Виджет jQueryUI Datepickers в jQueryUI позволяет пользователям легко и визуально вводить даты. В этой статье мы увидим, как использовать опцию autoSize в jQuery UI Datepicker.
Опция Autosize , если установлено да в DatePicker будет автоматически размером в JQuery UI Datepicker.

Синтаксис:

 $ (". selector"). datepicker (
   {autoSize: true}
);

Подход: сначала добавьте скрипты пользовательского интерфейса jQuery, необходимые для вашего проекта.

<link href = “https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css” rel = “stylesheet”>
<script src = “https://code.jquery.com/jquery-1.10.2.js”></script>
<script src = “https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>

Пример 1:

Выход:

Пример 2:

HTML

 <!doctype html>
 < html lang = "en" >
 
< head >
    < meta charset = "utf-8" >
    < link href =
 " https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css "
        rel = "stylesheet" >
    < script src = " https://code.jquery.com/jquery-1.10.2.js " ></ script >
 
    < script src = " https://code.jquery.com/ui/1.10.4/jquery-ui.js " >
    </ script >
 
    <!-- JavaScript code -->
    < script >
 
        $(function () {
            $("#gfg").datepicker(
                { autoSize: true }
            );
        });
    </ script >
 </ head >
 
< body >
    < h1 >GeeksforGeeks</ h1 >
 
    < h3 >jQuery UI | datepicker autoSize option</ h3 >
 
    <!-- HTML -->
    < p >Enter Date: < input type = "text" id = "gfg" ></ p >
 </ body >
 
</ html > 

Выход:

Ссылка: https://api.jqueryui.com/category/widgets/

JQuery HTML jQuery-UI

jQuery UI Datepicker autoSize Option

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ