Что такое Пример JQuery UI - дата подборщика (Datepicker) и как его использовать?

jQuery UI курс
jQuery UI тема
jQuery UI Библиотека компонентов
jQuery UI справочное руководство
jQuery UI примеров

Лучшее руководство по Пример JQuery UI - дата подборщика (Datepicker) в 2024 году. В этом руководстве вы можете изучить По умолчанию функция,анимация,Другие месяцев с даты,Кнопка дисплея бар,Дисплей рядный,Дисплей меню Месяц и Год,Дисплей несколько месяцев,Формат даты,значок триггера,Локализованный календарь,Заполняем другой поле ввода,Ограничить диапазон дат,Выберите диапазон дат,Неделя года показывают,

Пример JQuery UI - дата подборщика (Datepicker)

Предыдущий: экземпляр JQuery UI - Кнопка (Button)

Далее: Jquery UI пример - Dialog (Диалог)

Из всплывающего окна или инлайн календаря, чтобы выбрать дату.

Для получения более подробной информации о компонентах DatePicker см API документации элемент выбора даты (в Datepicker виджете) .

По умолчанию функция

комплектовщик Дата (Datepicker) привязана к стандартной форме на поле ввода. Перемещение фокуса на входе (или использовать клавишу табуляции, чтобы нажать), чтобы открыть интерактивный календарь на маленьком накладкой. Выберите дату, щелкните в любом месте на странице (поле ввода теряет фокус), или нажмите клавишу Esc, чтобы закрыть. При выборе даты, обратная связь отображается в качестве значения входных данных.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Название> Jquery дата UI подборщика (Datepicker) - функция по умолчанию </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#datepicker") .datepicker ();
  });
  </ Script>
</ Head>
<Body>
 
<P> Дата: <тип входного = "Текст" ID = "DatePicker"> </ p>
 
 
</ Body>
</ HTML>

анимация

Используйте различные анимации при открытии или закрытии DatePicker. Выберите фильм из выпадающего списка, а затем щелкните в поле, чтобы увидеть его эффект. Вы можете использовать любой из трех стандартных анимации, спецэффектов, или использовать любой из пользовательского интерфейса.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
	<Meta Charset = "UTF-8">
	<Название> Jquery дата UI подборщика (Datepicker) - Аниме </ title>
	<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
	<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
	<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
	<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
	<Script>
	$ (Function () {
		$ ( "#datepicker") .datepicker ();
		$ ( "#anim") .Кнопкой (Функция () {
			$ ( "#datepicker") .datepicker ( "Вариант", "showAnim", $ (это) .val ());
		});
	});
	</ Script>
</ Head>
<Body>

<P> Дата: <тип входного = "Текст" ID = "DatePicker" размер = "30"> </ p>

<P> Анимация: <br>
	<Выбрать ID = "Anim">
		<Значение Option = "шоу"> Show (по умолчанию) </ опции>
		<Значение Option = "slideDown"> слайд </ вариант>
		<Значение Option = "FadeIn"> Fade </ вариант>
		<Значение Option = "слепыми"> Слепые (UI жалюзи эффекты) </ опции>
		<Option значение = "подпрыгивать"> Сильный удар (UI отскока эффекты) </ вариант>
		<Option значение = "клип"> Clip (редактирование UI эффекты) </ опции>
		<Значение Option = "падение"> Падение (UI приземлились эффекты) </ вариант>
		<Вариант значение = "свернуть"> Fold (UI сложенная эффекты) </ вариант>
		<Option значение = "слайд"> Slide (UI эффекты скольжения) </ вариант>
		<Значение Option = ""> Нет </ опции>
	</ Select>
</ P>


</ Body>
</ HTML>

Другие месяцев с даты

DatePicker может показать дополнительные месяц дата, эти даты могут быть установлены в необязательной.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Название> Jquery дата UI подборщика (Datepicker) - в других месяцев с даты </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#datepicker") .datepicker ({
      showOtherMonths: правда,
      selectOtherMonths: истинные
    });
  });
  </ Script>
</ Head>
<Body>
 
<P> Дата: <тип входного = "Текст" ID = "DatePicker"> </ p>
 
 
</ Body>
</ HTML>

Кнопка дисплея бар

Булевыми showButtonPanel для выбора текущей даты отображается кнопка "Сегодня" , чтобы выключить календарь отображает "Готово" вариант кнопки. По умолчанию, когда бар дисплей кнопка позволит каждой кнопки, но кнопка может быть отключена через другие варианты. Кнопка текст может быть изменен.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Название> Jquery дата UI подборщика (Datepicker) - отображение панели кнопок </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#datepicker") .datepicker ({
      showButtonPanel: правда
    });
  });
  </ Script>
