JQuery კალენდარი (datePicker). JQuery UI API - Datepicker ვიჯეტის კალენდარი jquery ui datepicker

მოგესალმებით ყველას, ძვირფასო ჰაბრის მკითხველებო!

ეს სტატია ეხება jQuery UI-ს და მის თარიღის ამომრჩეველ ვიჯეტს.

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

მაშასადამე, პრაქტიკაში საერთო გამოსავალია ორი შეყვანის ველის შექმნა „დან დამდე“ ტიპის კონტროლით. თქვენ ასევე შეგიძლიათ იპოვოთ მრავალი "ყავარჯენი" გზა ამ პრობლემის გადასაჭრელად - ეს ჩვენ არ ჯდება.

ასე რომ, ჩვენი მიზანია პრობლემის მოგვარება მინიმალური ძალისხმევით მხოლოდ jQuery UI Datepicker-ის გამოყენებით.

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

მათთვის, ვისაც არ აინტერესებს სტანდარტული $.datepicker() ვიჯეტის გამოყენება, მე მოვამზადე რამდენიმე ბმული, იმედი მაქვს, რომ ისინიც გამოგადგებათ:

სტატია ჰაბრეზე (რამდენიმე თარიღის შერჩევა, პერიოდის არჩევა).
- შესანიშნავი DateTimePicker მოდული XDSoft-ისგან (თარიღის პერიოდის შერჩევა, დროის შერჩევა და სხვა სხვადასხვა ფუნქციები), ღირს ნახვა

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

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

გაფართოება საშუალებას გაძლევთ შეცვალოთ თარიღის შერჩევის ქცევა ორ რეჟიმში:

• აირჩიეთ პერიოდი (ორი თარიღი: პერიოდის დასაწყისი და დასასრული)
• აირჩიეთ მრავალი თარიღი (თარიღების მასივი)

