12 თვის კალენდარი html css. HTML კალენდარი. PHP კალენდარი ერთი წლის განმავლობაში

რომ არ ვთქვა ძალიან ხშირად, მაგრამ დროდადრო გვიწევს საქმე ვებ ფორმებთან, რომლებშიც უნდა მივუთითოთ თარიღი, მაგალითად, ჩვენი დაბადების დღე ან თეატრის ბილეთის შეძენის სასურველი თარიღი. ძალიან ხშირად ასეთ შემთხვევებში "თარიღი" ველი იყოფა სამ კომპონენტად, სამ პატარა ველად დღის, თვის და წლის შესაყვანად. ზოგჯერ „თარიღის“ ველი იყოფა სამ ჩამოსაშლელ სიად, სადაც შეგიძლიათ აირჩიოთ დღეების სიიდან 1-დან 31-მდე, თვეები 1-დან 12-მდე და წლები. პრინციპში, ეს გადაწყვეტილებები საკმაოდ კარგად ართმევს თავს დავალებას, მაგრამ რა მოხდება, თუ მომხმარებელს დასჭირდება შემდეგი თვის პირველი ორშაბათის თარიღების დაზუსტება?

ამ შემთხვევაში პრობლემის ოპტიმალურად გადაჭრა შესაძლებელია მხოლოდ თარიღის შეყვანის ველში კალენდრის დამატებით. და სასურველია, რომ ეს კალენდარი იყოს დინამიური დღეების, თვეების და წლების გადახვევის შესაძლებლობით, როგორც წინ, ისე უკან. ასევე სასურველია იყოს კვირის დღის აღნიშვნები: ორშაბათი, სამშაბათი, ... მზე, მომხმარებლის მიერ კალენდარში ნავიგაციისთვის.

ამ ამოცანის მზა გადაწყვეტის მოსაძებნად, მე წავაწყდი jQuery-ში დაწერილ კალენდარს და ის თითქმის სრულად აკმაყოფილებს ჩემს მოთხოვნებს, გარდა რუსული ენის მხარდაჭერისა და მის მიერ შეყვანილი თარიღის ფორმატისა. ამრიგად, 20 წუთში კალენდარი მთლიანად ითარგმნა რუსულ ენაზე და შეყვანილი თარიღის ფორმატი შეიცვალა MM/DD/YY-დან DD/MM/YYYY-ზე. თუმცა, თუ გსურთ, შეგიძლიათ მარტივად შეცვალოთ ფორმატი კოდის მხოლოდ რამდენიმე სტრიქონის შეცვლით.

ქვემოთ მოცემულია კალენდრის ეკრანის სურათი. (ბრძოლაში კალენდარი გამოჩნდება ტექსტის ველზე დაწკაპუნებით)

მაგალითი დემო კოდი, HTML გვერდი კალენდრით.

კოდის ნახვა HTML

