Календар за двигател на сайта е не само необходимо, но и полезно нещо. В допълнение към факта, че ви позволяват да преглеждате календара (наистина?! - бележка на редактора), те носят много полезни функции (не може! - бележка на редактора), като се започне от обичайната „проба с пипета“ до съставяне на календар на събитията (за какво говорите! – бел.ред.).
Тази статия ще обхване повечето от плъгините за календар и датапикер за jQuery. Въпреки това, в края на статията ще ви чака един плъгин, а не в jQuery, което отбелязах за себе си от дълго време и което моята съвест не ми позволява да мина. Така че...
Инструменти за избор на дати в jQuery
Пълен календар... Календарът е подобен на предишния, но много по-добър. С право може да се нарече организатор - можете да запишете всички случаи и да ги видите в календара за месец, седмица или ден, точно като в PDA. Стабилен, крос-браузър, докато не се намерят аналози, следователно, най-добрият.
Календар със задачи за седмицата. В Opera 9.26 не работи. Тъй като предишният плъгин също има функцията на този плъгин, предишният вероятно ще бъде най-добрият избор.
Много хубав плъгин с възможност за избор на няколко дати. Нещо като кръстосани браузъри. Не подминавайте, заслужава си вниманието.
Календар в стил iPhone със запис на събития.
Календар без никакви претенции за гениалност. Просто е.
Може би за jQuery това е усъвършенстван календар, или по-скоро инструмент за избор на дати. Работи навсякъде и безусловно. Истината се вижда в Opera 9.26 (на 10 всичко е нормално) и при магарета под 7 включително, някакво задържане. Това обаче не променя факта, че работи повече от правилно. Има поддръжка за скинове. И, което е важно, поддръжка за куп различни езици. Каквото и да търсите, давам го веднага. 
Базиран на jQuery UI Datepicker, но отделен от него, защото разработчиците на jQuery UI Datepicker искаха по-опростена функционалност. Тоест този плъгин има допълнителни функции, които първият няма. Няма смисъл да ги изброявате, трябва да погледнете. Преминете през връзката с примери в различни раздели и ще разберете. Възможностите му са много, много приятни. 
Много прилича на предишния брат, само функционалността може да бъде малко по-малка. Не съм сигурен обаче за това. 
Избор на дата - jQuery плъгин... Бих искал да нарека този плъгин най-добрият, но не мога, тъй като съвместимостта му с различни браузъри е слаба. В Opera 9.26 календарът изобщо не реагира на влияния, в Opera 10 има проблеми с дисплея (макар и малки), в IE6 се показва възможно най-криво. Ако всичко това не ви притеснява, тогава е силно препоръчително да го използвате! Той има много възможности, можете да видите примерната връзка. 
Прост инструмент за избор на дати, който също работи с времето.
Уникален календар, който ви позволява да работите със събития. Календарът трябва само да вмъкне масив от събития и това е всичко. В Opera 9.26 е леко нестабилна, но всичко е наред. Съветвам ви да прочетете. 
Притурка Datepicker
Тази статия се фокусира върху приспособлението Datepicker, удобен интерактивен календар, който улеснява въвеждането на дати. Получаването на календарна информация от потребителите като текст винаги е проблем, защото има много различни формати за изразяване на дати. Datepicker улеснява избирането на дата и представянето й по последователен начин, като по този начин намалява вероятността от грешки.
Създаване на джаджа Datepicker
Има два основни начина за създаване на джаджа Datepicker. Най-често се прикрепя към входен елемент с помощта на метод datepicker ().... Това не променя незабавно външния вид на елемента, но веднага щом елементът получи входен фокус (когато щракнете върху него или отидете до него от други елементи с помощта на
Календарите от описания тип се наричат изскачащи календари... Пример за създаване на такъв календар е даден по-долу:
Фигурата показва какво се случва, когато преместите фокуса към поле за въвеждане:
Потребителят може да въведе датата ръчно или да я избере с помощта на календара. Веднага щом входният елемент загуби фокус или потребителят натисне клавиш
Локализиране на приспособлението Datepicker
Както можете да видите, в показания пример календарът се показва на английски. Джаджата на jQuery UI Datepicker предоставя сравнително изчерпателна поддръжка за различни стандарти за форматиране на дата, използвани по целия свят, включително 61 опции за локализация. За да получите достъп до тях, трябва да импортирате един помощен JavaScript във вашия документ и да кажете на Datepicker коя локализация да използва. По-долу е даден подходящ пример:
... ... $ (функция () ($ ("# datep"). datepicker ($. datepicker.regional ["ru"]);)); ...
Файлът jquery-ui-i18n.js се намира в папката development-bundle / ui / i18n на архивния файл на библиотеката на jQuery UI, който трябва да сте изтеглили от jqueryui.com. Копирайте го в същата папка като оригиналния файл и го добавете към вашия документ, както е показано в кода. Резултатът е показан на фигурата:
Създаване на вграден календар на Datepicker
Вторият начин да използвате приспособлението Datepicker е да го вградите в документа. За да направите това, изберете елемента div или span с помощта на jQuery и извикайте метода datepicker (). Вграденият календар се показва, докато HTML елементът, от който е базиран, е видим. Пример за създаване на вграден календар е даден по-долу:
Този пример използва елемент span като основен HTML елемент за създаване на приспособление Datepicker. Резултатът е показан на фигурата:
Вграденият календар може да бъде полезен, ако не искате да работите с изскачащи обекти. Разбира се, има приложения, които работят с дати толкова интензивно, че има смисъл да имате календар под ръка по всяко време. Но в повечето случаи е препоръчително да оставите календара скрит, докато не е необходимо.
Трудността при скриването и показването на вградения Datepicker се дължи на факта, че добавянето му към документ изисква промяна в оформлението на страницата, което може да причини проблеми с представянето. От моя гледна точка, в повечето ситуации е много по-удобно да използвате изскачаща джаджа.
Настройване на джаджа Datepicker
Ако сте се занимавали с обработка на дати преди, тогава добре сте наясно колко трудно е да се работи с тази категория данни. Отражение на тази сложност е множеството свойства, поддържани от джаджа Datepicker. Следващите няколко раздела са посветени на описанието на групите свързани свойства, с помощта на които се конфигурира тази джаджа.
Основни настройки
Използват се няколко опции за конфигурация за персонализиране на основните свойства на изскачащи и вградени календари. Тези свойства са много важни, защото ви позволяват да контролирате интегрирането на джаджата в документа. Техният списък е даден в таблицата по-долу:
| Имот | Описание |
|---|---|
| altField | Позволява ви да зададете допълнително поле, което ще се актуализира, когато изберете дата в календара |
| buttonImageOnly | Показва, че изображението, определено от опцията buttonImage, трябва да се използва вместо допълнителен бутон за отваряне на календара |
| бутонИзображение | Посочва URL адреса на изображението, използвано за помощния бутон за отваряне на изскачащ календар. Не се използва по подразбиране |
| бутонТекст | Указва текста, който ще се показва в изскачащия бутон за отваряне на календара. Текстът по подразбиране е многоточие (...) |
| defaultDate | Позволява ви да зададете датата, която ще бъде маркирана, когато отворите календара |
| хора с увреждания | Показва дали джаджата трябва първоначално да бъде деактивирана. По подразбиране е false |
| Покажи се | Определя действието, което инициира отварянето на изскачащия календар. По подразбиране е фокус |
Посочване на датата по подразбиране
Най-простата настройка е и най-полезна. Използвайки опцията за дата по подразбиране, можете да посочите датата, която ще бъде автоматично маркирана при отваряне на календара.
Ако опцията defaultDate не е зададена, вместо това се използва текущата дата. (Разбира се, това се отнася до датата, зададена в системата на потребителя. Задаване на часови зони, превключване към лятно часово време, неправилни конфигурации могат да причинят датата, показана на потребителя, да не съвпада с датата, която очаквате.)
Тази опция се използва само ако няма атрибут value на входния елемент. Ако този атрибут присъства (независимо дали е включен в документа от вас или се появява в резултат на предварителен избор на потребител), тогава приспособлението Datepicker ще използва неговата стойност.
Ако искате календарът да се отваря с различна начална дата, можете да го зададете, като използвате един от методите, описани в таблицата по-долу:
| смисъл | Описание |
|---|---|
| нула | Използва се текущата дата |
| Обект за дата | Използва се стойност, представена като обект за дата на JavaScript. |
| + дни, -дни | Използва се дата, която се различава от текущата с посочения брой дни. И така, +3 означава дата, която ще дойде три дни след текущата, а -2 означава дата преди два дни |
| + 1d + 7w -1m + 1y | Използва се дата, която се брои от текущата дата и се изразява по отношение на броя дни (d), седмици (w), месеци (m) и години (y), определяйки времето за изместване на датата напред (+) или назад (-) във времето. Разрешено е смесването на положителни и отрицателни стойности на една и съща дата. Например комбинацията от стойности -1d + 1m, използвана във връзка с датата 12 ноември 2011 г., съответства на 11 декември 2011 г. |
Пример за използване на опцията defauitDate за определяне на дата след пет години е показан по-долу:
$ (функция () ($ .datepicker.setDefaults ($. datepicker.regional ["ru"]); $ ("# datep"). datepicker ((defaultDate: "+ 5y"));));
Да предположим, че текущата дата е декември 2013 г. След това, както е показано на фигурата по-долу, датата, посочена от стойността на опцията defauitDate, съответства на декември 2018 г.:
Ще срещнете описания формат за посочване на относителни дати повече от веднъж. Това е много гъвкав формат, който осигурява необходимата прецизност. По същия начин, както в примера, можете да пропуснете всеки интервал, който не възнамерявате да променяте. Например, вместо стойността "+ 0d + 0w + 0m + 5y" е напълно възможно да се използва стойността "+ 5y". Удобното при този формат е, че позволява да се смесват положителни и отрицателни стойности за различни интервали, което ви позволява да определите точната дата, която искате.
Определете събитието, което задейства отварянето на изскачащия календар
Опцията showOn ви позволява да контролирате събитието, в отговор на което трябва да се показва изскачащият календар. Тази опция може да приеме една от трите стойности:
фокусИзскачащият календар се отваря, когато входът получи фокус. Това е по подразбиране.
бутонИзскачащият календар се отваря с щракване върху бутона.
и дветеИзскачащият календар се показва както след щракване върху бутона, така и след като входният елемент получи фокус.
За бутон или и за двете, Datepicker създава елемент бутон и го поставя в документа непосредствено след входния елемент. Пример за използване на опцията showOn е показан по-долу:
$ (функция () ($ .datepicker.setDefaults ($. datepicker.regional ["ru"]); $ ("# datep"). datepicker ((showOn: "и двете");));
Както е показано на фигурата, в документа се появи бутон. Тъй като опцията showOn е зададена и на двете в този пример, изскачащият календар ще се показва както при щракване върху бутона, така и когато входният елемент получи фокус.
Бутонът, добавен от приспособлението Datepicker, не е приспособление за бутон на потребителския интерфейс на jQuery. Ако искате всички бутони да са от един и същи тип, изберете елемента бутон и извикайте метода jQuery UI button ().
Елементът бутон може да бъде стилизиран с помощта на опциите buttonImage и buttonText. Ако посочите URL адреса на изображение в опцията buttonImage, инструментът за избор на дата ще постави това изображение върху бутона. Освен това текстът по подразбиране (елипса), свързан с бутон, може да бъде заменен с друг текст, като се използва опцията buttonText, както е показано в примера по-долу:
$ (функция () ($ .datepicker.setDefaults ($. datepicker.regional ["ru"]); $ ("# datep"). datepicker ((showOn: "both", buttonText: "Select"));) );
Като използвате опциите buttonImage и buttonImageOnly заедно, можете да се отървете от бутона напълно, като го замените с изображение. По-долу е даден подходящ пример:
Този пример задава изображението на right.png и задава опцията buttonImageOnly на true. Освен това към документа са добавени няколко CSS стила, за да се контролира разположението на изображението спрямо етикета и елементите за въвеждане. Datepicker не може да разбере къде точно да постави елемента img, така че CSS стиловете бяха приложени за правилното позициониране на този img елемент в документа. Резултатът от използването на изображение вместо бутон е показан на фигурата:
Контрол за избор на дата
Целта на приспособлението Datepicker е да предостави на потребителя възможността да избере дата, но в много случаи този процес изисква някои ограничения. Таблицата по-долу описва настройките, които ви позволяват да задавате ограничения, които принуждават потребителя да избира само валидни дати:
| Имот | Описание |
|---|---|
| промяна месец | Ако тази опция е вярна, календарът показва падащ списък, който ви позволява да навигирате директно по месеци. По подразбиране е false |
| промянаГодина | Ако тази опция е вярна, календарът показва падащ списък, който ви позволява да навигирате директно по година. По подразбиране е false |
| constrainInput | Ако тази опция е вярна, приспособлението Datepicker проверява дали съдържанието на полето за въвеждане съответства на посочения формат на датата. По подразбиране е вярно |
| hideIfNoPrevNext | Ако тази опция е вярна, тогава иконите, които ви позволяват да се движите напред и назад в календара спрямо показаната дата, са напълно скрити, а не просто деактивирани. По подразбиране е false |
| maxDate | Посочва максималната дата, налична за избор. Това ограничение отсъства по подразбиране. |
| minDate | Определя минималната налична дата за избор. Това ограничение отсъства по подразбиране. |
| брой месеци | Определя броя на месеците, които се показват едновременно в календара. По подразбиране е 1 |
| showCurrentAtPos | Ако календарът е настроен да показва няколко месеца по едно и също време, тогава тази опция определя номера на позицията, в която трябва да се показва текущият или по подразбиране месец. По подразбиране е 0 |
| стъпкаМесеци | Определя колко месеца напред или назад трябва да се премести датата, показана в календара, когато бутонът се щракне напред или назад във времето |
| годишен диапазон | Указва диапазона от години, налични за избор в падащия списък, добавен с опцията changeYear. По подразбиране този списък включва десетте предишни и десет следващи години, както и текущата година. |
Ограничете въведените знаци и период от време
Като зададете опцията constrainInput на true, можете да ограничите въвеждането на знаци в текстовото поле само до онези знаци, които следват добре дефиниран формат. Разрешеният набор от символи се определя от настройките за локализация, обсъдени по-горе. Ако не сте локализирали джаджата Datepicker, трябва да очаквате само числа и наклонена черта (/) в набора от валидни знаци.
Използването на посочената опция constrainInput не означава, че потребителят няма да може да въведе невалидна дата, като 99/99/99, но значително ще намали вероятността от грешки. Стойността на тази настройка се увеличава допълнително, ако опцията showOn е настроена на бутон, тъй като в този случай изскачащият календар няма да се отвори автоматично, когато полето за въвеждане получи фокус.
Обикновено потребителите са готови да използват календар, за да изберат дата, но трябва да го видят, за да го направят. Ако календарът не се показва на екрана, тогава не всеки потребител ще предположи, че за да отворите календара, е достатъчно да щракнете върху бутона. Всяка възможност, която дадете на потребителя да въведе директно дата в текстово поле, увеличава вероятността форматът на въведената от него дата да се окаже неправилен. Пример за използване на опцията constrainInput е показан по-долу:
$ (функция () ($ .datepicker.setDefaults ($. datepicker.regional ["ru"]); $ ("# datep"). datepicker ((constrainInput: true, minDate: "-3", maxDate: "+ 1" )); ));
Тук true се присвоява на опцията constrainInput само с цел яснота, тъй като е по подразбиране за тази опция. Другите две опции ви позволяват да ограничите диапазона от дати, налични за избор, минимални и максимални дати.
Както при опцията defaultDate, обсъдена по-рано, опциите minDate и maxDate могат да бъдат нулеви (без дефинирана дата), обект на JavaScript Date, брой дни и относителен низ за дата. В този пример сме избрали числово представяне, което показва броя на дните спрямо текущата дата.
На фигурата можете да видите, че Datepicker деактивира неизбираеми клетки в календара:
Моля, имайте предвид, че бутоните за месеца се деактивират автоматично, ако не са необходими. Тези бутони се намират в горния ляв и десен ъгъл на календара и ви позволяват бързо да преминете към следващия или предходния месец. Както е показано на фигурата, всички избираеми дати са за текущия месец и следователно и двата бутона са деактивирани. В ситуации като тази можете да скриете тези бутони напълно, ако е необходимо, като зададете опцията hideIfNoPrevNext на true.
Стойността minDate не трябва да е в миналото, а стойността maxDate не трябва да е в бъдещето, нито е необходимо да задавате и двете стойности едновременно. За да позволите на потребителя да избира дати от диапазон, предшестван от "подготвителен" период, можете да зададете опцията minDate на стойност за бъдещето, като по този начин не позволявате на потребителя да избира дати, които попадат в този период, както е показано в пример по-долу:
$ (функция () ($ .datepicker.setDefaults ($. datepicker.regional ["ru"]); $ ("# datep"). datepicker ((minDate: "+4"));))
В този пример посочихме, че потребителят не трябва да може да избира дата по-рано от 4 дни след текущата дата. Стойността за опцията maxDate е недефинирана, което означава, че потребителят ще може да избере всяка дата след посочения "период на забавяне". Резултатът е показан на фигурата:
Имайте предвид, че бутонът за преминаване към следващия месец в тази ситуация е активиран, докато бутонът за преминаване към предходния месец е деактивиран (поради липса на дати от миналото, които биха били достъпни за потребителя за избор).
Опциите minDate и maxDate работят във връзка с опцията defaultDate, което означава, че обвързването на диапазоните към днешната дата е по избор.
Създайте календар, който показва няколко месеца едновременно
Приспособлението Datepicker ви позволява да зададете броя на месеците, които трябва да се показват едновременно в календара, като използвате опцията numberOfMonths. Можете да направите това, като посочите желания брой месеци или масив от два елемента, който определя размера на месечната календарна мрежа.
Примерът по-долу използва подход, базиран на масиви, който намирам за най-подходящ за вградени джаджи Datepicker, тъй като размерът на мрежата често е твърде голям за изскачащи джаджи (ще се върнем към тази дискусия по-късно).
$ (функция () ($ .datepicker.setDefaults ($. datepicker.regional ["ru"]); $ ("# datep"). datepicker ((numberOfMonths:));));
Този пример има календарна мрежа с височина един месец и ширина три. Резултатът е показан на фигурата:
Масив от два елемента е еквивалентен на числова стойност 3. Ако стойността на опцията numberOfMonths е посочена като число, джаджата показва съответния брой месеци на един ред.
Причината, поради която рядко използвам този подход, когато работя с изскачащи календари, е, че в случай на големи мрежи трябва да се направят определени предположения относно размера на прозореца и дисплея на браузъра. Изскачащият Datepicker не е диалогов прозорец на операционната система. Това е умело оформен HTML елемент, който се появява като част от HTML документа. Това означава, че когато големи календарни мрежи се показват на малък екран или в малък прозорец на браузъра, голяма част от останалата информация, съдържаща се в документа, ще се покаже извън екрана.
Осигуряване на директен достъп до месеци и години
Вместо просто да показвате месеци и години в заглавката на календара, можете директно да получите достъп до съответните периоди от време, като използвате падащи списъци. Тази функция може да се използва за ускоряване на нещата, когато потребителите трябва да избират дати от широк диапазон от възможни стойности, и се реализира с помощта на опциите changeMonth и changeYear.
Задаването на някоя от тези опции на true активира съответния падащ списък и вие можете самостоятелно да контролирате активирането на тези падащи списъци. Пример за използване на тези опции е показан по-долу:
$ (функция () ($ .datepicker.setDefaults ($. datepicker.regional ["ru"]); $ ("# datep"). datepicker ((changeMonth: true, changeYear: true, yearRange: "-1: + 2 "))));));
В този сценарий и двете падащи менюта са активирани. В допълнение, опцията yearRange се използва за ограничаване на диапазона от години, между които потребителят може да прескача. Необходимият диапазон се посочва чрез стойността "-1: +2", което означава, че календарът позволява на потребителя да навигира в рамките на една година и две години напред спрямо текущата година.
Падащите списъци и посоченият диапазон от години са показани на фигурата:
Когато задавате годишни диапазони с помощта на опцията yearRange, можете да посочите действителни години. Така че в този пример можете да посочите стойността: "2012: 2015".
Контролиране на външния вид на приспособлението Datepicker
Има редица свойства, които ви позволяват да персонализирате външния вид на Datepicker, когато се показва на потребителя. За обичайните задачи за избор на дата можете да сте доволни от външния вид на календара по подразбиране, с който вече сте запознати от предишните примери, но възможността да персонализирате външния вид, за да отговаря на вашето конкретно уеб приложение, е изключително полезна.
Свойствата, които предоставят възможност за промяна на външния вид на джаджа Datepicker, са показани в таблицата по-долу:
| Имот | Описание |
|---|---|
| appendText | Указва текст на подсказка, който съдържа допълнителна информация, като обяснения за форматирането на датата, която да се вмъкне в документа след елемента за въвеждане |
| closeText | Указва текста за бутона за затваряне на календара, който се показва в лентата с помощни бутони, ако е активиран. По подразбиране е "Затвори" |
| currentText | Указва текста за бутона за връщане към текущия месец, който се показва на лентата с допълнителни бутони, ако е активиран. По подразбиране е „Днес“ |
| продължителност | Задава скоростта или продължителността на анимацията, определена от опцията showAnim. По подразбиране е нормално |
| gotoCurrent | Ако тази опция е вярна, тогава бутонът „Днес“, разположен на панела с допълнителни бутони, ако е активиран, ще се върне към избраната дата, а не към текущата дата. По подразбиране е false |
| изберете Други месеци | Ако тази опция е вярна, тогава датите, показани в резултат на задаване на опцията showOtherMonths на true, стават достъпни за избор. |
| showAnim | Определя типа анимация, използвана за показване и скриване на изскачащи календари. По подразбиране е false |
| showButtonPanel | Ако тази опция е вярна, тогава в календара ще се покаже допълнителен панел с бутони, с помощта на които потребителят може да премине към текущата дата и (ако се използва изскачаща джаджа) да затвори календара. По подразбиране е false |
| showOptions | Задава опциите за анимацията, определена от опцията showAnim |
| showOtherMonths | Ако тази опция е вярна, тогава празните полета в календарната мрежа ще бъдат попълнени с дати от предишни и следващите месеци. По подразбиране е false |
| showWeek | Ако стойността на тази опция е вярна, тогава в календара ще се покаже колона с номера на седмици. По подразбиране е false |
| weekHeader | Указва заглавието на колоната на календара с номера на седмици, активирани с опцията showWeek. По подразбиране е "Ned" |
Показване на седмици
В някои приложения е важно да знаете номера на седмицата от годината, в която попада определена дата. Например, това се изисква в много счетоводни програми. В приспособлението Datepicker показването на информация за седмицата се контролира с помощта на опциите showWeek и weekHeader, както е показано в примера по-долу:
$ (функция () ($ .datepicker.setDefaults ($. datepicker.regional ["ru"]); $ ("# datep"). datepicker ((showWeek: true, weekHeader: "week #"));)) ;
Ако опцията showWeek е вярна, тогава в календара се показва колона с номера на седмици. Заглавието по подразбиране за тази колона е Ned, но може да бъде променено с помощта на опцията weekHeader. В примера е включено показването на колоната за седмицата, чието име е променено на "No. of the week":
Попълване на празни клетки в календара с дати от съседни месеци
По подразбиране календарът показва само дати за текущия месец. Това означава, че може да има празни клетки в календарната мрежа. Можете да активирате попълването на празни клетки с датите от предишния и следващите месеци, като зададете стойността на опцията showOtherMonths на true, както е показано в примера по-долу:
$ (функция () ($ .datepicker.setDefaults ($. datepicker.regional ["ru"]); $ ("# datep"). datepicker ((showOtherMonths: true));));
Резултатът е показан на фигурата по-долу. В този случай датите от други месеци са достъпни, ако опцията selectOtherMonths е зададена на true:
Използване на подлента за допълнителни бутони
Задаването на опцията showButtonBar на true добавя допълнителна лента с бутони в долната част на прозореца на приспособлението Datepicker. В случай на изскачащ календар, панелът съдържа два бутона: Днес и Затваряне. Бутонът "Днес" ви позволява да се върнете към текущата дата, а бутонът "Затвори" се използва за затваряне на прозореца на календара. Текстът, използван за тези бутони, може да бъде променен с помощта на опциите currentText и closeText.
Ако опцията goToCurrent е зададена на true, тогава календарът ще се върне към избраната дата, а не към текущата. Тази възможност е полезна, ако приспособлението Datepicker е конфигурирано със специфична стойност за опцията defaultDate. Ако целта на избора на дата е свързана с минали или бъдещи събития, тогава връщането към текущата дата не винаги е препоръчително. По-долу е даден подходящ пример:
$ (функция () ($ .datepicker.setDefaults ($. datepicker.regional ["ru"]); $ ("# datep"). datepicker ((showButtonPanel: true, currentText: "Go", gotoCurrent: true, defaultDate) : "+ 1m + 1y")). Val ("12/20/2014");));
Имайте предвид, че използването на опцията goToCurrent кара бутонът да бъде натиснат, за да преминете към избраната дата. В този пример избраната дата е стойността на атрибута value на входния елемент, но ако потребителят избере различна дата и след това отвори календара отново, щракването върху бутона ще върне календара на датата, която потребителят е избрал, а не тази, която сте посочили .
Методи на джаджа Datepicker
Методите, поддържани от джаджа Datepicker, са показани в таблицата по-долу:
| Метод | Описание |
|---|---|
| datepicker ("унищожи") | Премахва изцяло функционалността на приспособлението Datepicker от основния елемент |
| datepicker ("деактивиране") | Поставя на пауза приспособлението Datepicker за базов елемент |
| datepicker ("активиране") | Възобновява преди това спряна джаджа Datepicker за основния елемент |
| datepicker ("опция", опции) | Позволява ви да получите или зададете стойностите на една или повече опции за джаджа Datepicker |
| datepicker ("е забранено") | Връща true, ако приспособлението Datepicker е деактивирано |
| datepicker ("скрий") | Скрива изскачащ календар, ако е видим |
| datepicker ("покажи") | Показва изскачащ календар, ако е невидим |
| datepicker ("опресняване") | Актуализира календара, за да отрази промените, направени в основния елемент |
| datepicker ("getDate") | Получава избраната дата в календара |
| datepicker ("setDate", дата) | Задава посочената стойност като избрана календарна дата |
Получаване и промяна на дата програмно
Най-честата употреба на методите getDate и setDate е, когато искам да дам на потребителите възможността да избират цели периоди от време с помощта на множество приспособления на Datepicker. В ситуации като тази предпочитам да не показвам избраните дати в текстовите полета и да показвам само броя дни между посочените крайни дати. По-долу е даден подходящ пример:
Този пример създава два календара, единият от които е деактивиран веднага след зареждане на документа. Събитието onSelect се използва, за да отговори на избора на дати от потребителя (които ще обсъдим по-подробно по-късно).
След като потребителят избере дата в първия календар, ние използваме метода setDate, за да подготвим втория календар, и метода getDate, за да получим датите от двата календара и след това изчисляваме разликата в дните между първата и втората дата (за простота, приемаме, че и двете дати се отнасят за един и същи месец). Изгледът на документа в прозореца на браузъра е показан на фигурата:
Събития на джаджа Datepicker
Подобно на всички приспособления за потребителски интерфейс на jQuery, Datepicker поддържа набор от събития, които да бъдат уведомявани за важни промени в състоянието на приложението. Тези събития са обобщени в таблицата по-долу:
Няма да демонстрирам повторно как работи методът onSelect, тъй като вече е бил използван в няколко примера, включително този, обсъден в предишния раздел. Единственото нещо, на което искам да обърна вниманието ви, е, че аргументите, предавани на манипулатора на събитие, са низовите представяния на избраната дата и екземпляра на Datepicker, който е повдигнал събитието.
Събитието onChangeMonth ви позволява да реагирате на събитие, което се случва, когато потребителят избере различен месец или година, или чрез падащи списъци, активирани чрез използване на опциите changeMonth и changeYear или бутоните за месец.
С помощта на метода onClose е възможно да се реагира, когато изскачащият календар е затворен. Това събитие се задейства дори ако потребителят не е избрал дата в календара. Аргументите на манипулатора на събитие са низовото представяне на датата (или празен низ, ако потребителят е затворил прозореца, без да прави селекция) и екземпляра на Datepicker, който е повдигнал събитието.
20.08.2012 г. Ромчик
Добър ден. Онзи ден се сблъсках с проблем - потребителят във входа трябва да посочи датата в определен формат. Без да си бъркам дълго, реших да направя така, че когато щракнете върху входа, да се появи календар. Това не е трудно за изпълнение, но защо? Ако имате страхотна jQuery джаджа за календар - datepicker. По-нататък ще говорим за инсталиране, конфигуриране и свързване на datepicker.
Като начало ще дам ясен пример за това, което искам да направя:
Е, разбираемо е, че след избиране на дата календарът изчезва, а избраната дата се появява в текстовото поле.
Да се заемем с изпълнението.
Инсталиране и свързване на календар - джаджа Datepicker.
Отидете на официалния уебсайт на jQueryUI. За да не изтегляте нищо излишно - щракнете върху "Премахване на всички компоненти"
И изберете "Core":
Това е основно всичко. Но тази джаджа има предварително дефинирани изгледи (теми)
В горния десен ъгъл можете да изберете подходяща тема, изберете версията на джаджата и щракнете върху „Изтегляне“:
Следващата стъпка е да разопаковате архива.
Нека веднага се споразумеем за структурата на нашата страница:
- Папката css - тук се съхраняват стиловете за страницата
- Js папка – тук се съхранява javascript за страницата
- Index.php файл - файлът на нашата страница
Сега файловете jquery-1.8.0.min.js и jquery-ui-1.8.23.custom.min.js от изтегления архив се поставят в папката js. Сега папката с името на темата за datepicker (в моя случай е ui-lightness) от папката css на изтегления архив се поставя в папката css за нашата страница. Това завършва инсталирането на календарната джаджа на jQuery Datepicker.
Нека да се заемем със свързването на Datepicker. Както казах, искам да извикам календара, като щракна върху текстовото поле. Нека добавим id = ”datepicker” към нашия вход, за да можем лесно да се отнасяме към него.
Сега нека напишем малък jQuery скрипт, който ще извика календара, когато се щракне върху това тестово поле:
Записваме и проверяваме.
Настройване на джаджа за календар с jQuery Datepicker.
Първото нещо да настроим тази тема за нашия календар. По-долу ще дам таблица с името на темата за Datepicker и нейното показване:
| Лекота на потребителския интерфейс | |
| UI тъмнина | |
| Гладкост | |
| Започнете | |
| Редмънд | |
| слънчево | |
| Облачно | |
| Le Frog | |
| Флик | |
| Мелачка за пипер | |
| Патладжан | |
| Тъмен кошер | |
| Купертино | |
| Южна улица | |
| Блицър | |
| Човечеството | |
| Горещи промъквания | |
| Вълнувайте велосипед | |
| Вейдър | |
| Dot Luv | |
| Ментовка | |
| Черен чай | |
| Trontastic | |
| Елегантен портмоне |
Както можете да видите, има достатъчно теми, за да изберете подходяща, но ако по някаква причина не сте намерили такава тема, тогава можете лесно да промените една от стандартните, като промените файла за стил за инструмента за избор на дати.
Това не е краят на настройките на datepicker и при извикване на функцията datepicker можем да предадем допълнителни параметри:
| Параметър | Описание | Пример |
| деактивиране: true (false) По подразбиране: false | Активирайте или деактивирайте datepicker | $ (". Селектор"). Инструмент за избор на дати ((забранено: вярно)); |
| altField По подразбиране: празно | Указва селектора на елементи, който да бъде актуализиран | $ (". Селектор"). Инструмент за избор на дата ((altField: "#actualDate")); |
| altFormat По подразбиране: празно | dateFormat - форматът на датата, който ще се използва за altField | $ (". Селектор"). Инструмент за избор на дата ((altFormat: "yy-mm-dd")); |
| appendTex По подразбиране: празно | Текст, който да се показва след всяко поле за дата | $ (". Селектор"). Инструмент за избор на дати ((appendText: "(гггг-мм-дд)")); |
| autoSize: true (false) По подразбиране: false | Автоматичен размер на елемента | $ (". Селектор"). Datepicker ((autoSize: true)); |
| формат на датата: По подразбиране: mm / dd / yy В таблицата по-долу ще дам какви стойности може да приеме. | Посочва формата на датата | $ (". Селектор"). Инструмент за избор на дата ((dateFormat: "yy-mm-dd")); |
| имена на дни По подразбиране ["Неделя Понеделник Вторник Сряда Четвъртък Петък Събота"] | Пълно име на дните от седмицата | $ (". Selector"). Datepicker ((dayNames: ["понеделник", "вторник", "сряда", "четвъртък", "петък", "събота", "неделя"])); |
| денИменаМин По подразбиране: [„Su“, „Mo“, „Tu“, „We“, „Th“, „Fr“, „Sa“] | Съкратено наименование на дните от седмицата | $ (". Селектор"). Инструмент за избор на дати ((dayNamesMin: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"])); |
| dayNamesShort По подразбиране: ["Слънце", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"] | Съкратено наименование на дните от седмицата | $ (". Селектор"). Инструмент за избор на дати ((dayNamesShort: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"])); |
| defaultDate По подразбиране: празно Използва параметри dateFormat като параметри | Посочва датата по подразбиране | $ (". Селектор"). Инструмент за избор на дати ((Дата по подразбиране: +7)); |
| имена на месеци По подразбиране: ["Януари", "февруари", "март", "април", "май", "юни", "юли", "август", "септември", "октомври", "ноември", "декември"] | Пълно име на месеците | $ (". Селектор"). Инструмент за избор на дати ((имена на месеци: ["януари", "февруари", "март", "април", "май", "юни", "юли", "август", "септември", "Октомври, ноември, декември"] )); |
| nameNamesShort По подразбиране ["Януари", "февруари", "мар", "апр", "май", "юни", "юли", "авг", "септ", "октомври", "ноември", "декември"] | Съкратено наименование на месеците | $ (". Селектор"). Инструмент за избор на дати ((monthNamesShort: ["ян", "февруари", "мар", "апр", "май", "юни", "юл", "авг", "септ", "октомври", "ноември", "декември"])); |
Тук съм дал само основните параметри, които може да са ви полезни. Ако искате да видите пълния списък с параметри, отидете на официалната документация
Сега нека се съсредоточим върху стойностите, които приема параметърът dateFormat
Това е всичко.
Разгледахме инсталирането, свързването и конфигурацията на една от прекрасните jQuery джаджи - календарната джаджа на datepicker.
Надявам се статията да ви е харесала. Ако имате въпроси, моля, пишете в коментарите.
И на това се сбогувам с вас и успешната уеб разработка.
В един от уроците научихме как по различни начини включва jQuery UI библиотека... Днес темата на урока ще бъде джаджа за избор на дата - jQuery UI Datapicker.
Защо е необходима тази джаджа? За да предостави на потребителя календар при въвеждане на дата, при попълване на формуляра той не трябва да мисли в какъв формат да въвежда датите. От своя страна администраторът на ресурса получава данни в същия формат.
На този адрес: https://jqueryui.com/datepicker/ще видите няколко опции за джаджи инструмент за събиране на данни, ще разгледаме само две основни.
jQuery UI Datepicker - Показване на менюта за месец и година
Когато потребителят щракне в полето за въвеждане на текст вход, се появява календар с избор на дата и допълнително меню с избор на месец и година. Опцията с една дата е подходяща за сайтове, където клиентът посочва например датата на посещението си.
HTML-кодът се състои от един таг входс ид "инструмент за събиране на данни"увит в абзац - етикет стр... Вместо параграф това входможе да се постави във всеки блоков елемент на сайта.
Дата:
код jQueryтрябва да копирате (виж източника)и го вградете във вашия сайт, както е в примера. След зареждане DOMдърво, ще получим елемент по идентификатор #datapickerв текстовото поле и извикайте метода .datepicker... Сега трябва да предадете обект на метода, в който можете да опишете допълнителни настройки: changeMonth: true, changeYear: true... Сега е възможно да изберете месец и година през падащия списък, това е малко по-удобно, отколкото да направите подобен избор през календара.
$ (функция () (
$ ("# datepicker"). datepicker ((
changeMonth: вярно,
changeYear: вярно
});
});
jQuery UI Datepicker - Изберете период от време
Widget Datapickerс избор на период от време Период от времеподходящ за сайтове със система за резервации. Потребителят посочва началната дата в първия календар и крайната дата във втория календар. Нека създадем две текстови полета входс идентификатор "от"и "да се"и две етикетобвързани с техните текстови полета.
Вземете елемента с идентификатора #от- първото текстово поле, в него извикваме метода инструмент за събиране на данни.
$ (функция () (
var dateFormat = "mm / dd / yy",
от = $ ("# от")
.datepicker ((
Нека зададем датата по подразбиране плюс една седмица.
Дата по подразбиране: "+ 1 w",
Възможността за промяна на месеца с помощта на падащия списък.
ChangeMonth: вярно,
брой месеци: 3))
Когато събитието се случи На, тоест потребителят избира нещо от падащия списък, след което когато избраната дата се промени, намираме втората инструмент за избор на датии задайте минималната дата, равна на избраната.
Включено ("промяна", функция () (
to.datepicker ("опция", "minDate", getDate (това));
}),
to = $ ("# до").
При промяна на избраната дата намираме първата инструмент за избор на датии задайте максималната дата, равна на избраната.
Включено ("промяна", функция () (
from.datepicker ("опция", "maxDate", getDate (това));
});
Целият код и визуални примери за всички опции с различни параметри на джаджа jQuery Datapicker, е на сайта jqueryui.com.
jQuery UI Datepicker - Локализирайте календара
По подразбиране календарът се показва на английски, но това може да се промени, библиотека jQuery потребителски интерфейсподкрепя многоезичието.
Изтеглете необходимия езиков файл на Github
Свързваме необходимия езиков модул към етикета глава.
Създайте текстово поле за календара и падащ списък с id "locale"със списък на необходимите езици.
Дата:
След зареждане DOMдърво, търси обект инструмент за събиране на данни... Променете настройките за всички инструмент за избор на дати.
$ (функция () (
$ ("# datepicker"). datepicker ($. datepicker.regional ["ru"]);
Промяна на локализацията за "избирач на дати".
$ ("# локал"). on ("промяна", функция () (
Промяна на локализацията при избор на нова стойност в падащия списък.
$ ("# datepicker"). datepicker ("опция",
$ .datepicker.regional [$ (това) .val ()]);
Свържете скрипт, за да зададете бързо датата в полето не е трудно и има достатъчно JS скриптове за това в мрежата. И в тази статия ще публикувам готовия код за WordPress.
Задачата е следната: имаме поле за въвеждане и трябва да се уверим, че когато курсорът се постави в това поле, се появява календар, където можете да изберете дата (ден от месеца) и полето автоматично се попълва с избран номер в необходимия формат. Календарът трябва да е с руска локализация. Подобна задача често се среща и реших, че би било удобно да имам готов код под ръка.
- Страницата за избор на css теми за jQuery UI - http://jqueryui.com/themeroller/ - тук можете да изберете готова jQuery UI тема или в раздела Roll Your Own - персонализирайте темата по подразбиране за себе си: цветове, фонове , заоблени ъгли и др.;
Начална страница на приставката за JQuery Datepicker: https://jqueryui.com/datepicker/ - тук ще намерите различни примери за използване на Datepicker;
Datepicker Code Ready за WordPress
Удобно е да свържете jQuery Datepicker в WordPress, защото той идва с WordPress и трябва само да вмъкнете два реда, за да го свържете: свързване на самия скрипт и свързване на CSS стилове. И тогава просто трябва да стартирате js функцията datepicker () на желаното .
Този код може да бъде вмъкнат навсякъде в php файла, не е задължително преди да се покаже заглавката get_header (), можете директно в тялото на HTML документа - кодът ще работи:
Малък анализ на кода:
Wp_enqueue_script ("jquery-ui-datepicker");
Този ред включва всички необходими скриптове, използващи wp_enqueue_script (), включително самия jQuery. Ако jQuery вече е свързан, той няма да се свърже.
Wp_enqueue_style ("jqueryui", "//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css", false, null);
Този ред включва css стилове, използващи wp_enqueue_style (). Стиловете на потребителския интерфейс на jquery не са включени в пакета WordPress, така че ги включваме отделно (от библиотеката на скриптове от Google). гладкостта в този ред е името на jquery ui темата и може да бъде заменена например с redmond или ui-lightness - пълен списък с теми (за да вмъкнете в ред, в името на темата, трябва да заменете главните букви с малки букви и интервалите с тире).
// add_action ("admin_footer", "init_datepicker", 99); // за администратор add_action ("wp_footer", "init_datepicker", 99); // за предната част
Тези редове свързват функцията init_datepicker () с долния колонтитул на сайта. Функцията извежда скрипт, който стартира инструмента за избор на дати за посочените полета за въвеждане. Кое поле да опитате в инструмента за избор на дати е дефинирано в реда:
$ ("вход, .datepicker"). datepicker ();
Този ред ще стартира инструмента за избор на дата за всички полета за въвеждане в атрибута name с подниз "дата" или ако полето за въвеждане има клас за избор на дата. Тези. всяко от тези полета ще съответства на този код.