ვინაიდან გაფართოების გამოყენება იგეგმება რამდენიმე თარიღის შესარჩევად, გირჩევთ გამოიყენოთ იგი DIV ელემენტზე (არა INPUT) და თარიღების არჩევისას შეავსოთ შესაბამისი მნიშვნელობები შეყვანის ველებში (იხილეთ მაგალითები ბოლოს სტატია ახალი ვიჯეტის მახასიათებლების ახალი $.datepicker პარამეტრები ()

$("#date_range").datepicker(( დიაპაზონი: "პერიოდი", // შესაძლო მნიშვნელობები: პერიოდი, მრავალჯერადი დიაპაზონი_მრავალჯერადი_მაქს: 3, // არჩეული თარიღების მაქსიმალური რაოდენობა "მრავალჯერადი თარიღის" რეჟიმში onSelect: function(dateText, inst , extensionRange ) ( // extensionRange - დამატებულია დაბრუნების არგუმენტი, შეიცავს გაფართოების ობიექტს ) )); // "setDate" მეთოდს ახლა შეუძლია მიიღოს მასივი: 2 ელემენტი range="პერიოდით" ან მეტი ელემენტით range="multiple" // $("#date_range").datepicker("setDate", ["+2d" ", "+1w"]); ( dates var extensionRange = $("#date_range").datepicker ("ვიჯეტი").data("datepickerExtensionRange"); console.log (extensionRange.datesText); // თარიღების მასივი (თარიღი datepicker-ში გამოყენებული ფორმატით) console.log(extensionRange.startDateText); // პერიოდის დაწყება (თარიღი datepicker-ში გამოყენებული ფორმატით) console.log(extensionRange.endDateText); // პერიოდის დასასრული (თარიღი ფორმატში გამოიყენება datepicker-ში) console.log(extensionRange.dates); // თარიღების მასივი (თარიღის ობიექტი) console.log(extensionRange.startDate); // პერიოდის დაწყება (თარიღის ობიექტი) console.log(extensionRange.endDate); // პერიოდის დასასრული (თარიღის ობიექტი)
ახალი სტილები კალენდრის უჯრედებისთვის

Selected() /* შერჩეული თარიღი */ .selected-start() /* პერიოდის პირველი თარიღი */ .selected-end() /* პერიოდის ბოლო თარიღი */ .first-of-month() /* პირველი თვის თარიღი */ .last-of-month() /* თვის ბოლო თარიღი */

ერთ-ერთ გაკვეთილზე ვისწავლეთ როგორ დავაკავშიროთ jQuery UI ბიბლიოთეკა სხვადასხვა გზით. დღეს გაკვეთილის თემა იქნება თარიღის ამომრჩევი ვიჯეტი - jQuery UI Datapicker.

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

ამ მისამართზე: https://jqueryui.com/datepicker/თქვენ ნახავთ datapicker ვიჯეტის რამდენიმე ვარიანტს, ჩვენ მხოლოდ ორ მთავარს განვიხილავთ.

jQuery UI Datepicker - აჩვენეთ თვის და წლის მენიუები

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

HTML კოდი შედგება ერთი შეყვანის ტეგისაგან, რომლის იდენტიფიკატორი "datapicker" არის შეფუთული აბზაცში - p tag. აბზაცის ნაცვლად, ეს შეყვანა შეიძლება განთავსდეს საიტის ნებისმიერ ბლოკ ელემენტში.

თარიღი:

jQuery კოდი უნდა დაკოპირდეს (იხილეთ წყარო) და ჩასვით თქვენს საიტზე, როგორც მაგალითში. DOM ხის ჩატვირთვის შემდეგ, ჩვენ მივიღებთ ელემენტს ID #datapicker-ით ტექსტის ველში და გამოვიძახებთ .datepicker მეთოდს. ახლა თქვენ უნდა გადასცეთ ობიექტი მეთოდს, რომლითაც უნდა აღწეროთ დამატებითი პარამეტრები: changeMonth: true, changeYear: true . ახლა შესაძლებელია თვის და წლის არჩევა ჩამოსაშლელი სიით, ეს ცოტა უფრო მოსახერხებელია, ვიდრე მსგავსი არჩევანის გაკეთება კალენდრის საშუალებით.

$(ფუნქცია() (
$("#datepicker").datepicker((
ცვლილების თვე: მართალია,
ცვლილების წელი: მართალია
});
});

jQuery UI Datepicker - აირჩიეთ თარიღის დიაპაზონი

Datapicker ვიჯეტი თარიღის დიაპაზონის შერჩევით თარიღის დიაპაზონი შესაფერისია დაჯავშნის სისტემის მქონე საიტებისთვის. მომხმარებელი პირველ კალენდარში მიუთითებს დაწყების თარიღს, ხოლო მეორე კალენდარში დასრულების თარიღს. მოდით შევქმნათ ორი შეყვანის ტექსტის ველი იდენტიფიკატორებით "from" და "to" და ორი ლეიბლი მიბმული მათ ტექსტურ ველებთან.

დან

რომ

ვიღებთ ელემენტს იდენტიფიკატორით #from - პირველი ტექსტური ველი და მასში მოვუწოდებთ datapicker მეთოდს.

$(ფუნქცია() (
var dateFormat = "მმ/დდ/წწ",
= $-დან ("#-დან")
.თარიღის არჩევა ((

მოდით დავაყენოთ ნაგულისხმევი თარიღი პლუს ერთი კვირა.

ნაგულისხმევი თარიღი: "+1w",

ჩამოსაშლელი სიის გამოყენებით თვის შეცვლის შესაძლებლობა.

ცვლილების თვე: მართალია,
თვეების რაოდენობა: 3 ))

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

ჩართვა ("ცვლილება", ფუნქცია() (
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#to").datepicker

არჩეული თარიღის შეცვლისას ვპოულობთ პირველ თარიღის ამომრჩეველს და ვაყენებთ მაქსიმალურ თარიღს არჩეულის ტოლი.

ჩართვა ("ცვლილება", ფუნქცია() (
from.datepicker("option", "maxDate", getDate(this));
});

ყველა კოდი და ყველა ვარიანტის ვიზუალური მაგალითი jQuery Datapicker ვიჯეტის სხვადასხვა პარამეტრით განთავსებულია ვებსაიტზე jqueryui.com.

jQuery UI Datepicker - კალენდრის ლოკალიზაცია

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

ჩამოტვირთეთ საჭირო ენის ფაილი Github-ზე

ჩვენ ჩავრთავთ ენის საჭირო მოდულს head tag-ში.

ჩვენ ვქმნით ტექსტურ ველს კალენდრისთვის და ჩამოსაშლელ სიას id "locale"-ით, სადაც მითითებულია საჭირო ენები.

თარიღი:

ინგლისური
რუსული (რუსული)

DOM ხის ჩატვირთვის შემდეგ, მოძებნეთ datapicker ობიექტი. ჩვენ ვცვლით პარამეტრებს ყველა თარიღის ამომრჩეველისთვის.

$(ფუნქცია() (
$("#datepicker").datepicker($.datepicker.regional[ "ru" ]);

ლოკალიზაციის შეცვლა "datepicker"-ისთვის.

$("#locale").on("change", ფუნქცია() (

შეცვალეთ ლოკალიზაცია ჩამოსაშლელ სიაში ახალი მნიშვნელობის არჩევისას.

$("#datepicker").datepicker("ოპცია",
$.datepicker.regional[ $(this).val() ]);

Datepicker ვიჯეტი

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

Datepicker ვიჯეტის შექმნა

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

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

jQuery UI შეყვანა (სიგანე: 200 პიქსელი; ტექსტის გასწორება: მარცხნივ) $(function() ($("#datep").datepicker(); )); Თარიღი:

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

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

Datepicker ვიჯეტის ლოკალიზაცია

როგორც ხედავთ, ნაჩვენები მაგალითში, კალენდარი ნაჩვენებია ინგლისურად. jQuery UI Datepicker ვიჯეტი უზრუნველყოფს საკმაოდ ყოვლისმომცველ მხარდაჭერას თარიღის ფორმატირების სხვადასხვა სტანდარტებზე, რომლებიც გამოიყენება მთელ მსოფლიოში, ლოკალიზაციის 61 ვარიანტის ჩათვლით. მათზე წვდომისთვის, თქვენ უნდა შემოიტანოთ JavaScript-ის დამხმარე სკრიპტი თქვენს დოკუმენტში და უთხრათ Datepicker ვიჯეტს ლოკალიზაციის რომელი ვარიანტის გამოყენება. შესაბამისი მაგალითი მოცემულია ქვემოთ:

... ... $(function() ( $("#datep").datepicker($.datepicker.regional["ru"]); )); ...

jquery-ui-i18n.js ფაილი მდებარეობს jQuery UI ბიბლიოთეკის არქივის ფაილის განვითარების-bundle/ui/i18n საქაღალდეში, რომელიც უნდა გადმოწერილი გქონდეთ jqueryui.com-დან. დააკოპირეთ იგი იმავე საქაღალდეში, სადაც მდებარეობს წყარო ფაილი და დაამატეთ იგი დოკუმენტში, როგორც ნაჩვენებია კოდში. შედეგი ნაჩვენებია ფიგურაში:

ჩაშენებული Datepicker კალენდრის შექმნა

Datepicker ვიჯეტის გამოყენების მეორე გზა მოიცავს მის დოკუმენტში ჩასმას. ამისათვის აირჩიეთ div ან span ელემენტი jQuery-ის გამოყენებით და გამოიძახეთ datepicker() მეთოდი. ჩაშენებული კალენდარი ნაჩვენებია მანამ, სანამ ჩანს HTML ელემენტი, რომელზეც ის დაფუძნებულია. ჩაშენებული კალენდრის შექმნის მაგალითი მოცემულია ქვემოთ:

jQuery UI ლეიბლი (ზღვარი-მარჯვნივ: 12 პიქსელი; ) შეყვანა (სიგანე: 200 პიქსელი; ტექსტის გასწორება: მარცხნივ; ზღვარი მარჯვნივ: 10 პიქსელი) #wrapper > * (float: მარცხენა) $(function() ($("#inline" ).datepicker($.datepicker.regional["ru"] )); Თარიღი:

ეს მაგალითი იყენებს span ელემენტს, როგორც საბაზისო HTML ელემენტს Datepicker ვიჯეტის შესაქმნელად. შედეგი ნაჩვენებია ფიგურაში:

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

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

Datepicker ვიჯეტის დაყენება

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

Ძირითადი პარამეტრები

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

Datepicker ვიჯეტის ძირითადი თვისებები ქონების აღწერა

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

ნაგულისხმევი თარიღის მითითება

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

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

ეს პარამეტრი გამოიყენება მხოლოდ იმ შემთხვევაში, თუ შეყვანის ელემენტში არ არის მნიშვნელობის ატრიბუტი. თუ ეს ატრიბუტი არსებობს (იქნება ის დოკუმენტში თქვენს მიერ თუ არის მომხმარებლის მიერ წინასწარი შერჩევის შედეგი), მაშინ Datepicker ვიჯეტი გამოიყენებს მის მნიშვნელობას.

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

შესაძლო მნიშვნელობები defaultDate ვარიანტისთვის ღირებულების აღწერა

null	გამოიყენება მიმდინარე თარიღი
თარიღის ობიექტი	იყენებს მნიშვნელობას, რომელიც წარმოდგენილია JavaScript Date ობიექტის სახით
+დღეები, -დღეები	იყენებს თარიღს, რომელიც განსხვავდება მიმდინარე თარიღისგან დღეების განსაზღვრული რაოდენობით. ასე რომ, +3 ნიშნავს თარიღს, რომელიც დადგება ამჟამინდელიდან სამი დღის შემდეგ, ხოლო -2 ნიშნავს თარიღს ორი დღის წინ
+1d +7w -1m +1y	გამოიყენება თარიღი, რომელიც იზომება მიმდინარე თარიღიდან და გამოიხატება დღეების (d), კვირების (w), თვეების (m) და წლების (y) რაოდენობის მიხედვით, რომლებიც განსაზღვრავენ, თუ რამდენად არის გადატანილი თარიღი წინ (+) ან უკან (-) დროში. დასაშვებია დადებითი და უარყოფითი მნიშვნელობების ერთ თარიღში შერევა. მაგალითად, მნიშვნელობების კომბინაცია -1d +1m, გამოყენებული 2011 წლის 12 ნოემბრის თარიღთან ერთად, შეესაბამება 2011 წლის 11 დეკემბერს.

defauitDate ოფციის გამოყენების მაგალითი თარიღის დასაზუსტებლად, რომელიც არის ხუთი წლის შემდეგ, მოცემულია ქვემოთ:

$(function() ($.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( defaultDate: "+5y")); ));

დავუშვათ, რომ მიმდინარე თარიღი 2013 წლის დეკემბერია. შემდეგ, როგორც ნაჩვენებია ქვემოთ მოცემულ ფიგურაში, defauitDate ვარიანტის მნიშვნელობით განსაზღვრული თარიღი შეესაბამება 2018 წლის დეკემბერს:

თქვენ შეხვდებით აღწერილ ფორმატს ნათესავი თარიღების მითითებისთვის არაერთხელ. ეს არის ძალიან მოქნილი ფორმატი, რომელიც უზრუნველყოფს საჭირო სიზუსტეს. ისევე, როგორც მაგალითში, შეგიძლიათ გამოტოვოთ ნებისმიერი ინტერვალი, რომლის შეცვლასაც არ აპირებთ. მაგალითად, მნიშვნელობის ნაცვლად "+0d +0w +0m +5y" სავსებით შესაძლებელია გამოვიყენოთ მნიშვნელობა "+5y". ამ ფორმატის სასიამოვნო ის არის, რომ ის საშუალებას გაძლევთ შეურიოთ დადებითი და უარყოფითი მნიშვნელობები სხვადასხვა ინტერვალებით, რაც საშუალებას გაძლევთ ზუსტად განსაზღვროთ სასურველი თარიღი.

მოვლენის განსაზღვრა, რომელიც იწვევს ამომხტარი კალენდრის გახსნას

ShowOn ოფცია საშუალებას გაძლევთ აკონტროლოთ მოვლენა, რომლის საპასუხოდ უნდა გამოჩნდეს ამომხტარი კალენდარი. ამ პარამეტრს შეუძლია მიიღოს სამი მნიშვნელობიდან ერთ-ერთი:

ფოკუსირება

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

ღილაკი

ამომხტარი კალენდარი იხსნება ღილაკზე დაჭერით.

ორივე

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

თუ იყენებთ ღილაკს ან ორივე მნიშვნელობას, Datepicker ვიჯეტი ქმნის ღილაკის ელემენტს და ათავსებს მას დოკუმენტში შეყვანის ელემენტის შემდეგ. ShowOn ოფციის გამოყენების მაგალითი მოცემულია ქვემოთ:

$(function() ($.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "ორივე"); ));

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

Datepicker ვიჯეტის მიერ დამატებული ღილაკი არ არის jQuery UI Button ვიჯეტი. თუ გსურთ, რომ ყველა ღილაკი იყოს იგივე ტიპის, აირჩიეთ ღილაკის ელემენტი და გამოიძახეთ jQuery UI button() მეთოდი.

ღილაკის ელემენტის სტილისტიკა შესაძლებელია ღილაკის Image და buttonText პარამეტრების გამოყენებით. თუ დააყენებთ buttonImage ოფციას სურათის URL-ზე, Datepicker ვიჯეტი განათავსებს ამ სურათს ღილაკზე. გარდა ამისა, ღილაკთან დაკავშირებული ნაგულისხმევი ტექსტი (ელიფსი) შეიძლება შეიცვალოს სხვა ტექსტით buttonText ოფციის გამოყენებით, როგორც ეს ნაჩვენებია ქვემოთ მოცემულ მაგალითში:

$(function() ($.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "ორივე", buttonText: "Select" )); ) );

ღილაკის ImageImage და buttonImageOnly ოფციების ერთად გამოყენებით, თქვენ შეგიძლიათ მთლიანად მოიცილოთ ღილაკი, შეცვალოთ იგი სურათით. შესაბამისი მაგალითი მოცემულია ქვემოთ:

jQuery UI ლეიბლი (ზღვარი-მარჯვნივ:12 პიქსელი) შეყვანა (სიგანე: 200 პიქსელი; ტექსტის გასწორება: მარცხნივ) #dpcontainer * (ვერტიკალური გასწორება: შუა) #dpcontainer img (სიგანე: 35 პიქსელი;) $(function() ($.datepicker .setDefaults($.datepicker.regional["ru"] $("#datep").datepicker(( showOn: "ორივე", buttonImage: "right.png", buttonImageOnly: true )); Თარიღი:

ეს მაგალითი აყენებს სურათს right.png და აყენებს buttonImageOnly ოფციას true. გარდა ამისა, დოკუმენტს დაემატა რამდენიმე CSS სტილი, რათა გააკონტროლონ გამოსახულების განლაგება ლეიბლისა და შეყვანის ელემენტებთან შედარებით. Datepicker ვიჯეტს არ შეუძლია ზუსტად გაარკვიოს, თუ სად უნდა განთავსდეს img ელემენტი, ამიტომ CSS სტილის გამოყენება იყო საჭირო img ელემენტის სწორად განლაგების მიზნით დოკუმენტში. ღილაკის ნაცვლად გამოსახულების გამოყენების შედეგი ნაჩვენებია სურათზე:

თარიღის შერჩევის კონტროლი

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

Datepicker ვიჯეტის თვისებები, რომლებიც აკონტროლებენ თარიღის შერჩევას ქონების აღწერა

ცვლილება თვე	თუ ეს პარამეტრი მართალია, კალენდარი აჩვენებს ჩამოსაშლელ სიას, რომელიც საშუალებას გაძლევთ ნავიგაცია პირდაპირ თვეების მიხედვით. ნაგულისხმევი მნიშვნელობა მცდარია
შეცვლა წელი	თუ ეს პარამეტრი მართალია, კალენდარი აჩვენებს ჩამოსაშლელ სიას, რომელიც საშუალებას გაძლევთ ნავიგაცია პირდაპირ წლის მიხედვით. ნაგულისხმევი მნიშვნელობა მცდარია
constrainInput	თუ ეს პარამეტრი მართალია, Datepicker ვიჯეტი ამოწმებს, რომ შეყვანის ველის შინაარსი ემთხვევა მითითებულ თარიღის ფორმატს. ნაგულისხმევი მნიშვნელობა მართალია
hideIfNoPrevNext	თუ ეს პარამეტრი მართალია, მაშინ ხატები, რომლებიც საშუალებას გაძლევთ კალენდარში წინ და უკან გადაადგილდეთ ნაჩვენები თარიღთან შედარებით, მთლიანად იმალება, ვიდრე უბრალოდ გამორთულია. ნაგულისხმევი მნიშვნელობა მცდარია
maxDate	განსაზღვრავს შერჩევის მაქსიმალურ თარიღს. სტანდარტულად არანაირი შეზღუდვა არ არსებობს
MinDate	განსაზღვრავს შერჩევის მინიმალურ თარიღს. სტანდარტულად არანაირი შეზღუდვა არ არსებობს
თვეების რაოდენობა	განსაზღვრავს თვეების რაოდენობას, რომლებიც ერთდროულად არის ნაჩვენები კალენდარში. ნაგულისხმევი მნიშვნელობა არის 1
showCurrentAtPos	თუ კალენდარი დაყენებულია ერთდროულად რამდენიმე თვის ჩვენებაზე, ეს პარამეტრი განსაზღვრავს პოზიციის ნომერს, რომელშიც უნდა იყოს ნაჩვენები მიმდინარე ან ნაგულისხმევი თვე. ნაგულისხმევი მნიშვნელობა არის 0
ნაბიჯის თვეები	განსაზღვრავს, რამდენი თვის წინ ან უკან უნდა გადავიდეს კალენდარზე ნაჩვენები თარიღი, როდესაც დააჭირეთ წინ ან უკან დროის ღილაკს
წლის დიაპაზონი	განსაზღვრავს წლების დიაპაზონს, რომელიც ხელმისაწვდომია ასარჩევად ჩამოსაშლელ სიაში, რომელიც დამატებულია changeYear ოფციის გამოყენებით. ნაგულისხმევად, ეს სია მოიცავს წინა ათი წლის, მომდევნო ათი წლის და მიმდინარე წელს.

სიმბოლოებისა და თარიღის დიაპაზონის შეზღუდვები

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

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

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

$(function() ($.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( constrainInput: true, minDate: "-3", maxDate: "+ 1"));));

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

როგორც ადრე განხილული defaultDate ვარიანტის შემთხვევაში, minDate და maxDate პარამეტრების მნიშვნელობები შეიძლება იყოს null (გაურკვეველი თარიღი), JavaScript Date ობიექტი, დღეების რაოდენობა და შედარებითი თარიღის სტრიქონი. ამ მაგალითში, რიცხვითი გამოსახულება არჩეულია, რათა მიუთითოს დღეების რაოდენობა მიმდინარე თარიღთან შედარებით.

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

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

MinDate მნიშვნელობა არ უნდა იყოს წარსულში და maxDate მნიშვნელობა მომავალში და არც უნდა იყოს ორივე მნიშვნელობა ერთდროულად. იმისათვის, რომ მომხმარებელმა შეძლოს აირჩიოს თარიღები დიაპაზონიდან, რომელსაც წინ უსწრებს გარკვეული „მოსამზადებელი“ პერიოდი, შეგიძლიათ მომავალში დააყენოთ minDate ოფცია მნიშვნელობაზე, რითაც მომხმარებელს არ შეუძლია აირჩიოს თარიღები ამ პერიოდში, როგორც ეს ნაჩვენებია ქვემოთ მოცემულ მაგალითში. :

$(function() ($.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( minDate: "+4")); ))

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

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

minDate და maxDate ოფციები მუშაობს defaultDate პარამეტრთან ერთად, რაც ნიშნავს, რომ დიაპაზონის დაკავშირება მიმდინარე თარიღთან არჩევითია.

შექმენით კალენდარი, რომელიც აჩვენებს რამდენიმე თვეს ერთდროულად

Datepicker ვიჯეტი საშუალებას გაძლევთ დააყენოთ თვეების რაოდენობა, რომლებიც ერთდროულად უნდა იყოს ნაჩვენები კალენდარში numberOfMonths ოფციის გამოყენებით. ეს შეიძლება გაკეთდეს თვეების საჭირო რაოდენობის ან ორი ელემენტის მასივის მითითებით, რომლებიც განსაზღვრავს ყოველთვიური კალენდარული ბადის ზომებს.

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

$(function() ($.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( numberOfMonths: )); ));

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

ორი ელემენტისგან შემდგარი მასივი უდრის რიცხვითი მნიშვნელობის 3-ს. თუ numberOfMonths ოფციის მნიშვნელობა მითითებულია რიცხვად, მაშინ ვიჯეტი აჩვენებს თვეების შესაბამის რაოდენობას ერთ რიგში.

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

თვეებისა და წლების პირდაპირი წვდომის უზრუნველყოფა

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

რომელიმე ამ პარამეტრის true-ზე დაყენება ჩართავს შესაბამის ჩამოსაშლელ სიას და თქვენ შეგიძლიათ დამოუკიდებლად გააკონტროლოთ ჩართულია თუ არა სიები. ამ პარამეტრების გამოყენების მაგალითი მოცემულია ქვემოთ:

$(function() ($.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( changeMonth: true, changeYear: true, yearRange: "-1:+ 2"));));

ამ სცენარში ორივე ჩამოსაშლელი სია ჩართულია. გარდა ამისა, yearRange ოფცია გამოიყენება წლების დიაპაზონის შესაზღუდად, რომელთა შორისაც მომხმარებელს უფლება აქვს გადავიდეს. საჭირო დიაპაზონი მითითებულია მნიშვნელობის "-1:+2" გამოყენებით, რაც ნიშნავს, რომ კალენდარი მომხმარებელს საშუალებას აძლევს გადაადგილდეს ერთი წლის განმავლობაში უკან და ორი წლის განმავლობაში მიმდინარე წლიდან.

ჩამოსაშლელი სიები და მითითებული წლის დიაპაზონი ნაჩვენებია სურათზე:

წელიწადის დიაპაზონების განსაზღვრისას, შეგიძლიათ გამოიყენოთ yearRange ვარიანტი რეალური წლების დასაზუსტებლად. ასე რომ, ამ მაგალითში შეგიძლიათ მიუთითოთ მნიშვნელობა: "2012:2015".

Datepicker ვიჯეტის გარეგნობის კონტროლი

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

თვისებები, რომლებიც საშუალებას გაძლევთ შეცვალოთ Datepicker ვიჯეტის გარეგნობა, ნაჩვენებია ქვემოთ მოცემულ ცხრილში:

თვისებები, რომლებიც საშუალებას გაძლევთ აკონტროლოთ Datepicker ვიჯეტის გარეგნობა ქონების აღწერა

appendText	განსაზღვრავს მინიშნების ტექსტს, რომელიც შეიცავს დამატებით ინფორმაციას, როგორიცაა თარიღის ფორმატირების განმარტება, რომელიც ჩასმული იქნება დოკუმენტში შეყვანის ელემენტის შემდეგ
closeText	აყენებს ტექსტს კალენდრის დახურვის ღილაკისთვის, რომელიც გამოჩნდება დამხმარე ღილაკების ზოლზე, როდესაც ის ჩართულია. ნაგულისხმევი მნიშვნელობა არის "დახურვა"
მიმდინარე ტექსტი	აყენებს ტექსტს მიმდინარე თვის ღილაკისთვის, რომელიც გამოჩნდება დამხმარე ღილაკების ზოლზე, როდესაც ჩართულია. ნაგულისხმევი მნიშვნელობა არის "დღეს"
ხანგრძლივობა	ადგენს showAnim ოფციით მითითებულ ანიმაციის სიჩქარეს ან ხანგრძლივობას. ნაგულისხმევი მნიშვნელობა ნორმალურია
gotoCurrent	თუ ეს პარამეტრი მართალია, დამხმარე ღილაკების ზოლში ნაპოვნი ღილაკი დღეს, თუ ჩართულია, დაუბრუნდება არჩეულ თარიღს და არა მიმდინარე თარიღს. ნაგულისხმევი მნიშვნელობა მცდარია
აირჩიეთ სხვა თვეები	თუ ეს პარამეტრი მართალია, მაშინ თარიღები, რომლებიც ნაჩვენებია showOtherMonths ოფციის true-ზე დაყენების შედეგად, ხელმისაწვდომი გახდება შერჩევისთვის.
შოუანიმი	განსაზღვრავს ანიმაციის ტიპს, რომელიც გამოიყენება ამომხტარი კალენდრების საჩვენებლად და დასამალად. ნაგულისხმევი მნიშვნელობა მცდარია
showButtonPanel	თუ ეს პარამეტრი მართალია, კალენდარი აჩვენებს დამხმარე პანელს ღილაკებით, რომლებიც მომხმარებელს საშუალებას აძლევს გადავიდეს მიმდინარე თარიღზე და (თუ გამოიყენება ამომხტარი ვიჯეტი) დახუროს კალენდარი. ნაგულისხმევი მნიშვნელობა მცდარია
ჩვენების პარამეტრები	აყენებს showAnim ოფციით მითითებულ ანიმაციის ვარიანტებს
შოუ სხვა თვეები	თუ ეს პარამეტრი მართალია, მაშინ კალენდარული ბადის ცარიელი ველები შეივსება წინა და მომდევნო თვეების თარიღებით. ნაგულისხმევი მნიშვნელობა მცდარია
შოუკვირა	თუ ეს პარამეტრი მართალია, კალენდარი აჩვენებს სვეტს კვირის ნომრებით. ნაგულისხმევი მნიშვნელობა მცდარია
weekHeader	განსაზღვრავს კალენდარული სვეტის სათაურს, კვირის ნომრებით, რომელიც ჩართულია showWeek ოფციით. ნაგულისხმევი მნიშვნელობა არის "Wed"

კვირის ჩვენება

ზოგიერთ აპლიკაციაში მნიშვნელოვანია ვიცოდეთ წელიწადის იმ კვირის რაოდენობა, რომელშიც კონკრეტული თარიღი მოდის. მაგალითად, ეს საჭიროა ბევრ საბუღალტრო პროგრამაში. Datepicker ვიჯეტში თქვენ აკონტროლებთ კვირის ინფორმაციის ჩვენებას showWeek და weekHeader ოფციების გამოყენებით, როგორც ეს ნაჩვენებია ქვემოთ მოცემულ მაგალითში:

$(function() ($.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showWeek: true, weekHeader: "კვირის ნომერი" )); ) ) ;

თუ showWeek ვარიანტი მართალია, კალენდარში გამოჩნდება სვეტი კვირის ნომრებით. ამ სვეტის ნაგულისხმევი სათაური არის "კვირა", მაგრამ მისი შეცვლა შესაძლებელია weekHeader ოფციის გამოყენებით. მაგალითი გვიჩვენებს კვირების სვეტს, რომელსაც ეწოდა "კვირა #":

კალენდრის ცარიელი უჯრედების შევსება მიმდებარე თვეების თარიღებით

ნაგულისხმევად, კალენდარი აჩვენებს მხოლოდ მიმდინარე თვის თარიღებს. ეს ნიშნავს, რომ კალენდრის ბადეში შეიძლება იყოს ცარიელი უჯრედები. თქვენ შეგიძლიათ დაუშვათ ცარიელი უჯრედების შევსება წინა და მომდევნო თვეების თარიღებით, თუ დააყენეთ showOtherMonths ოფცია true, როგორც ეს ნაჩვენებია ქვემოთ მოცემულ მაგალითში:

$(function() ($.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOtherMonths: true )); ));

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