</ Head>
<Body>
 
<P> Дата: <тип входного = "Текст" ID = "DatePicker"> </ p>
 
 
</ Body>
</ HTML>

Дисплей рядный

DatePicker вложен на дисплее страницы, а не в покровном слое. Просто вызовите Див .datepicker () может быть, вместо вызова на входе.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> JQuery UI выбора даты (Datepicker) - встроенный дисплей </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#datepicker") .datepicker ();
  });
  </ Script>
</ Head>
<Body>
 
Дата: <DIV ID = "DatePicker"> </ DIV>
 
 
</ Body>
</ HTML>

Дисплей меню Месяц и Год

Выпадающее окно отображает месяц и год, а не статический дисплей названия месяц / год, легко охватить большой диапазон времени на навигацию. Добавьте логическое значение changeMonth и changeYear вариант.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Название> Jquery дата UI подборщика (Datepicker) - Дисплей месяц & Amp; меню Год </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#datepicker") .datepicker ({
      changeMonth: правда,
      changeYear: правда
    });
  });
  </ Script>
</ Head>
<Body>
 
<P> Дата: <тип входного = "Текст" ID = "DatePicker"> </ p>
 
 
</ Body>
</ HTML>

Дисплей несколько месяцев

Установка numberOfMonths параметр представляет собой целое число 2 или целое число больше 2, чтобы отобразить на Datepicker нескольких месяцев.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Название> Jquery дата UI подборщика (Datepicker) - Отображение нескольких месяцев </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#datepicker") .datepicker ({
      NUMBEROFMONTHS: 3,
      showButtonPanel: правда
    });
  });
  </ Script>
</ Head>
<Body>
 
<P> Дата: <тип входного = "Текст" ID = "DatePicker"> </ p>
 
 
</ Body>
</ HTML>

Формат даты

В различных способов отображения даты обратной связи. Выберите формат даты из выпадающего списка, а затем нажмите и выберите дату в поле ввода, просмотра формат даты выбранного дисплея.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Название> Jquery дата UI подборщика (Datepicker) - Формат даты </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#datepicker") .datepicker ();
    $ ( "#format") .Кнопкой (Функция () {
      $ ( "#datepicker") .datepicker ( "Вариант", "DateFormat", $ (это) .val ());
    });
  });
  </ Script>
</ Head>
<Body>
 
<P> Дата: <тип входного = "Текст" ID = "DatePicker" размер = "30"> </ p>
 
<P> Параметры Формат: <br>
  <Выберите ID = "Формат">
    <Опция Значение = "мм / дд / гг"> По умолчанию - мм / дд / гг </ вариант>
    <Опция Значение = "уу-мм-дд"> ISO 8601 - уу-мм-дд </ опции>
    <Опция значение = "d М, у"> Short - d M, у </ вариант>
    <Значение Option = "d ММ, у"> Средние - d ММ, у </ вариант>
    <Option значение = "DD, d ММ, уу"> Полная - ДД, ММ d, уу </ вариант>
    <Option значение = "& APOS; день & APOS; D & обечайки & APOS; MM & APOS; в год & APOS; уу"> с текстом - "день" d 'из' MM 'в год' уу </ вариант>
  </ Select>
</ P>
 
 
</ Body>
</ HTML>

значок триггера

Нажмите на значок рядом с полем ввода для отображения DatePicker. Установка DatePicker открывает (поведение по умолчанию) в фокусе, или нажмите на иконку, чтобы открыть или открыть / получить фокус при нажатии на иконку.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Название> Jquery дата UI подборщика (Datepicker) - значок триггера </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#datepicker") .datepicker ({
      showOn: "кнопка",
      buttonImage: "Изображения / calendar.gif",
      buttonImageOnly: правда
    });
  });
  </ Script>
</ Head>
<Body>
 
<P> Дата: <тип входного = "Текст" ID = "DatePicker"> </ p>
 
 
</ Body>
</ HTML>

Локализованный календарь

Локализация DatePicker календарь язык и формат (по умолчанию английский / Западный формат). DatePicker содержит встроенную поддержку для правых налево языках чтения, таких как арабский и иврит.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Название> Jquery дата UI подборщика (Datepicker) - локализованы календарь </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Script SRC = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-ar.js"> </ скрипт>
  <Script SRC = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-fr.js"> </ скрипт>
  <Script SRC = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-he.js"> </ скрипт>
  <Script SRC = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-zh-TW.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#datepicker") .datepicker ($ .datepicker.regional [ "Fr"]);
    $ ( "#locale") .Кнопкой (Функция () {
      $ ( "#datepicker") .datepicker ( "Option",
        $ .datepicker.regional [$ (Это) .val ()]);
    });
  });
  </ Script>