jQuery Calendar - ვებგვერდი $(დოკუმენტი).ready(function())( $("#calendar").simpleDatepicker(); // კალენდრის ზარის მიბმა ველთან CSS იდენტიფიკატორით #calendar ));

ამის გამოყენებით შეგიძლიათ ჩამოტვირთოთ წყაროები

კალენდრის დიზაინი

ჩვენს JavaScript კურსებში ჩვენ ზოგჯერ ვეხებით HTML კალენდრის შექმნის თემას. კალენდრის ჩარჩოს დაპროგრამება საკმაოდ სწრაფია, მაგრამ არ მინდა დავკარგო დრო მის დიზაინზე CSS სტილებით, ამიტომ გადაწყდა, რომ ეს სტილები წინასწარ დამეწერა ცალკე ბლოგ პოსტში შემდგომი სწრაფი გამოყენებისთვის. მოდით გვქონდეს კალენდარი 2084 წლის ივლისისთვის, HTML-ში (fiddle). ჩვენ განვიხილავთ კავშირს JavaScript-სა და კალენდარს შორის ერთ-ერთ ჩვენს მომავალ პოსტში, ჩვენ უბრალოდ აღვნიშნავთ, რომ პრაქტიკაში, ვერავინ შეძლებს ხელით შეავსოს ასეთი კალენდარი (თვიანი სახელი HTML წარწერაში; ელემენტი, კვირის დღეები თ-ში, თვის დღეები თდ) პროგრამირების გარეშე.

კალენდრის HTML და CSS სტილები

დავამატოთ თვის დღეების შეღებვის წესები (ფონით:წრფივი-გრადიენტული(...) თვისება), შაბათ-კვირის და თვის მიმდინარე დღის კლასები. იმისათვის, რომ ნახოთ, თუ როგორ მუშაობს .holyday და .today კლასები, თქვენ უნდა ჩაწეროთ მათი მნიშვნელობები ცხრილის შესაბამის უჯრებში. თუ ჩვენ ვსაუბრობთ მხოლოდ შაბათ-კვირა შაბათ-კვირას, მაშინ შეგიძლიათ გაკვეთილების გარეშე გაატაროთ nth-child(...) სელექტორები.

კალენდარი (საზღვარი: 1px მყარი #bbb; ჩვენება: inline-block ) .calendar ცხრილი (ცარიელი უჯრედები: დამალვა; ) .calendar წარწერა (შევსება: 3px; ფონი: ხაზოვანი გრადიენტი (ქვემოთ, #ddd 10%, #bbb .calendar td( padding: 2px 6px; text-align: center; border: 1px solid #cccc; background: linear-gradient (ქვემოდან,#fff 10%, #ddd); საზღვრები-რადიუსი:0 0 3px ) .calendar td:hover( border:1px solid #888; ) .calendar .holiday( background: linear-gradient(ქვემოდან,#fff 10%, #ffc); .calendar .today(font-weight:600; border : 1px მყარი #888 )

კვირის დღეების აღნიშვნები ("ორშაბათი", "სამშაბათი", "ოთხ", "ხუთ", "პარასკევი", "შაბათი", "მზე"), თვეები ("იანვარი", "თებერვალი", "მარტი", "აპრილი", "მაისი", "ივნისი", "ივლისი", "აგვისტო", "სექტემბერი", "ოქტომბერი", "ნოემბერი", "დეკემბერი") შეგიძლიათ იხილოთ jQuery Datepicker ვიჯეტის ლოკალიზაციის საიტზე (https:/ /github.com/ jquery/jquery-ui/blob/master/ui/i18n/datepicker-ru.js), ე.ი. მზა კალენდარი JavaScript-ის და jQuery და jQuery UI ბიბლიოთეკების გამოყენებით (დაწვრილებით

ამ მაგალითში ჩვენი ყურადღება გამახვილდება კალენდრის კომპონენტის შექმნაზე HTML5 და CSS3-ით და მოგვიანებით დავამატებთ ინტერაქტიულობას Javascript-ის გამოყენებით.

კალენდრები საჭირო იქნება ვებსაიტებზე, იქნება ეს მხოლოდ ინფორმაციისთვის თუ როდის არის საჭირო თარიღის შეყვანა. მომხმარებელი ყოველთვის მზადაა ნახოს სასიამოვნო ნივთები.

ჩვენ შეგვიძლია შევქმნათ კალენდრები HTML5-ით და შევქმნათ მათი სტილი CSS3-ით, მაგრამ ეს უბრალოდ სტატიკურია. სავარაუდოდ, მოგინდებათ, რომ ის ინტერაქტიული გახადოთ.

ეს ჩართულია javascript-ის (ან მისი ბიბლიოთეკების) მიერ, რომელიც დაგეხმარებათ საგნების ანიმაციაში და ხედების სწრაფად და მარტივად შეცვლაში. მაგრამ დავიწყოთ html და css-ით.

1. წინაპირობები

ახსნილი შედეგების მისაღწევად საჭიროა შემდეგი დაყენება.

1.1 ძირითადი დაყენება

განაგრძეთ და შექმენით ახალი html ფაილი თქვენი პროექტის საქაღალდეში მისი ძირითადი სინტაქსით:

კალენდრის კომპონენტი

1.2 მიიღეთ Bootstrap

Bootstrap არის ინოვაციური და ადვილად გამოსაყენებელი CSS ჩარჩო, რომელსაც ჩვენ გამოვიყენებთ ძირითადად მისი ბადეზე დაფუძნებული სტრუქტურისთვის.

იმისათვის, რომ გამოიყენოთ იგი, უბრალოდ დააკავშირეთ css და js ფაილები head განყოფილებაში მათი ოფიციალური ბმულებიდან, როგორიცაა ქვემოთ:

კალენდრის კომპონენტი

2. კალენდრის შექმნა

ქვემოთ შეგიძლიათ იხილოთ ეტაპობრივი კალენდრის შექმნა. ჩვენ შევქმნით კალენდარს ჯერ html-ში და შემდეგ დავამატებთ css-ს.

2.1 HTML

html განყოფილება მოიცავს შემდეგ ძირითად სტრუქტურას:

1. შეფუთვა - ეს ტეგი ჩაახვევს ყველა ელემენტს კალენდრის შიგნით

2. სათაური - ის შეიცავს თვის სათაურს და მარცხენა და მარჯვენა ნავიგაციის ხატებს

3. კალენდარი-სხეული – შეიცავს სამუშაო დღეების რიგს და თარიღის რიგებს.

4. მიმდინარე-თარიღი - ეს იქნება კალენდრის ბოლოში განყოფილება, რომელიც აჩვენებს რეალურ თარიღს.

სამუშაო დღეებისთვის დაგვჭირდება 1 მწკრივი და თარიღის რიგებისთვის 5 მწკრივი. სტრუქტურა ასე გამოიყურება:

ბრაუზერში ჯერ არაფერი ჩანს. ახლა, როდესაც ჩვენ შევქმენით რიგები, მოდით დავამატოთ შემდეგი კომპონენტები:

1. ნავიგაციის ხატები – არის კლასი ჩატვირთვის შესახებ ამ ხატულებისთვის: glyphicon glyphicon-chevron-left/right

2. დაამატეთ თვე, რომელსაც კალენდარი აჩვენებს სათაურის განყოფილებაში, რომელიც შეფუთულია p ტეგის შიგნით

3. დაყავით რიგები 7 სვეტად bootstrap-ის კლასით: col-xs-1 და დაამატეთ სამუშაო დღეები p ტეგებში

4. გამოიყენეთ იგივე col-xs-1 თარიღებისთვის, მაგრამ გადაიტანეთ აბზაცი წამყვან ტეგებში, მათზე უნდა დააწკაპუნოთ

ზემოთ დამატებული კოდით, ჩვენი html ახლა ასე გამოიყურება:

2015 წლის იანვარი

ორშაბათს, 26 იანვარს

კარგად, ახლა ჩვენ მივიღეთ ხედი ბრაუზერში:

არ ინერვიულოთ, რომ ნავიგაციის მარჯვენა ხატულა შორს წავა, ჩვენ ამას გამოვასწორებთ css-ით. ასევე გაითვალისწინეთ, რომ ზოგიერთ თარიღს დავამატე არააქტიური კლასი.

ეს იმიტომ, რომ ეს თარიღები არ არის მიმდინარე თვიდან და უნდა იყოს ოდნავ განსხვავებული სტილი (ანუ უფრო ღია ფერი, ვიდრე დანარჩენი).

2.2 CSS

აქ მოდის სახალისო ნაწილი, სტილი არის ის, რაც ელემენტებს აძლევს ფორმას და საერთო იერს. დავიწყოთ ამ უნივერსალური ატრიბუტებით:

Body ( font-family: "Montserrat"; /* უბრალოდ cutsom font */ ) a:-webkit-any-link( text-decoration:none !მნიშვნელოვანი; /* ხაზგასმით არ მოაყოლოთ ბმულები */ ფერი: შავი; !მნიშვნელოვანია ; /* მიეცით ბმულებს ნაგულისხმევი ფერი */ )

იმისათვის, რომ ნავიკონები აჩვენონ მარჯვნივ, დაამატეთ pull-left და pull-right სხვა კლასების შემდეგ:

ახლა მიეცით ძირითადი სტრუქტურის ელემენტებს სტილის რამდენიმე ატრიბუტი:

შეფუთვა ( ზღვარი: 10 ემ; /* მხოლოდ ტემპერატურული ზღვარი */ საზღვარი: 0.1 ემ მყარი #cccc; /* კალენდრის გადატანა ყუთში */ სიგანე: 20 ემ; /* განსაზღვრეთ ველის სიგანე */ სიმაღლე: 24 ემ; /* სიმაღლის განსაზღვრა ყუთისთვის */ box-shadow: 0.1em 0.2em 0.8em #cccc /* box shadow უკეთესი ხედვისთვის */ .header ( სიმაღლე: 4em; /* განსაზღვრეთ სიმაღლე სათაურისთვის */ ფონი; -color: #3f51b5 /* მიეცით სათაურს ფონის ფერი */ ფერი: მიეცით სათაურს ტექსტის ფერი */ text-align: /* ცენტრალიზებული ტექსტი სათაურში */ .col-xs-1 ( სიგანე: 2.5em; /* მიეცით თითოეულ სვეტს ფიქსირებული სიგანე */ margin-left: 0.2em; /* აქვს გარკვეული სივრცე სვეტებს შორის */ text-align: ცენტრში; /* ტექსტის გასწორება ცენტრი */)

ჩვენი კალენდრის ხედი გახდა:

სტილი - ნაწილი 1

კარგი, შემდეგ დაამატეთ ატრიბუტები ცალკეულ ელემენტებს კალენდრის შიგნით მათი იერსახის გასაუმჯობესებლად: .header p ( padding-top: 1.2em; /* ვერტიკალური ცენტრირება */ text-transform: upper; /* all caps text */ ) .header span ( padding: 1.3em; /* ვერტიკალური და ჰორიზონტალური ცენტრირების ხატები */ ) .არააქტიური ( /* არააქტიური თარიღები იღებენ ტექსტის ღია ნაცრისფერ ფერს */ ფერი: #cccc; ) .კვირის დღეები ( padding: 1em; /* სამუშაო დღეების მინიჭება სივრცეში დაახლოებით */ ) .თარიღები ( შიგთავსი: 0.2em 1em 0.2em 1em; /* თარიღების მინიჭება გარკვეული ინტერვალით */ ) .ხაზი ( /* ნაცრისფერი ხაზის გამყოფი */ სიმაღლე: 0.1em; საზღვარი: 0.1em მყარი #EEEEEE; ) .current-date ( /* სტილის მიმდინარე თარიღის განყოფილება */ text-transform: დიდი; ტექსტის გასწორება: ცენტრში; padding: 0.7em; ) .calendar-body .row .col-xs-1 p:hover ( ფერი: #4778a6 /* ჰოვერ მდგომარეობა ყველა თარიღზე */ )

ჩვენ საბოლოოდ გვაქვს საკმაოდ სტილისტური და ზომიერად გარეგნობის კალენდარი. Შეხედე:

როგორც ეს მარტივია, როგორც ჩანს დავასრულეთ. ამ მაგალითის დასრულებამდე ვნახოთ წინასწარ შედგენილი კალენდარი http://demos.telerik.com/-დან, სადაც კალენდარს აქვს სრული ინტერაქტიულობა ჩართული jQuery ბიბლიოთეკის მიერ.

3. ინტერაქტიულობა? დიახ, jQuery-ით!

ამ განყოფილებაში ვაპირებ გაცნობოთ, რომ კალენდრები შეიძლება და უნდა იყოს სრულად ინტერაქტიული თარიღის/თვე/წლის არჩევისას.

ქვემოთ მოყვანილი მაგალითი მხოლოდ დემონსტრირებისთვისაა, ეს არის შაბლონი ინტერნეტში, რომელსაც აქვს ინტერაქტიული ქცევა.

html ( font-size: 12px; font-family: Arial, Helvetica, sans-serif; ) Kendo UI მაგალითი WCG $(document).ready(function() ( // შექმნა კალენდარი div HTML ელემენტიდან $("#calendar ").kendoCalendar(); ));

ყველაფერი იქ არის, html, css და js ჩათვლით, მაგრამ css და js დაკავშირებულია ინტერნეტიდან.

მაგალითი, რომლის კოდიც ზემოთ არის, ასე გამოიყურება:

ინტერაქტიული კალენდარი - jQuery

4. დასკვნა

მიუხედავად იმისა, რომ კალენდრების მარტივად შექმნა და სტილიზაცია შესაძლებელია html და css-ში, რაც შეეხება ინტერაქტიულობას, თქვენ დაგჭირდებათ javascript-ში კოდირების უფრო პროფესიონალური დონე, თუ გსურთ ამის გაკეთება ნულიდან სრულად მორგებული.

თუმცა მოგერიდებათ მოამზადოთ jQuery კოდი, რომ ცოტათი გააცოცხლოთ საგნები, ხოლო თქვენ შეგიძლიათ გქონდეთ საკუთარი html და css.

გაითვალისწინეთ, რომ შეიძლება ასევე დაგჭირდეთ თქვენს ელემენტებში ატრიბუტების, როგორიცაა მნიშვნელობა ან სახელის დაყენება, როდესაც განიხილავთ დამხმარე კალენდარს, სადაც ინფორმაცია იგზავნება და სადმე უნდა გაიგზავნოს.

ბოლო განახლება: 04/08/2016

HTML5-ში თარიღებთან და დროებთან მუშაობისთვის შეყვანის ელემენტების რამდენიმე ტიპი არსებობს:

datetime-local: ადგენს თარიღს და დროს

თარიღი: ადგენს თარიღს

თვე: ადგენს მიმდინარე თვესა და წელს

დრო: ადგენს დროს

კვირა: ადგენს მიმდინარე კვირას

მაგალითად, ჩვენ ვიყენებთ ველს თარიღის დასაყენებლად:

HTML5 შეყვანის ფორმა

სახელი:

Დაბადების თარიღი:

გაგზავნა

და როდესაც აკრიფებთ თარიღის ველს, გაიხსნება კალენდარი:

თუმცა, აქვე უნდა აღინიშნოს, რომ ამ ელემენტის ეფექტი დამოკიდებულია ბრაუზერზე. ამ შემთხვევაში, Google Chrome გამოიყენება. ოპერის უახლეს ვერსიებში ელემენტი დიდად არ განსხვავდება. მაგრამ Microsoft Edge-ში ელემენტი ასე გამოიყურება:

სხვა ელემენტების გამოყენება:

HTML5 შეყვანის ფორმა

Კვირა:

Თარიღი და დრო:

თვე:

დრო:

გაგზავნა

ამ ელემენტების გამოყენებისას ასევე უნდა გაითვალისწინოთ, რომ Firefox მხარს უჭერს მხოლოდ თარიღის და დროის ელემენტებს დანარჩენისთვის, იქმნება რეგულარული ტექსტური ველები. და IE11 საერთოდ არ უჭერს მხარს ამ ელემენტებს.

დღეს წარმოგიდგენთ დანამატების არჩევანს, რომელიც საშუალებას გაძლევთ მარტივად შექმნათ კალენდრები თარიღის შერჩევით, რომელთა უმეტესობა შემუშავებულია jQuery-სა და jQuery UI-ში (მომხმარებლის ინტერფეისი).

თითქმის ყველა ეს კალენდარი არის სრულფასოვანი პლატფორმა კარგი ფუნქციონირებით, მაგრამ ზოგიერთს სჭირდება გაუმჯობესება და დასრულება, მაგრამ ზოგჯერ ეს არის პლუსიც, რადგან უმეტეს შემთხვევაში თქვენ, ასე თუ ისე, გჭირდებათ გარეგნობის მორგება. საიტის დიზაინი.

ეს სტატია არის იმის შესახებ, თუ როგორ შეგიძლიათ შექმნათ iPhone აპლიკაციის სტილის კალენდარი.

DatePicker საშუალებას აძლევს მომხმარებლებს აირჩიონ მიმდინარე თარიღი ჩამოსაშლელი მენიუდან. თქვენ არ გჭირდებათ ფიქრი თარიღის ფორმატებზე, რადგან ისინი ყოველთვის სწორია შერჩევის ფორმის გამო.

Calendar არის Javascript კლასი, რომელიც საშუალებას გაძლევთ დაამატოთ ხელმისაწვდომი და შეუმჩნეველი თარიღის ამომრჩევი. ეს კლასი არის რამდენიმე ელემენტის შეკრება, რომლებსაც ხშირად იყენებენ ვებ დეველოპერები და უკვე მთლიანად გადაკეთებულია MooTools გუნდის მიერ. ჩვენ შევეცადეთ შეგვეტანა ყველა საჭირო თვისება, მაგრამ ზომა შეძლებისდაგვარად მცირე შევინარჩუნოთ. კლასის შესამოწმებლად, გადახედეთ ქვემოთ მოცემულ ბმულებს.

მოდული არის jQuery კალენდარული ვიჯეტი, რომელსაც აქვს თვის ჩვენების შესაძლებლობა. თქვენ შეგიძლიათ აირჩიოთ რომელი თვის ჩვენება გსურთ და ნაგულისხმევად ის აჩვენებს მიმდინარე თვეს. მოდული შესანიშნავად ასრულებს თავის ფუნქციას, მიუხედავად იმისა, რომ იგი შედგება ჯავასკრიპტის კოდის მხოლოდ 100 ხაზისგან.

კალენდრის კომპონენტი, რომლის შეცვლა და გარეგნობის შეცვლა ძალიან ადვილია.

Თვისებები:

* შექმენით თვეების ნებისმიერი რაოდენობა ცალკე კალენდარში
* შაბათ-კვირის და არდადეგების ჩვენების შესაძლებლობა
* დაწყების და დასრულების თარიღები
* შეცვალეთ გარეგნობა CSS-ის გამოყენებით
* გვერდზე რამდენიმე კალენდრის ერთდროულად დაყენების შესაძლებლობა
* ოპტიმიზაცია უკეთესი შესრულებისთვის

ეს მოქნილი და მარტივი pop-up კალენდარი შექმნილია ყველა ბრაუზერში მუშაობისთვის. თქვენ შეგიძლიათ მთლიანად შეცვალოთ და შეცვალოთ იგი ენებთან, თარიღებთან და ფერებთან დაკავშირებით. ამომხტარი ფანჯარა აჩვენებს თვეს რამდენიმე წლის განმავლობაში.

თქვენ ასევე შეგიძლიათ სურვილისამებრ შეიყვანოთ თარიღი და თქვენთვის სასურველი თვე გამოჩნდება. წელი შეიძლება გამოისახოს ორციფრიან ან ოთხნიშნა ფორმატში, ხოლო თვე შეიძლება გამოსახული იყოს ციფრებით ან სახელით. თქვენ ასევე შეგიძლიათ აჩვენოთ ნებისმიერი თარიღი ან დღე Javascript-ის გამოყენებით.

ეს ვიჯეტი შესანიშნავია სერვერის მხარის ტექნოლოგიების გაერთიანებისთვის პროფესიონალური აპლიკაციის შემდგომი განვითარებისთვის.

თქვენ შეგიძლიათ მარტივად მოაწყოთ DatePicker კომპონენტი თქვენს ვებ აპლიკაციაში.

Თვისებები:

* გვერდზე სხვა ელემენტებთან ერთად ჩვენების შესაძლებლობა
* მრავალი კალენდარი ერთ კომპონენტში
* კონკრეტული თარიღების ხაზგასმის უნარი
* გარეგნობის შეცვლის შესაძლებლობა CSS-ის გამოყენებით
* დღეების და თვეების სახელების ლოკალიზაციის შესაძლებლობა
* კვირის საკუთარი საწყისი დღის დაყენების შესაძლებლობა
* ბრაუზერის ფანჯარაში ინტეგრაციის შესაძლებლობა

კალენდარული სისტემა მარტივი კალენდარია.

Tigra Calendar არის ჯავასკრიპტის ჯვარედინი ბრაუზერის ელემენტი, რომელიც იძლევა HTML ფორმების საშუალებით ჩამოსაშლელი მენიუებიდან თარიღების არჩევის შესაძლებლობას.

One Plans აპს შეეძლება მრავალი კალენდრის მხარდაჭერა. ასევე შესაძლებელია ინფორმაციის ჩვენება სხვადასხვა კალენდარში ერთმანეთთან. თითოეული კალენდარი იმართება ცალკე (უნიკალური პაროლი, ცალკე პარამეტრები, განსხვავებული გარეგნობა).

მრავალი კალენდარი, რომელიც მუშაობს ერთი Plans აპლიკაციაში, შეიძლება გამოყენებულ იქნას სხვადასხვა ვებსაიტებზე. აპლიკაცია იყენებს ძალიან მოქნილ განმეორებადი მოვლენის მოდელს.

აპლიკაცია მხარს უჭერს მრავალ ენას. შეგიძლიათ ხელით დააყენოთ კვირის დაწყების დღე. თარიღების ჩვენება შესაძლებელია შემოკლების ფორმატში (მმ/დდ/წთ, დდ/მმ/წწ და ა.შ.). აპლიკაციას შეუძლია გამოიყენოს მონაცემები ცალკეული ფაილებიდან ან მონაცემთა ბაზიდან.

jQuery UI Datepicker არის უაღრესად კონფიგურირებადი დანამატი, რომელიც საშუალებას გაძლევთ დაამატოთ თარიღის ამომრჩევი ფორმები თქვენს ვებ გვერდებზე. თქვენ ასევე შეგიძლიათ დაარედაქტიროთ მოდულის გარეგნობა და ენა, მიუთითოთ კონკრეტული დროის პერიოდები და მარტივად დაამატოთ დამატებითი სანავიგაციო ღილაკები.

ნაგულისხმევად, კალენდარი ნაჩვენებია მცირე გადაფარვის სახით ონფოკუსის საშუალებით და ავტომატურად იხურება ჩაბნელების ეფექტით, ან თარიღის უკვე შერჩევის შემდეგ. თქვენ შეგიძლიათ მარტივად ჩართოთ კალენდარი თქვენს ვებ გვერდზე div ან span-ის გამოყენებით.

თქვენ შეგიძლიათ მართოთ თქვენი კალენდარი ცხელი კლავიშების გამოყენებით:

* გვერდი ზევით/ქვევით – წინა/შემდეგი თვე
* ctrl+page up/down – – წინა/შემდეგი წელი
* ctrl+home – მიმდინარე თვე ან გახსენით კალენდარი, თუ ის დახურულია
* ctrl+მარცხნივ/მარჯვნივ – – წინა/შემდეგი დღე
* ctrl+up/down – – წინა/შემდეგი კვირა
* enter – დაადასტურეთ არჩეული თარიღი
* ctrl+end – დახურვა თარიღის შენახვის გარეშე
* გაქცევა - უბრალოდ დახურეთ კალენდარი

ეს ელემენტი საშუალებას გაძლევთ აირჩიოთ თარიღი მარტივი სლაიდერის პანელის გამოყენებით. სლაიდერის გადაადგილებით ვადების გასწვრივ, შეგიძლიათ დაუყოვნებლივ შეცვალოთ თარიღი. უფრო მეტიც, როდესაც მომხმარებელს სურს სხვა თარიღების ჩვენება, სლაიდერები ავტომატურად უბრუნდებიან თავდაპირველ პოზიციებს.

FullCalendar არის jQuery მოდული, რომელიც საშუალებას გაძლევთ შექმნათ სრულმასშტაბიანი კალენდრები, გადაათრიეთ და ჩამოაგდეთ. მოდული იყენებს AJAX-ს და შეგიძლიათ მარტივად დააფორმატოთ ის სასურველ ფორმატში (ასევე არის სპეციალური დანამატი Google Calendar-ისთვის).

მოდული იძლევა შესაძლებლობას აირჩიოთ და გადაიტანოთ მოვლენები თარიღის მიხედვით.

* სრული კონტროლი კლავიატურის საშუალებით
* მხარდაჭერა სხვადასხვა დისპლეის ფორმატებისა და გამყოფებისთვის
* შეუმჩნეველი
* css-ის გამოყენებით დიზაინის შესაძლებლობა
* კვირის კონკრეტული დღეების ჩვენების შესაძლებლობა
* მოქნილი ლოკალიზაციის ვარიანტი
* კვირის გარკვეული დღეების ხაზგასმის უნარი
* უფასო განაწილება (CC სალიცენზიო ხელშეკრულებით)

Თვისებები:

* მუშაობს ერთი ან მეტი ტექსტის შეყვანის ელემენტთან შეყვანის ტიპი = "ტექსტი"
* გარკვეული თარიღების ხაზგასმის უნარი
* ავტომატურად იხურება თარიღის არჩევის შემდეგ (ისევე როგორც დღევანდელი თარიღის ან დახურვის ღილაკების დაჭერისას)
* სწრაფი გადასვლების შესაძლებლობა "არჩევის" ველის გამოყენებით
* ავტომატურად მალავს ღილაკებს, თუ სხვაგან გადახვევა არ არის
და ასევე ბევრად მეტი...

ეს კომპონენტი არის მარტივი თარიღის ამომრჩევი ფორმა და კალენდარი.

Თვისებები:

* ენების დამატების უნარი
* მიმდინარე თარიღის შეცვლის შესაძლებლობა
* მაუსის ბორბლით გადახვევის შესაძლებლობა
* ღილაკების არსებობა

Timeframe არის გამოცდილი უფასო კომპონენტი, რომელიც მუშაობს Github-ზე. შესაძლებელია თარიღის მითითება „დან“ და „მდე“.

Date/Time Picker არის მარტივი თარიღის ან დროის ამომრჩევი კომპონენტი. კალენდრის გასახსნელად, უბრალოდ დააჭირეთ შეყვანის ველის მარჯვენა მხარეს არსებულ ხატულას.

თარიღის ამომრჩევის მარტივი კომპონენტის კიდევ ერთი მაგალითი. კალენდარს აქვს სამი საჭირო პოზიცია: , და .

დანამატი აქცევს jQuery UI თარიღის ამომრჩეველს ინტერაქტიულ კომპონენტად, რომელიც შექმნილია სპეციალურად თარიღების დიაპაზონის შესარჩევად. ეს არის განახლება.

|

jMonthCalendar არის სრულფასოვანი კალენდარი ღონისძიების მხარდაჭერით. თქვენ უბრალოდ შეგიძლიათ დააყენოთ პარამეტრები და მოვლენები, და ის გააკეთებს დანარჩენს თქვენთვის. დანამატს აქვს მოდიფიკაციის შესაძლებლობა, რაც დეველოპერს საშუალებას მისცემს ურთიერთქმედდეს კალენდართან, როდის აჩვენოს თვეების ცვლილება და ასევე შეცვალოს მოვლენა შეტყობინებების ფანჯარაზე დაწკაპუნებისას. jMonthCalendar ახლა ასევე მხარს უჭერს hover-ის მოვლენებს, ასევე alert(); სტანდარტის მიხედვით, თითოეულ მოვლენას აქვს URL, რომელიც მიდის გვერდზე დეტალური ინფორმაციით.

VCalendar (ვირტუალური ვებ კალენდარი) არის უფასო ვებ კალენდარული აპლიკაცია, რომ შექმნათ და მართოთ მოვლენები ონლაინ, კალენდარული ფორმით, რა თქმა უნდა. ეს შესანიშნავი და უფასო გადაწყვეტა შეიძლება გამოყენებულ იქნას ვებ საზოგადოებებისთვის და ნებისმიერი კომერციული თუ არაკომერციული ორგანიზაციისთვის. სხვა ონლაინ კალენდრებისგან განსხვავებით, VCalendar განაწილებულია წყაროს კოდით სხვადასხვა პროგრამირების ენაზე: PHP, ASP და ASP.NET (C#). ეს კეთდება მომავალში ახალი ტექნოლოგიების დამატების მიზნით.