დამატებითი ღილაკებისთვის დამხმარე პანელის გამოყენება

showButtonBar პარამეტრის true-ზე დაყენება იწვევს Datepicker ვიჯეტის ფანჯრის ბოლოში დამატებითი ღილაკების ზოლის დამატებას. ამომხტარი კალენდრის შემთხვევაში, პანელი შეიცავს ორ ღილაკს: "დღეს" და "დახურვა". ღილაკი დღეს გაძლევთ საშუალებას დაუბრუნდეთ მიმდინარე თარიღს, ხოლო დახურვის ღილაკი ხურავს კალენდრის ფანჯარას. ამ ღილაკებისთვის გამოყენებული ტექსტი შეიძლება შეიცვალოს currentText და closeText პარამეტრების გამოყენებით.

თუ goToCurrent ოფცია დაყენებულია true-ზე, კალენდარი დაუბრუნდება არჩეულ თარიღს და არა მიმდინარე თარიღს. ეს საშუალება სასარგებლოა, თუ Datepicker ვიჯეტი კონფიგურირებულია კონკრეტული defaultDate ვარიანტის მნიშვნელობით. თუ თარიღის არჩევის მიზანი დაკავშირებულია წარსულ ან მომავალ მოვლენებთან, მაშინ მიმდინარე თარიღზე დაბრუნება ყოველთვის არ არის მიზანშეწონილი. შესაბამისი მაგალითი მოცემულია ქვემოთ:

