Пример JQuery UI - дата подборщика (Datepicker)
Из всплывающего окна или инлайн календаря, чтобы выбрать дату.
Для получения более подробной информации о компонентах 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>