Air Datepicker, лесен и красив инструмент за избор на дати
Искам да споделя с вас опита от писането на компонент за избор на дата за текстово поле.
По време на работата по последния проект се наложи добавянето на календар към приложението с възможност за избор на конкретен месец. Всички популярни плъгини дават такава възможност, моят избор беше Zebra Datepicker - малък, функционален, всичко е супер. Но някои неща все още липсваха:
- предаване наDate() обекти на параметри вместо низове
- по-малко тромаво маркиране
- гъвкаво позициониране на елементите
- анимация при пристигане
Що се отнася до тромавото маркиране, към него се добавя и таблично оформление, към клетките на което не можете да добавитеposition: relative; без никакви проблеми.
И накрая, все още искам да мога да добавя малко анимация и поради факта, че много популярни календари използват метода.show(), който използва свойствотоdisplay, плавните преходи (преход) са трудоемки за добавяне.
развитие
Разделих календара на три части:
Когато се появят някакви събития в тялото или навигацията, те съобщават това на основното тяло и календарът актуализира състоянието си в съответствие с тези събития.
Getters и setters ми помогнаха в тази задача. Например, при смяна на месеца, простоприсвоява се нова дата за показване с променения номер на месеца и вътре в getter се извиква методът за преначертаване на тялото и навигация в календара. Въпреки факта, че би било възможно да се направи без тях, този подход ми се струва по-красив. Например, ето как изглежда методът за преминаване към следващия месец, година или десетилетие в зависимост от текущия изглед:
На свой ред, вътре в гетъра се прави извикване за изчертаване на календарни елементи (опростено):
По същия начин се извършва преходът към друг изглед, много просто:
Генериране на маркиране
Основата за календара изглежда така:
Без таблици и намек за тях. Клетката е проста
, което прави възможно добавянето на псевдо елементи към тях и позиционирането на съдържанието вътре в тях, както желаете.
Не виждам много смисъл в разделянето на редове клетки, тъй като това е допълнителен ненужен елемент. Всички дати следват една след друга, те имат относителна ширина, която ви позволява да преминете към друг ред в точното време.
Изчисляване на общия брой дни в месеца
За да генерирате правилен HTML, трябва да знаете колко дни има един месец. За целта се използва малък трик с преминаване на следващия месец и нулевата дата (в Date(), датата на месеца започва с единица).
Образуване на имена на дни
Когато инициализирате календара, можете да зададете деня, в който започва седмицата. Стори ми се интересно да покажа как можете да генерирате маркиране с имената на дните, като използвате рекурсия:
Използване на flexbox
За позициониране в календара използвамflexbox. Позволява ви лесно да центрирате съдържание в клетки, ще бъде центрирано във всички браузъри (които поддържат тази технология) и наразлична ОС, за разлика от техниката за задаване на височина и еднакво разстояние между редовете.
Освен това ви позволява да поставяте елементи на еднакво разстояние един от друг само с един ред:
Няма нужда да се притеснявате за различни ширини, всичко ще бъде изчислено автоматично.
Можете също така да споменете бутоните "Днес" и "Изчистване":
Ако има две от тях, те заемат 50% от цялата ширина, ако има една, тогава тя заема цялата ширина. Това може да се постигне и с един ред:
Това означава, че елементът, ако е необходимо, може както да се увеличава, така и да намалява, но размерите на всички съседи ще бъдат еднакви. Когато има само един бутон, той се разширява до пълна ширина, когато са два, те се свиват пропорционално и заемат 50% всеки и т.н. Можете да добавите колкото искате елементи, всички те ще имат еднакви размери и общо ще заемат цялата ширина на родителя.
В резултат на това получаваме лекотата на позициониране на съдържание, както при използване на таблици, като същевременно поддържаме чистотата и валидността на маркирането.
Позициониране
Позицията на елемент се дава от две стойности:
- страната, от която ще се появи календарът
- позиция от тази страна
За да добавя анимация "подход" към текстовото поле, добавих помощни класове, които казват от коя страна трябва да започне анимацията. В този случай този клас ще изглежда като.-отгоре-.css преходът иcss трансформацията отговарят за анимацията. Това ви позволява да постигнете гладкост, както и да добавите персонализирани преходи.
Относно дата()
Както споменах в началото, не разбирам много ситуациитекогато трябва да подадете низ вместо обект за дата. Може би това е удобно за автоматична инициализация, когато параметрите трябва да бъдат предадени презdata атрибути, но за мен все още е по-удобно просто да предам new Date (). Освен това запис като new Date(2015, 11, 17) не е особено сложен от „2015-12-17“. Следователно във всички параметри, където е зададена датата, трябва да предам нова дата ().
Няколко думи за употребата
Харесвам практиката за автоматично инициализиране на плъгини, така че за да инициализирате календара в текстовото поле, просто добавете класа'datepicker-here' и ще работи.
Опциите могат да се предават чрез атрибути на данни.
Персонализирано съдържание на клетка
Air Datepicker има способността напълно да променя съдържанието на клетките. Това ви позволява да добавяте например имена на събития или някакъв вид помощно съдържание към клетките. За да направите това, използвайте опциятаonRenderCell() :
Заключение
Благодаря за вниманието.
Hardcore conf в C++. Каним само професионалисти.