$(function() ($.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showButtonPanel: true, currentText: "Go", gotoCurrent: true, defaultDate : "+1m +1y" )).val("20.12.2014" ));

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

Datepicker ვიჯეტის მეთოდები

Datepicker ვიჯეტის მიერ მხარდაჭერილი მეთოდები ჩამოთვლილია ქვემოთ მოცემულ ცხრილში:

Datepicker ვიჯეტის მეთოდები მეთოდის აღწერა

datepicker ("განადგურება")	მთლიანად შლის Datepicker ვიჯეტის ფუნქციას საბაზისო ელემენტიდან
datepicker ("გამორთვა")	აჩერებს Datepicker ვიჯეტს ძირითადი ელემენტისთვის
datepicker ("ჩართვა")	განაახლებს ადრე დაპაუზებულ Datepicker ვიჯეტს ძირითადი ელემენტისთვის
datepicker ("ოფცია", პარამეტრები)	საშუალებას გაძლევთ მიიღოთ ან დააყენოთ Datepicker ვიჯეტის ერთი ან მეტი ვარიანტის მნიშვნელობები
datepicker ("გამორთულია")	ბრუნდება true, თუ Datepicker ვიჯეტი გამორთულია
datepicker ("დამალვა")	მალავს ამომხტარ კალენდარს, თუ ის ჩანს
datepicker ("ჩვენება")	აჩვენებს ამომხტარ კალენდარს, თუ ის უხილავია
datepicker ("განახლება")	განაახლებს კალენდარს, რათა ასახოს ძირითადი ერთეულში განხორციელებული ცვლილებები
datepicker ("getDate")	იღებს კალენდარში არჩეულ თარიღს
datepicker ("setDate", თარიღი)	ადგენს მითითებულ მნიშვნელობას, როგორც არჩეულ კალენდარულ თარიღს