</ Head>
<Body>
 
<P> Дата: <тип входного = "Текст" ID = "DatePicker"> & NBSP;
  <Select ID = "локаль">
    <Option значение = "ар"> арабский (& # 8235; (& # 1575; & # 1604; & # 1593; & # 1585; & # 1576; & # 1610; & # 1577; </ вариант>
    <Option значение = "ZH-TW"> Китайский традиционный (& # 32321; & # 39636; & # 20013; & # 25991;) </ вариант>
    <Значение Option = ""> Английский </ вариант>
    <Option значение = "FR" выбрано = "выбрано"> Французский (Fran & ccedil; САИ) </ вариант>
    <Значение Option = "он"> иврит (& # 8235; (& # 1506; & # 1489; & # 1512; & # 1497; & # 1514; </ вариант>
  </ Select> </ p>
 
 
</ Body>
</ HTML>

Заполняем другой поле ввода

Используйте altField и altFormat опции Всегда , когда выбрать дату, дата будет заполнена с определенным форматом в другом поле ввода. Когда эта функция по дате на компьютере дружественных дальнейшей обработки, пользователю предоставляется с удобной датой.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Название> Jquery дата UI подборщика (Datepicker) - заполнить другой поле ввода </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#datepicker") .datepicker ({
      altField: "#alternate",
      altFormat: "ДД, ММ d, уу"
    });
  });
  </ Script>
</ Head>
<Body>
 
<P> Дата: <тип входного = "Текст" ID = "DatePicker"> & NBSP; <входной тип = "текст" ID = "альтернативный" размер = "30"> </ p>
 
 
</ Body>
</ HTML>

Ограничить диапазон дат

По minDate и maxDate опция ограничивает выбираемый диапазон дат. Установить начальную и конечную даты фактической даты (новые Дата (2009, 1 - 1, 26)), или строка сегодняшнего значения смещения (-20), или как цикл и единицы измерения ( '+ 1M + 10D '). Если установлено в строку, используйте 'D' в течение нескольких дней, используя 'W' обозначает недели, используя 'M' в течение месяца, используя 'Y' является годом.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Название> Jquery дата UI подборщика (Datepicker) - ограничить диапазон дат </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#datepicker") .datepicker ({MinDate: -20, MaxDate: "+ 1M + 10D"});
  });
  </ Script>
</ Head>
<Body>
 
<P> Дата: <тип входного = "Текст" ID = "DatePicker"> </ p>
 
 
</ Body>
</ HTML>

Выберите диапазон дат

Выберите диапазон дат для поиска.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Название> Jquery дата UI подборщика (Datepicker) - Выберите диапазон дат </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "# С") .datepicker ({
      defaultDate: "+ 1w",
      changeMonth: правда,
      NUMBEROFMONTHS: 3,
      OnClose: функция (SelectedDate) {
        $ ( "#to") .datepicker ( "Вариант", "MinDate", SelectedDate);
      }
    });
    $ ( "#to") .datepicker ({
      defaultDate: "+ 1w",
      changeMonth: правда,
      NUMBEROFMONTHS: 3,
      OnClose: функция (SelectedDate) {
        $ ( "# С") .datepicker ( "Вариант", "MaxDate", SelectedDate);
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Ярлык = "из"> из </ метка>
<Тип входного = "Текст" ID = "от" Name = "из">
<Ярлык = "до"> до </ метка>
<Тип входного = "Текст" ID = "на" имя = "на">
 
 
</ Body>
</ HTML>

Неделя года показывают

DatePicker может отображать первые несколько недель в году. Значение по умолчанию рассчитывается в соответствии с ISO 8601 Определение: неделю, начиная с понедельника, в первую неделю года, которая содержит первый четверг. Это означает, что в течение одного года и может быть еще пара дней в неделю.

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Название> Jquery дата UI подборщика (Datepicker) - отобразить первые несколько недель года </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
  <Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#datepicker") .datepicker ({
      showWeek: правда,
      FirstDay: 1
    });
  });
  </ Script>
</ Head>
<Body>
 
<P> Дата: <тип входного = "Текст" ID = "DatePicker"> </ p>
 
 
</ Body>
</ HTML>