Наша взаимовыгодная связь https://banwar.org/
Не сказати, що дуже часто але періодично нам доводиться стикатися з веб-формами в яких потрібно вказати дату, наприклад свій день народження або бажану дату для покупки квитка в театр. Дуже часто в таких випадках поле «дата» розбито на три складових, три невеликих поля для введення дня, місяця і року. Іноді поле «дата» розбито на три випадають списку, де представляється можливість вибору зі списку дня від 1 до 31, місяця від 1 до 12 і роки. В принципі ці рішення цілком справляються зі своїм завданням, але що робити якщо користувачеві необхідно вказати дати першого понеділка наступного місяця?
В такому випадку, завдання, оптимально може бути вирішена, тільки при додаванні календаря в поле введення дати. І бажано, щоб календар цей був динамічний з можливістю прокрутки днів, місяців і років, як вперед так і назад. Так само бажано мати наявність позначень дня тижня ПН, ВТ, ... ВС, для навігації по календарю, користувачем.
У пошуках готового рішення для цього завдання я натрапив на календар написаний на jQuery, і майже повністю задовольняє моїм вимогам, за винятком підтримки російської мови і формату вводиться їм дати. Таким чином протягом 20 хвилин календар був повністю переведений на російську мову, а формат вводиться їм дати змінений з ММ / ДД / РР на ДД / ММ / РРРР. Втім ви при бажанні зможете без проблем поміняти формат, змінивши всього пару рядків в коді.
Нижче наводжу скріншот календаря. (В бойових діях, календар буде відображений одним помахом в текстове поле)
Приклад демо-коду, HTML сторінки з календарем.
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns = "// www .w3.org /: 1999 / xhtml "> <head> <title> jQuery Календар - rche.ru </ title> <meta http-equiv =" content-type "content =" text / html; charset = utf-8 " /> <link rel = "stylesheet" type = "text / css" href = "cal.css" /> <script language = "JavaScript" type = "text / javascript" src = "// ajax.googleapis.com/ ajax / libs / jquery / 1.7.0 / jquery.min.js "> </ script> <script language =" javascript "type =" text / javascript "src =" // rche.ru/examples/cal.js " > </ script> <script type = "text / javascript"> $ (document) .ready (function () {$ ( '# calendar'). simpleDatepicker (); // Прив'язати виклик календаря до поля з CSS ідентифікатором #calendar }); </ Script> </ head> <body> <input id = "calendar" name = "date" value = "" type = "text" /> </ body> </ html>
Завантажити вихідні ви можете за цим засланні , переглянути демо .
Сподіваюся вам припаде до смаку даний jQuery календар.