თარიღის მიღება და შეცვლა პროგრამულად

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

jQuery UI ლეიბლი (ზღვარი: 12 პიქსელი) შეყვანა (სიგანე: 200 პიქსელი; ტექსტის გასწორება: მარცხნივ) #wrapper > * (float: მარცხნივ) # შედეგი (ზღვარი: ავტომატური; padding: 10px; სიგანე: 200px; წმინდა: მარცხნივ) $( ფუნქცია() ($("# შედეგი"). დამალვა(); $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#dateStart, #dateEnd").datepicker((minDate: "-7d", maxDate: "+7d", onSelect: ფუნქცია(თარიღი, თარიღი) ( if (datepicker.id == "dateStart") ($("#dateEnd").datepicker("setDate", თარიღი) . datepicker("ჩართვა").datepicker("ოპცია", "minDate", თარიღი) ) if (!$("#dateEnd").datepicker("isDisabled")) ( var startDate = $("#dateStart"). datepicker("getDate" var endDate = $("#dateEnd").datepicker("getDate" var diff = endDate.getDate() - startDate. ;) )).filter("#dateEnd").datepicker("disable" )); დასაწყისი: დასასრული: დღეების რაოდენობა:

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

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

Datepicker ვიჯეტის მოვლენები

jQuery UI-ის ყველა ვიჯეტის მსგავსად, Datepicker-ის ვიჯეტი მხარს უჭერს მოვლენების ერთობლიობას, რომელიც საშუალებას გაძლევთ მიიღოთ შეტყობინება განაცხადის მდგომარეობის მნიშვნელოვანი ცვლილებების შესახებ. ეს მოვლენები ნაჩვენებია ქვემოთ მოცემულ ცხრილში:

მე არ ვაჩვენებ, თუ როგორ მუშაობს onSelect მეთოდი, რადგან ის უკვე გამოყენებულია რამდენიმე მაგალითში, მათ შორის წინა ნაწილში განხილული. ერთადერთი, რაც მინდა აღვნიშნო, არის ის, რომ არგუმენტები, რომლებიც გადაეცემა მოვლენის დამმუშავებელს, არის არჩეული თარიღის სიმებიანი წარმოდგენები და Datepicker ინსტანცია, რომელმაც გამოიწვია მოვლენა.

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

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

აღწერა: ამომხტარი ფანჯრიდან ან ჩართული კალენდრიდან თარიღის შესარჩევად.

ახალი ვერსია: 1.0

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

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

კლავიატურის ურთიერთქმედება

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

• PAGE UP: გადადით წინა თვეში.
• PAGE DOWN: გადადით შემდეგ თვეში.
• CTRL + PAGE UP: გადადით წინა წელს.
• CTRL + PAGE DOWN: გადადით შემდეგ წელს.
• CTRL + HOME: მიმდინარე თვის გადატანა. თუ თარიღის ამომრჩეველი დახურულია, ის ღიაა.
• CTRL + LEFT: გადადით დღეს.
• CTRL + RIGHT: გადადით შემდეგ დღეს.
• CTRL + UP: გადადით წინა კვირაში.
• CTRL + DOWN: გადადით შემდეგ კვირაში.
• ENTER: აირჩიეთ ფოკუსის თარიღი.
• CTRL + END: დახურეთ თარიღის ამომრჩევი და გაასუფთავეთ თარიღი.
• ESCAPE: ონკანის დახურვის თარიღი, ყოველგვარი არჩევანის გარეშე.

სასარგებლო ფუნქციები $ .datepicker.setDefaults (პარამეტრები)

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

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 სკრიპტი, რომელიც გამოიძახებს კალენდარს ამ ტესტის ველზე დაწკაპუნებისას:

$(function())( $("#datepicker").datepicker(); ));

ჩვენ ვინახავთ და ვამოწმებთ.

კალენდრის ვიჯეტის დაყენება jQuery Datepicker-ის გამოყენებით.

პირველი, რაც ჩვენ დავაყენებთ, არის თემა ჩვენი კალენდრისთვის. ქვემოთ მივცემ ცხრილს Datepicker-ის თემის სახელწოდებით და მისი ჩვენებით:

ინტერფეისის სიმსუბუქე
ინტერფეისის სიბნელე
სიგლუვეს
დაწყება
რედმონდი
მზიანი
Მოღრუბლული
ლე ბაყაყი
დარტყმა
წიწაკის საფქვავი
Ბადრიჯანი
Dark Hive
კუპერტინო
სამხრეთის ქუჩა
ბლიცერი
კაცობრიობა
Hot Sneaks
ამაღელვებელი ველოსიპედი
ვეიდერი
Dot Luv
პიტნის ჩოკი
Შავი ჩაი
Trontastic
Swanky ჩანთა

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

Პარამეტრი	აღწერა	მაგალითი
გამორთვა: მართალია (მცდარი) ნაგულისხმევი: ყალბი	თარიღის არჩევის ჩართვა ან გამორთვა	$(„სელექტორი“).datepicker(( გამორთულია: true ));
altField ნაგულისხმევი: ცარიელი	განსაზღვრავს ელემენტის ამომრჩეველს, რომელიც განახლდება	$(“selector”).datepicker(( altField: “#actualDate” ));
altFormat ნაგულისხმევი: ცარიელი	dateFormat - თარიღის ფორმატი, რომელიც გამოიყენება altField-ისთვის	$(“selector”).datepicker(( altFormat: “yy-mm-dd” ));
appendTex ნაგულისხმევი: ცარიელი	ტექსტი, რომელიც უნდა იყოს ნაჩვენები ყოველი თარიღის ველის შემდეგ	$(“selector”).datepicker(( appendText: “(yyyy-mm-dd)” ));
ავტომატური ზომა: true (false) ნაგულისხმევი: ყალბი	ავტომატური ზომის ელემენტი	$(“selector”).datepicker(( autoSize: true ));
თარიღის ფორმატი: ნაგულისხმევი: მმ/დდ/წთ ქვემოთ მოცემულ ცხრილში მე გაჩვენებთ რა მნიშვნელობები შეიძლება მიიღოს.	განსაზღვრავს თარიღის ფორმატს	$(“selector”).datepicker(( dateFormat: “yy-mm-dd” ));
დღის სახელები ნაგულისხმევი ["Კვირა ორშაბათი სამშაბათი ოთხშაბათი ხუთშაბათი პარასკევი შაბათი"]	კვირის დღეების სრული სახელები	$(„selector“).datepicker(( dayNames: [„ორშაბათი“, „სამშაბათი“, „ოთხშაბათი“, „ხუთშაბათი“, „პარასკევი“, „შაბათი“, „კვირა“] ));
დღის სახელებიმინ ნაგულისხმევი: ["სუ", "მო", "ტუ", "ჩვენ", "თ", "ფრ", "სა"]	კვირის დღეების აბრევიატურა	$(„selector“).datepicker(( dayNamesMin: [“ორშაბათი”,”სამ”,”ოთხ”,”ხუთ”,”პარასკევი”,”შაბათი”,”მზე”] ));
დღის სახელები მოკლე ნაგულისხმევი: ["მზე", "ორშაბათი", "სამ", "ოთხ", "ხუთ", "პარკი", "შაბათი"]	კვირის დღეების შემოკლებული სახელები	$(“selector”).datepicker(( dayNamesShort: [“ორშაბათი”, “სამშაბათი”, “ოთხ”, “ხუთ”, “პარ”, “შაბათი”, “მზე”] ));
ნაგულისხმევი თარიღი ნაგულისხმევი: ცარიელი პარამეტრებად იყენებს dateFormat პარამეტრებს	განსაზღვრავს ნაგულისხმევ თარიღს	$(“selector”).datepicker(( defaultDate: +7 ));
თვის სახელები ნაგულისხმევი: ["იანვარი", "თებერვალი", "მარტი", "აპრილი", "მაისი", "ივნისი", "ივლისი", "აგვისტო", "სექტემბერი", "ოქტომბერი", "ნოემბერი", "დეკემბერი"]	თვეების სრული სახელები	$(“selector”).datepicker(( თვის სახელები: ["იანვარი", "თებერვალი", "მარტი", "აპრილი", "მაისი", "ივნისი", "ივლისი", "აგვისტო", "სექტემბერი", "ოქტომბერი, ნოემბერი, დეკემბერი"] ));
თვის სახელები მოკლე ნაგულისხმევი ["იანვარი", "თებერვალი", "მარ", "აპრი", "მაისი", "ივნისი", "ივლის", "აგვისტო", "სექტემბერი", "ოქტომბერი", "ნოე", "დეკ"]	თვეების შემოკლებული სახელწოდება	$(“selector”).datepicker(( monthNamesShort: [“იანვარი”, “თებერვალი”, “მარტი”, “აპრილი”, “მაისი”, “ივნისი”, “ივლისი”, “აგვისტო”, “სექტემბერი”, "ოქტომბერი", "ნოე", "დეკ"] ));

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

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