JQuery хуанли (datePicker). JQuery UI API - Datepicker Widget Calendar jquery ui datepicker
Сайн байцгаана уу, эрхэм Хабр уншигчид!
Энэ нийтлэл нь jQuery UI болон түүний огноо сонгогч виджетийн тухай юм.
Хуудас дээр огноог (заримдаа бүр хэд хэдэн тусдаа огноог) сонгох шаардлагатай болдог. Гэхдээ jQuery UI-ийн Datepicker нь танд нэг хуанли дотор зөвхөн нэг огноо сонгох боломжийг олгодог.
Тиймээс практикт нийтлэг шийдэл бол "хоос болон" төрлийг хянах хоёр оролтын талбар үүсгэх явдал юм. Та мөн энэ асуудлыг шийдэх олон "таяг" арга замыг олох боломжтой - энэ нь бидэнд тохирохгүй байна.
Тиймээс бидний зорилго бол зөвхөн jQuery UI Datepicker ашиглан асуудлыг хамгийн бага хүчин чармайлтаар шийдвэрлэх явдал юм.
Энэ асуудлыг шийдэхийн тулд jQuery UI Datepicker-д зориулсан жижиг өргөтгөл байдаг бөгөөд энэ нь гуравдагч талын виджет, залгаасууд болон хэв маягийг холбохгүйгээр стандарт боломжоо нэмэгдүүлдэг.
Стандарт $.datepicker() виджетийг ашиглах сонирхолгүй хүмүүст зориулж би хэд хэдэн линк бэлдсэн байгаа бөгөөд танд хэрэгтэй гэж найдаж байна.
Хабрегийн тухай нийтлэл (хэд хэдэн огноо сонгох, хугацаа сонгох).
- XDSoft-ийн маш сайн DateTimePicker залгаас (огнооны сонголт, цаг сонгох болон бусад олон функцууд), үзэх нь зүйтэй.
Өөр шийдлүүд байгаа ч би тэдгээрийн талаар ярихгүй. Хэрэв танд огноо сонгох дуртай хуанли байгаа бол нийтлэлийн тайлбараас тэдний тухай уншихад таатай байх болно.
Өргөтгөлийн тайлбар Өргөтгөл нь $.datepicker() виджетийн боломжуудыг объектын загвар ашиглан өргөтгөдөг файл юм. Өгөгдмөл горимд Datepicker-ийн үйл ажиллагаанд нөлөөлөхгүй. Тиймээс та өөрийн (аль хэдийн бичигдсэн) код зогсох эсвэл өөрөөр ажиллах талаар санаа зовох хэрэггүй болно.Өргөтгөл нь огноог сонгох горимыг хоёр горимоор өөрчлөх боломжийг танд олгоно.
- Хугацаа сонгоно уу (хоёр огноо: хугацааны эхлэл ба төгсгөл)
- Олон огноог сонгох (огнооны массив)
$("#date_range").datepicker(( range: "period", // боломжит утгууд: үе, олон муж_олон_макс: 3, // "Олон огноо" горимд сонгогдсон огнооны дээд тоо onSelect: function(dateText, inst) , extensionRange ) ( // extensionRange - буцах аргумент нэмсэн, өргөтгөлийн объект агуулсан ) )); // "setDate" арга нь одоо массивыг хүлээн авах боломжтой: range="period"-тай 2 элемент эсвэл муж="олон"-тай олон элемент // $("#date_range").datepicker("setDate", ["+2d) ", "+1w"]); // маягтын талбаруудын (эсвэл скрипт дэх хувьсагчдын) утгыг өөрчлөхийн тулд "onSelect" үйл явдлыг ашиглахыг зөвлөж байна // Гэхдээ илүү уян хатан удирдлагатай байхын тулд өргөтгөлийн объект авч, сонгосон зүйлийн талаарх мэдээлэлтэй ажиллах боломжтой. 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-star() /* хугацааны эхний огноо */ .selected-end() /* хугацааны сүүлийн огноо */ .сарын эхний() /* эхний сарын огноо */ .сарын сүүлийн огноо() /* сарын сүүлийн огноо */
Нэг хичээлээр бид jQuery UI номын санг янз бүрийн аргаар хэрхэн холбох талаар сурсан. Өнөөдөр хичээлийн сэдэв нь огноо сонгогч виджет болох jQuery UI Datapicker байх болно.
Энэ виджет яагаад хэрэгтэй вэ? Хэрэглэгчийг огноо оруулахдаа хуанлигаар хангахын тулд маягтыг бөглөхдөө огноог ямар форматаар оруулах талаар бодох шаардлагагүй болно. Хариуд нь нөөцийн администратор өгөгдлийг ижил форматаар хүлээн авдаг.
Энэ хаягаар: https://jqueryui.com/datepicker/Та өгөгдөл сонгогчийн виджетийн хэд хэдэн сонголтыг харах болно, бид зөвхөн хоёр үндсэн сонголтыг авч үзэх болно.
jQuery UI Datepicker - Сар, жилийн цэсийг харуулахХэрэглэгч оруулах текст талбар дээр дарахад огнооны сонголт бүхий хуанли болон сар, жилийн сонголт бүхий нэмэлт цэс гарч ирнэ. Нэг огноотой сонголт нь үйлчлүүлэгч, жишээлбэл, зочилсон огноог зааж өгсөн сайтуудад тохиромжтой.
HTML код нь догол мөрөнд ороосон "datapicker" танигч бүхий нэг оролтын шошгооос бүрдэнэ - p таг. Догол мөрийн оронд энэ оруулгыг сайтын аль ч блок элементэд байрлуулж болно.
Огноо:
Жишээн дээрх шиг jQuery кодыг хуулж (эх сурвалжийг харах) болон таны сайт руу буулгах ёстой. DOM модыг ачаалсны дараа бид текст талбарт ID #datapicker элементийг хүлээн авч .datepicker аргыг дуудах болно. Одоо та нэмэлт тохиргоог тайлбарлах арга руу объектыг дамжуулах хэрэгтэй: changeMonth: true, changeYear: true . Одоо унадаг жагсаалтаар сар, жилээ сонгох боломжтой болсон, энэ нь хуанлигаар ижил төстэй сонголт хийхээс арай илүү тохиромжтой.
$(функц()(
$("#огноо сонгогч").огноо сонгогч((
өөрчлөлт сар: үнэн,
Он солих: үнэн
});
});
Огнооны муж сонгох Огнооны муж бүхий Datapicker виджет нь захиалгын системтэй сайтуудад тохиромжтой. Хэрэглэгч эхний хуанли дээр эхлэх огноо, хоёр дахь хуанли дээр дуусах огноог зааж өгдөг. "from" болон "to" танигчтай, тэдгээрийн текст талбарт холбогдсон хоёр шошго бүхий хоёр оруулах текст талбар үүсгэцгээе.
-аас
руу
Бид эхний текстийн талбараас #from таних тэмдэг бүхий элементийг авч, доторх дата сонгох аргыг дууддаг.
$(функц()(
var dateFormat = "мм/dd/yy",
-аас = $("#from")
.огноо сонгогч((
Өгөгдмөл огноог нэг долоо хоног нэмье.
Өгөгдмөл огноо: "+1w",
Унждаг жагсаалтыг ашиглан сарыг өөрчлөх чадвар.
Өөрчлөлтийн сар: үнэн,
Сарын тоо: 3 ))
Асаах үйл явдал тохиолдоход, өөрөөр хэлбэл хэрэглэгч унадаг жагсаалтаас ямар нэг зүйлийг сонгох бөгөөд дараа нь сонгосон огноо өөрчлөгдөхөд бид хоёр дахь огноо сонгогчийг олж, хамгийн бага огноог сонгосон огноотой тэнцүү болгоно.
асаалттай("өөрчлөх", функц() (
to.datepicker("сонголт", "minDate", getDate(энэ));
}),
to = $("#to").datepicker
Сонгосон огноог өөрчлөхдөө бид эхний огноо сонгогчийг олж, сонгосон огноотой тэнцүү дээд хугацааг тогтооно.
асаалттай("өөрчлөх", функц() (
from.datepicker("сонголт", "maxDate", getDate(энэ));
});
jQuery Datapicker виджетийн өөр өөр параметр бүхий бүх сонголтуудын бүх код болон визуал жишээг вэб сайт дээр байна. jqueryui.com.
jQuery UI Datepicker - Календарийг нутагшуулахАнхдагч байдлаар, хуанли англи хэл дээр харагдана, гэхдээ үүнийг өөрчлөх боломжтой jQuery UI номын сан нь олон хэлийг дэмждэг.
Github дээр шаардлагатай хэлний файлыг татаж аваарай
Бид шаардлагатай хэлний модулийг толгой шошгонд оруулдаг.
Бид хуанлийн текст талбар болон шаардлагатай хэлүүдийг жагсаасан "орон нутгийн" id бүхий унждаг жагсаалт үүсгэдэг.
Огноо:
Англи
Орос (Орос)
DOM модыг ачаалсны дараа өгөгдөл сонгогч объектыг хайж олоорой. Бид бүх огноо сонгогчийн тохиргоог өөрчилдөг.
$(функц()(
$("#datepicker").datepicker($.datepicker.regional[ "ru" ]);
"Огноо сонгогч"-ын нутагшуулалтын өөрчлөлт .
$("#locale").on("өөрчлөх", функц() (
Унждаг жагсаалтаас шинэ утгыг сонгохдоо локалчлалыг өөрчил.
$("#datepicker").datepicker("сонголт",
$.datepicker.regional[ $(энэ).val() ]);
Огноо сонгогч виджет
Энэ нийтлэл нь огноог оруулахад хялбар болгодог интерактив хуанли болох Datepicker виджетийн тухай юм. Хэрэглэгчдээс хуанлийн мэдээллийг текст хэлбэрээр хүлээн авах нь үргэлж бэрхшээлтэй байдаг, учир нь огноог илэрхийлэх олон янзын формат байдаг. Datepicker виджет нь огноог сонгож, тогтмол байдлаар харуулахад хялбар болгож, улмаар алдаа гарах магадлалыг бууруулдаг.
Огноо сонгогч виджет үүсгэхDatepicker виджет үүсгэх хоёр үндсэн арга бий. Үүнийг оролтын элементэд хавсаргах хамгийн түгээмэл арга бол datepicker() аргыг ашиглах явдал юм. Энэ нь элементийн гадаад төрхийг нэн даруй өөрчлөхгүй, харин элемент нь оролтын фокусыг хүлээн авмагц (түүн дээр товших эсвэл товчлуурыг ашиглан бусад элементүүдээс түүн рүү шилжих замаар) түүний хажууд хуанли гарч ирэх бөгөөд та үүнийг ашиглаж болно. хүссэн огноогоо сонгоно уу.
Тодорхойлсон төрлийн хуанли гэж нэрлэдэг гарч ирэх хуанли. Ийм хуанли үүсгэх жишээг доор үзүүлэв.
jQuery UI оролт (өргөн: 200px; текстийг зэрэгцүүлэх: зүүн) $(функц() ( $("#datep").datepicker(); )); Огноо:
Та фокусыг оролтын талбар руу шилжүүлэхэд юу болохыг зураг харуулж байна:
Хэрэглэгч огноог гараар оруулах эсвэл хуанли ашиглан сонгох боломжтой. Оролтын элемент фокусаа алдах эсвэл хэрэглэгч (эсвэл) товчлуурыг дарахад хуанли алга болно.
Datepicker виджетийг нутагшуулахТаны харж байгаагаар, үзүүлсэн жишээн дээр хуанли англи хэл дээр харагдаж байна. jQuery UI Datepicker виджет нь 61 нутагшуулах сонголтуудыг багтаасан дэлхий даяар хэрэглэгддэг огнооны форматын янз бүрийн стандартуудад нэлээд иж бүрэн дэмжлэг үзүүлдэг. Тэдгээрт хандахын тулд та өөрийн баримт бичигт нэг JavaScript туслах скрипт импортлох хэрэгтэй бөгөөд Datepicker виджетэд аль нутагшуулах сонголтыг ашиглахыг хэлэх хэрэгтэй. Холбогдох жишээг доор өгөв.
... ... $(function() ( $("#datep").datepicker($.datepicker.regional["ru"]); )); ...
jquery-ui-i18n.js файл нь jQuery UI номын сангийн архивын файлын develop-bundle/ui/i18n хавтсанд байгаа бөгөөд та jqueryui.com-оос татаж авсан байх ёстой. Үүнийг эх файл байгаа хавтас руу хуулж, кодонд үзүүлсэн шиг баримт бичигт нэмнэ үү. Үр дүнг зурагт үзүүлэв:
Datepicker виджетийг ашиглах хоёр дахь арга нь үүнийг баримт бичигт оруулах явдал юм. Үүнийг хийхийн тулд jQuery ашиглан div эсвэл span элементийг сонгоод datepicker() аргыг дуудна уу. Суурилуулсан хуанли нь түүний суурилсан HTML элемент нь харагдахуйц л харагдана. Суурилуулсан хуанли үүсгэх жишээг доор үзүүлэв.
jQuery UI шошго (баруун захын: 12px; ) оролт (өргөн: 200px; текстийг зэрэгцүүлэх: зүүн; баруун захын: 10px) #wrapper > * (хөвөгч: зүүн) $(function() ( $("#inline" ).datepicker($.datepicker.regional["ru"] )); Огноо:
Энэ жишээнд Datepicker виджет үүсгэхийн тулд span элементийг үндсэн HTML элемент болгон ашигладаг. Үр дүнг зурагт үзүүлэв:
Хэрэв та попап объектуудтай ажиллахыг хүсэхгүй байвал суурилагдсан календарь хэрэг болно. Мэдээжийн хэрэг, он сар өдөртэй ажиллах нь маш эрчимтэй байдаг тул үргэлж хуанлитай байх нь утга учиртай програмууд байдаг. Гэхдээ ихэнх тохиолдолд хуанли хэрэгтэй болтол нь нуух нь утгагүй юм.
Суулгасан Datepicker виджетийг нуух, харуулахад хүндрэлтэй тал нь үүнийг баримт бичигт нэмэхийн тулд хуудасны байршлыг өөрчлөх шаардлагатай бөгөөд энэ нь үзүүлэнгийн асуудал үүсгэж болзошгүй юм. Миний бодлоор ихэнх тохиолдолд попап виджетийг ашиглах нь илүү тохиромжтой байдаг.
Datepicker виджетийг тохируулж байнаХэрэв та өмнө нь огнооны боловсруулалт хийж байсан бол энэ ангиллын өгөгдөлтэй ажиллах нь хичнээн хэцүү болохыг та сайн мэднэ. Энэ нарийн төвөгтэй байдлын тусгал нь Datepicker виджетээр дэмжигдсэн олон төрлийн шинж чанарууд юм. Дараах хэсгүүд нь энэ виджетийг тохируулсан холбогдох шинж чанаруудын бүлгүүдийн тайлбарт зориулагдсан болно.
Үндсэн тохиргооПопап болон суулгагдсан хуанлийн үндсэн шинж чанарыг тохируулахын тулд хэд хэдэн тохиргооны сонголтыг ашигладаг. Эдгээр шинж чанарууд нь виджетийг баримт бичигт хэрхэн нэгтгэхийг хянах боломжийг олгодог тул маш чухал юм. Тэдний жагсаалтыг дараах хүснэгтэд үзүүлэв.
| alt талбар | Хуанли дахь огноог сонгоход шинэчлэгдэх нэмэлт талбарыг зааж өгөх боломжийг танд олгоно |
| товчлуур Зөвхөн дүрс | Календарийг нээх хоёрдогч товчлуурын оронд buttonImage сонголтоор заасан зургийг ашиглахыг зааж өгнө. |
| товчлуурын дүрс | Попап календарийн хоёрдогч товчлуурыг нээхэд ашигласан зургийн URL-г тодорхойлно. Анхдагч байдлаар ашиглагдахгүй |
| товчлуур Текст | Гарч ирэх календарийн нээлттэй товчлуур дээр харагдах текстийг тодорхойлно. Өгөгдмөл текст нь эллипс (...) |
| анхдагч огноо | Хуанли нээхэд онцлох огноог тохируулах боломжийг танд олгоно |
| тахир дутуу болсон | Энэ виджетийг эхлээд идэвхгүй болгох эсэхийг заана. Өгөгдмөл утга худал байна |
| showOn | Попап календарийг нээх үйлдлийг тодорхойлно. Анхдагч утга нь фокус юм |
Хамгийн энгийн тохиргоо нь бас хамгийн ашигтай байдаг. Өгөгдмөл огнооны сонголтыг ашиглан хуанли нээх үед автоматаар тодрох огноог зааж өгч болно.
Хэрэв defaultDate сонголтыг тохируулаагүй бол оронд нь одоогийн огноог ашиглана. (Мэдээжийн хэрэг, энэ нь хэрэглэгчийн систем дээр тогтоосон огноог хэлнэ. Цагийн бүс, зуны цаг эсвэл буруу тохируулга зэрэг нь хэрэглэгчдэд харуулсан огноо нь таны төсөөлж буй огноо биш болоход хүргэдэг. )
Энэ сонголтыг зөвхөн оролтын элементэд утгын шинж чанар байхгүй тохиолдолд л ашиглана. Хэрэв энэ шинж чанар байгаа бол (энэ нь таны баримт бичигт орсон эсвэл хэрэглэгчийн урьдчилан сонгосны үр дүн юм уу) байгаа бол Datepicker виджет түүний утгыг ашиглана.
Хэрэв та календарийг өөр эхлэх огноогоор нээхийг хүсвэл доорх хүснэгтэд тайлбарласан аргуудын аль нэгийг ашиглан тохируулж болно.
| null | Одоогийн огноог ашиглаж байна |
| Огнооны объект | JavaScript Date объект хэлбэрээр илэрхийлэгдсэн утгыг ашигладаг |
| +өдөр, -өдөр | Заасан өдрийн тоогоор одоогийн огнооноос ялгаатай огноог ашигладаг. Тэгэхээр +3 гэдэг нь одоогийнхоос гурав хоногийн дараа болох огноо, -2 гэдэг нь хоёр өдрийн өмнөх огноо гэсэн үг |
| +1д +7w -1мин +1ж | Огноог одоогийн огнооноос хэмжиж, огноог хэр зэрэг урагшлуулахыг тодорхойлдог өдрүүд (d), долоо хоног (w), сар (м) болон жил (y) -ээр илэрхийлсэн огноог ашигладаг (+) эсвэл цаг хугацааны хувьд ухрах (-). Нэг огноонд эерэг ба сөрөг утгыг холихыг зөвшөөрнө. Жишээлбэл, 2011 оны 11-р сарын 12-ны өдөртэй хамт ашигласан -1d +1m утгуудын хослол нь 2011 оны 12-р сарын 11-тэй тохирч байна. |
Таван жилийн дараах огноог тодорхойлохын тулд defaultDate сонголтыг ашиглах жишээг доор үзүүлэв.
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( defaultDate: "+5y" )); ));
Одоогийн огноог 2013 оны арванхоёрдугаар сар гэж бодъё. Дараа нь доорх зурагт үзүүлснээр defaultDate сонголтын утгаар тодорхойлсон огноо нь 2018 оны 12-р сартай тохирч байна.
Та харьцангуй огноог зааж өгсөн форматтай нэгээс олон удаа таарах болно. Энэ нь шаардлагатай нарийвчлалыг хангадаг маш уян хатан формат юм. Жишээн дээрхтэй адилаар та өөрчлөхийг хүсээгүй интервалыг орхиж болно. Жишээлбэл, "+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() аргыг дуудна уу.
Товчлуурын элементийг buttonImage болон buttonText сонголтуудыг ашиглан загварчилж болно. Хэрэв та зургийн URL дээр buttonImage сонголтыг тохируулбал Datepicker виджет тухайн зургийг товчлуур дээр байрлуулах болно. Нэмж дурдахад, товчлууртай холбоотой өгөгдмөл текстийг (зууван цэг) товчлуурын текстийг ашиглан өөр текстээр сольж болно, доорх жишээнд үзүүлсэн шиг:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "хоёулаа", buttonText: "Select" )); ) );
buttonImage болон buttonImageOnly сонголтуудыг хамтад нь ашигласнаар та товчлуурыг зургаар орлуулж, бүрмөсөн салж болно. Холбогдох жишээг доор өгөв.
jQuery UI шошго (баруун захын: 12px) оролт (өргөн: 200px; текстийг зэрэгцүүлэх: зүүн) #dpcontainer * (босоо зэрэгцүүлэх: дунд) #dpcontainer img (өргөн: 35px;) $(function() ( $.datepicker .setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "both", buttonImage: "right.png", buttonImageOnly: true )); Огноо:
Энэ жишээ нь зургийг right.png болгож, buttonImageOnly сонголтыг үнэн болгож тохируулна. Нэмж дурдахад шошго болон оролтын элементүүдтэй харьцуулахад зургийн байршлыг хянахын тулд хэд хэдэн CSS хэв маягийг баримт бичигт нэмсэн. Datepicker виджет нь img элементийг яг хаана байрлуулахаа тодорхойлж чадахгүй байгаа тул img элементийг баримт бичигт зөв байрлуулахын тулд CSS хэв маягийг ашиглах шаардлагатай болсон. Товчлуурын оронд зураг ашиглах үр дүнг зурагт үзүүлэв.
Datepicker виджетийн зорилго нь хэрэглэгчдэд огноо сонгох боломжийг олгох боловч ихэнх тохиолдолд энэ үйл явцад зарим хязгаарлалт тавих шаардлагатай болдог. Доорх хүснэгтэд хэрэглэгчийг зөвхөн хүчинтэй огноог сонгоход хүргэдэг хязгаарлалтуудыг тохируулах боломжийг танд олгоно.
| өөрчлөх сар | Хэрэв энэ сонголт үнэн бол хуанли нь сараар шууд шилжих боломжийг олгодог унадаг жагсаалтыг харуулдаг. Өгөгдмөл утга худал байна |
| өөрчлөлт жил | Хэрэв энэ сонголт үнэн бол хуанли нь жилээр нь шууд чиглүүлэх боломжийг олгодог унадаг жагсаалтыг харуулдаг. Өгөгдмөл утга худал байна |
| хязгаарлалтын оролт | Хэрэв энэ сонголт үнэн бол Datepicker виджет нь оруулах талбарын агуулга заасан огнооны форматтай таарч байгаа эсэхийг шалгана. Өгөгдмөл утга нь үнэн |
| hideIfNoPrevNext | Хэрэв энэ сонголт үнэн бол хуанли дээр харуулсан огноотой харьцуулахад урагш, хойшоо шилжих боломжийг олгодог дүрсүүдийг идэвхгүй болгохоос илүүтэйгээр бүрэн нуусан болно. Өгөгдмөл утга худал байна |
| хамгийн их огноо | Сонгох боломжтой хамгийн дээд огноог тодорхойлдог. Анхдагч байдлаар ямар ч хязгаарлалт байхгүй |
| минОгноо | Сонгох боломжтой хамгийн бага огноог тодорхойлдог. Анхдагч байдлаар ямар ч хязгаарлалт байхгүй |
| Сарын тоо | Хуанли дээр нэгэн зэрэг харагдах саруудын тоог тодорхойлно. Өгөгдмөл утга нь 1 |
| ShowCurrentAtPos | Хэрэв хуанли нь олон сарыг нэг дор харуулахаар тохируулагдсан бол энэ сонголт нь одоогийн эсвэл үндсэн сарыг харуулах байршлын дугаарыг зааж өгнө. Өгөгдмөл утга нь 0 |
| алхам сарууд | Урагш эсвэл ухраах цаг товчийг дарахад хуанлийн огноог хэдэн сар урагшлуулах эсвэл хойш татахыг тодорхойлно. |
| жилийн Хүрээ | ChangeYear сонголтыг ашиглан нэмсэн унадаг жагсаалтаас сонгох боломжтой жилийн хүрээг тодорхойлно. Анхдагч байдлаар, энэ жагсаалтад өмнөх арван жил, дараагийн арван жил, тухайн жил орно. |
constrainInput сонголтыг үнэн гэж тохируулснаар та текст талбарт оруулах тэмдэгтийг зөвхөн хатуу тодорхойлсон форматтай нийцэх тэмдэгтүүдээр хязгаарлаж болно. Зөвшөөрөгдсөн тэмдэгтийн багцыг дээр дурдсан нутагшуулах тохиргоогоор тодорхойлно. Хэрэв Datepicker виджет локалчлагдаагүй бол зөвшөөрөгдсөн тэмдэгтүүдэд зөвхөн тоо болон налуу зураас (/) тэмдэгт орно гэж найдаж болно.
constrainInput тохируулгад заасан утгыг ашиглах нь хэрэглэгч 99/99/99 гэх мэт хүчингүй огноог оруулах боломжгүй гэсэн үг биш боловч алдаа гарах магадлалыг мэдэгдэхүйц бууруулдаг. Хэрэв showOn сонголтыг товчлуур дээр тохируулсан бол энэ тохиргоо нь илүү чухал бөгөөд дараа нь оролтын талбарт анхаарлаа хандуулах үед гарч ирэх хуанли автоматаар нээгдэхгүй.
Хэрэглэгчид ихэвчлэн хуанли ашиглан огноог сонгоход бэлэн байдаг ч үүнийг хийхийн тулд үүнийг харах ёстой. Хэрэв календарь дэлгэц дээр харагдахгүй бол хэрэглэгч бүр хуанли нээхийн тулд товчлуур дээр дарахад хангалттай гэдгийг ойлгохгүй. Хэрэглэгчид огноог текст талбарт шууд оруулах ямар ч сонголт нь оруулсан огнооны формат буруу байх магадлалыг нэмэгдүүлдэг. constrainInput сонголтыг ашиглах жишээг доор үзүүлэв.
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( constrainInput: үнэн, minDate: "-3", maxDate: "+ 1" ); )))
Энд үнэн утгыг зөвхөн тодорхой болгох үүднээс constrainInput тохируулгад өгсөн, учир нь энэ нь энэ сонголтын өгөгдмөл утга юм. Үлдсэн хоёр сонголт нь сонгох боломжтой огнооны хүрээг хамгийн бага ба дээд огноогоор хязгаарлах боломжийг танд олгоно.
Өмнө нь хэлэлцсэн defaultDate сонголтын нэгэн адил minDate болон maxDate сонголтуудын утгууд нь null (тодорхойгүй огноо), JavaScript Date объект, хэдэн өдрийн тоо, харьцангуй огнооны мөр байж болно. Энэ жишээнд одоогийн огноотой харьцуулахад өдрийн тоог зааж өгөхийн тулд тоон дүрслэлийг сонгосон.
Зураг дээр та Datepicker нь сонгох боломжгүй хуанлийн нүднүүдийг идэвхгүй болгож байгааг харж болно.
Сарын товчлуурууд шаардлагагүй бол автоматаар идэвхгүй болно гэдгийг анхаарна уу. Эдгээр товчлуурууд нь хуанлийн зүүн ба баруун дээд хэсэгт байрлах ба дараагийн эсвэл өмнөх сар руу хурдан шилжих боломжийг танд олгоно. Зурагт үзүүлсэнчлэн сонгох боломжтой бүх огноо нь тухайн сард байгаа тул хоёр товчлуурыг идэвхгүй болгосон. Ийм нөхцөлд шаардлагатай бол hideIfNoPrevNext сонголтыг үнэн болгож эдгээр товчлууруудыг бүрэн нууж болно.
MinDate утга нь өнгөрсөнд байх албагүй бөгөөд ирээдүйд maxDate утга байх албагүй бөгөөд энэ нь нэгэн зэрэг хоёулаа байх албагүй. Хэрэглэгчид өмнө нь "бэлтгэл хийх" хугацаа байгаа мужаас огноог сонгохыг зөвшөөрөхийн тулд та minDate сонголтыг ирээдүйд утга болгон тохируулж, ингэснээр хэрэглэгчийг доорх жишээнд үзүүлсэн шиг тухайн хугацаанд огноо сонгохоос сэргийлж болно. :
$(функц() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( минОгноо: "+4" )); ))
Энэ жишээнд хэрэглэгч одоогийн огнооноос хойш 4 хоногийн өмнө огноог сонгох боломжгүй гэдгийг бид тодорхойлсон. maxDate сонголт тодорхойгүй байгаа бөгөөд энэ нь хэрэглэгч заасан "саатгалын хугацаа"-аас хойш дурын огноог сонгох боломжтой гэсэн үг юм. Үр дүнг зурагт үзүүлэв:
Энэ тохиолдолд дараагийн сарын товчлуур идэвхжсэн байхад өмнөх сарын товчлуур идэвхгүй байгааг анхаарна уу (хэрэглэгчийн сонгох боломжтой өнгөрсөн огноо байхгүйгээс).
MinDate болон maxDate сонголтууд нь defaultDate сонголттой хамт ажилладаг бөгөөд энэ нь одоогийн огноотой холбогдох мужууд нь сонголттой гэсэн үг юм.
Олон сарыг нэг дор харуулах хуанли үүсгэDatepicker виджет нь numberOfMonths сонголтыг ашиглан хуанли дээр нэгэн зэрэг харуулах хэдэн сарын тоог тохируулах боломжийг танд олгоно. Үүнийг шаардлагатай саруудын тоо эсвэл сар бүрийн хуанлийн сүлжээний хэмжээсийг тодорхойлсон хоёр элементийн массивыг зааж өгөх замаар хийж болно.
Доорх жишээ нь массив дээр суурилсан хандлагыг хэрэгжүүлсэн бөгөөд үүнийг би суулгасан Datepicker виджетүүдэд хамгийн тохиромжтой гэж бодож байна, учир нь сүлжээний хэмжээ нь попап виджетүүдэд хэтэрхий том байдаг (бид дараа нь энэ талаар эргэн харах болно).
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker((Сарын тоо: )); ));
Энэ жишээнд нэг сарын өндөр, гурван сарын өргөнтэй хуанлийн сүлжээг зааж өгсөн болно. Үр дүнг зурагт үзүүлэв:
Хоёр элементийн массив нь тоон утгатай 3-тай тэнцүү байна. Хэрэв numberOfMonths сонголтын утгыг тоогоор зааж өгсөн бол виджет нь харгалзах сарын тоог нэг мөрөнд харуулна.
Поп-ап хуанлитай ажиллахдаа би энэ аргыг бараг ашигладаггүй шалтгаан нь том сүлжээнүүдтэй бол хөтчийн цонх болон дэлгэцийн хэмжээнүүдийн талаар тодорхой таамаглал гаргах шаардлагатай болдог. Datepicker попап виджетийн цонх нь үйлдлийн системийн харилцах цонх биш юм. Энэ нь HTML баримтын нэг хэсэг болгон гарч ирдэг ухаалаг загвартай HTML элемент юм. Энэ нь хуанлийн том сүлжээг жижиг дэлгэц эсвэл хөтчийн жижиг цонхонд харуулах үед баримт бичигт агуулагдах мэдээллийн ихэнх хэсэг нь дэлгэцийн гадна харагдах болно гэсэн үг юм.
Сар, жилээр шууд нэвтрэх боломжийг олгохКалендарийн толгой хэсэгт сар, жилийг зүгээр л харуулахын оронд унждаг жагсаалтуудыг ашиглан холбогдох цагуудад шууд хандах боломжтой. Энэ функц нь хэрэглэгчид өргөн хүрээний боломжит огнооноос огноо сонгох шаардлагатай үед хурдыг өгдөг бөгөөд changeMonth болон changeYear сонголтуудыг ашиглан хэрэгжүүлдэг.
Эдгээр сонголтуудын аль нэгийг үнэн гэж тохируулснаар харгалзах унадаг жагсаалтыг идэвхжүүлэх ба та жагсаалтууд идэвхжсэн эсэхийг бие даан хянах боломжтой. Эдгээр сонголтыг ашиглах жишээг доор харуулав.
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker((өөрчлөхСар: үнэн, өөрчлөлтОн: үнэн, жил: "-1:+ 2" ); )))
Энэ тохиолдолд унадаг жагсаалт хоёулаа идэвхжсэн байна. Нэмж дурдахад, yearRange сонголт нь хэрэглэгч шилжихийг зөвшөөрсөн жилийн хязгаарыг хязгаарлахад ашиглагддаг. Шаардлагатай мужийг "-1:+2" утгыг ашиглан тодорхойлсон бөгөөд энэ нь хуанли нь хэрэглэгчийг тухайн жилээс нэг жилийн дотор, хоёр жил урагшлуулах боломжийг олгоно гэсэн үг юм.
Унждаг жагсаалтууд болон заасан жилийн хүрээг зурагт үзүүлэв.
Жилийн хязгаарыг тодорхойлохдоо та бодит оныг зааж өгөхийн тулд yearRange сонголтыг ашиглаж болно. Тиймээс, энэ жишээнд та "2012:2015" гэсэн утгыг зааж өгч болно.
Datepicker виджетийн харагдах байдлыг хянахDatepicker виджетийг хэрэглэгчдэд харуулах үед түүний харагдах байдлыг өөрчлөх боломжийг олгодог хэд хэдэн шинж чанарууд байдаг. Огноо сонгох нийтлэг даалгавруудын хувьд та өмнөх жишээнүүдээс аль хэдийн танил болсон хуанлийн өгөгдмөл дүр төрхөд сэтгэл хангалуун байж болох ч тухайн вэб програмынхаа хэрэгцээнд нийцүүлэн гадаад төрхийг өөрчлөх чадвар нь маш хэрэгтэй.
Datepicker виджетийн харагдах байдлыг өөрчлөх боломжуудыг доорх хүснэгтэд үзүүлэв.
| хавсралт Текст | Оролтын элементийн дараа баримт бичигт оруулах огнооны форматын тайлбар зэрэг нэмэлт мэдээлэл агуулсан хэрэгслийн зөвлөмжийн текстийг зааж өгнө. |
| CloseText | Идэвхжүүлсэн үед туслах товчлуурын талбар дээр гарч ирэх хуанли хаах товчлуурын текстийг тохируулна. Өгөгдмөл утга нь "Хаах" |
| одоогийн текст | Идэвхжүүлсэн үед туслах товчлуурын мөрөнд гарч ирэх одоогийн сар руу буцах товчлуурын текстийг тохируулна. Өгөгдмөл утга нь "Өнөөдөр" |
| үргэлжлэх хугацаа | showAnim сонголтоор заасан хөдөлгөөнт дүрсний хурд эсвэл үргэлжлэх хугацааг тохируулна. Өгөгдмөл утга нь хэвийн байна |
| gotoCurrent | Хэрэв энэ сонголт үнэн бол Туслах товчлуурын мөрөнд байрлах "Өнөөдөр" товчийг идэвхжүүлсэн бол одоогийн огноо биш сонгосон огноо руу буцна. Өгөгдмөл утга худал байна |
| Бусад саруудыг сонгоно уу | Хэрэв энэ сонголт үнэн бол showOtherMonths сонголтыг үнэн болгож тохируулсны үр дүнд харуулсан огноог сонгох боломжтой болно. |
| шоуАним | Поп-ап хуанлиг харуулах, нуухад ашигладаг хөдөлгөөнт дүрсний төрлийг тодорхойлно. Өгөгдмөл утга худал байна |
| ShowButtonPanel | Хэрэв энэ сонголт үнэн бол календарь нь хэрэглэгчийг одоогийн огноо руу шилжүүлэх, (хэрэв попап виджет ашиглаж байгаа бол) календарийг хаах товчлуур бүхий туслах самбарыг харуулах болно. Өгөгдмөл утга худал байна |
| ShowOptions | showAnim сонголтоор заасан хөдөлгөөнт дүрсийг тохируулна |
| Бусад саруудыг харуулах | Хэрэв энэ сонголт үнэн бол хуанлийн сүлжээн дэх хоосон талбаруудыг өмнөх болон дараагийн саруудын огноогоор дүүргэх болно. Өгөгдмөл утга худал байна |
| шоу долоо хоног | Хэрэв энэ сонголт үнэн бол хуанли нь долоо хоногийн дугаар бүхий баганыг харуулах болно. Өгөгдмөл утга худал байна |
| долоо хоногийн толгой | ShowWeek сонголтоор идэвхжүүлсэн долоо хоногийн дугаар бүхий хуанлийн баганын гарчгийг зааж өгнө. Өгөгдмөл утга нь "Лхагва" |
Зарим хэрэглээний хувьд тухайн огноо тохиож буй жилийн долоо хоногийн тоог мэдэх нь чухал юм. Жишээлбэл, нягтлан бодох бүртгэлийн олон программд үүнийг шаарддаг. Datepicker виджет дээр та доорх жишээнд үзүүлсэн шиг showWeek болон weekHeader сонголтуудыг ашиглан долоо хоногийн мэдээллийг харуулахыг удирдана.
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showWeek: үнэн, weekHeader: "Долоо хоногийн дугаар" )); ) );
Хэрэв showWeek сонголт үнэн бол хуанли дээр долоо хоногийн дугаар бүхий багана гарч ирнэ. Энэ баганын өгөгдмөл гарчиг нь "Долоо хоног" боловч weekHeader сонголтыг ашиглан өөрчлөх боломжтой. Жишээ нь "Долоо хоног #" болгон өөрчилсөн долоо хоногийн баганыг харуулж байна:
Анхдагч байдлаар, хуанли нь зөвхөн тухайн сард багтсан огноог харуулдаг. Энэ нь хуанлийн сүлжээнд хоосон нүднүүд байж болно гэсэн үг юм. Та доорх жишээнд үзүүлсэн шиг showOtherMonths сонголтыг үнэн болгож тохируулснаар хоосон нүднүүдийг өмнөх болон дараагийн саруудын огноогоор дүүргэхийг зөвшөөрч болно.
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOtherMonths: үнэн )); ));
Үр дүнг доорх зурагт үзүүлэв. Энэ тохиолдолд selectOtherMonths сонголтыг үнэн гэж тохируулбал бусад саруудад хамаарах огноонууд боломжтой болно:
ShowButtonBar сонголтыг үнэн болгож тохируулснаар Datepicker виджетийн цонхны доод хэсэгт нэмэлт товчлуурын мөр нэмэгдэх болно. Попап календарийн хувьд самбар нь "Өнөөдөр" ба "Хаах" гэсэн хоёр товчлуурыг агуулна. Өнөөдөр товчлуур нь одоогийн огноо руу буцах боломжийг олгодог бөгөөд Хаах товчлуур нь календарийн цонхыг хаадаг. Эдгээр товчлууруудад ашигласан текстийг currentText болон closeText сонголтуудыг ашиглан өөрчилж болно.
Хэрэв goToCurrent сонголтыг үнэн гэж тохируулсан бол хуанли одоогийн огнооноос илүү сонгосон огноо руу буцна. Хэрэв Datepicker виджет нь тодорхой defaultDate сонголтын утгаар тохируулагдсан бол энэ хэрэгсэл хэрэг болно. Хэрэв огноог сонгох зорилго нь өнгөрсөн эсвэл ирээдүйн үйл явдлуудтай холбоотой бол одоогийн огноо руу буцах нь үргэлж тохиромжтой байдаггүй. Холбогдох жишээг доор өгөв.
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showButtonPanel: үнэн, currentText: "Go", gotoCurrent: үнэн, defaultDate : "+1м +1ж" )).val("12/20/2014" ));
goToCurrent сонголтыг ашигласнаар сонгосон огноо руу шилжихийн тулд товчлуурыг дарахад хүргэдэг гэдгийг анхаарна уу. Энэ жишээнд сонгосон огноо нь оролтын элементийн утгын шинж чанар боловч хэрэв хэрэглэгч өөр огноо сонгоод хуанлигаа дахин нээвэл товчлуур дээр дарснаар хуанли таны заасан огнооноос илүү хэрэглэгчийн сонгосон огноо руу буцна.
Datepicker виджетийн дэмждэг аргуудыг доорх хүснэгтэд жагсаав.
| огноо сонгогч("устгах") | Үндсэн элементээс Datepicker виджетийн функцийг бүрмөсөн устгана |
| огноо сонгогч("идэвхгүй болгох") | Үндсэн элементийн Datepicker виджетийг түр зогсооно |
| огноо сонгогч("идэвхжүүлэх") | Үндсэн элементийн өмнө түр зогсоосон Datepicker виджетийг үргэлжлүүлнэ |
| огноо сонгогч("сонголт", сонголтууд) | Нэг буюу хэд хэдэн Datepicker виджетийн сонголтуудын утгыг авах эсвэл тохируулах боломжийг танд олгоно |
| огноо сонгогч("Идэвхгүй") | Datepicker виджетийг идэвхгүй болгосон тохиолдолд үнэнийг буцаана |
| огноо сонгогч("нуух") | Хэрэв гарч ирэх хуанли харагдах бол түүнийг нууна |
| огноо сонгогч("үзүүлэх") | Хэрэв харагдахгүй бол попап хуанли харуулдаг |
| огноо сонгогч("шинэчлэх") | Үндсэн зүйлд хийсэн өөрчлөлтийг тусгахын тулд календарийг шинэчилдэг |
| огноо сонгогч("getDate") | Хуанли дээр сонгосон огноог авна |
| огноо сонгогч("тогтоосон огноо", огноо) | Сонгосон хуанлийн огноо болгон заасан утгыг тохируулна |
Миний getDate болон setDate аргуудыг ашигладаг хамгийн түгээмэл үе бол олон Datepicker виджет ашиглан огнооны мужийг бүхэлд нь сонгох боломжийг хэрэглэгчдэд олгохыг хүссэн үе юм. Ийм нөхцөлд би сонгогдсон огноог текст талбарт харуулахгүй, зөвхөн заасан тасалбарын хоорондох өдрийн тоог харуулахыг илүүд үздэг. Холбогдох жишээг доор өгөв.
jQuery UI шошго (маржин: 12px) оролт (өргөн: 200px; текстийг зэрэгцүүлэх: зүүн) #wrapper > * (хөвөгч: зүүн) #үр дүн (маржин: автомат; дүүргэлт: 10px; өргөн: 200px; тодорхой: зүүн) $( function() ( $("#result").hide(); $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#dateStart, #dateEnd").datepicker((minDate:) "-7d", maxDate: "+7d", onSelect: функц(огноо, огноо сонгогч) ( хэрэв (datepicker.id == "dateStart") ( $("#dateEnd").datepicker("setDate", огноо) . datepicker("идэвхжүүлэх").datepicker("сонголт", "minDate", огноо) ) хэрэв (!$("#dateEnd").datepicker("isDisabled")) ( var startDate = $("#dateStart"). datepicker("getDate"); var endDate = $("#dateEnd").datepicker("getDate") - startDate.getDate().parent().show(); ; ) )).filter("#dateEnd").datepicker("идэвхгүй болгох" )); Эхлэл: Төгсгөл: Өдрийн тоо:
Энэ жишээ нь хоёр хуанли үүсгэдэг бөгөөд тэдгээрийн нэг нь баримтыг ачаалсны дараа шууд идэвхгүй байдалд байна. Хэрэглэгчийн сонгосон огноонд хариу өгөхийн тулд onSelect үйл явдлыг ашигладаг (энэ талаар бид дараа нь дэлгэрэнгүй ярих болно).
Хэрэглэгч эхний хуанли дээр огноог сонгосны дараа бид хоёр дахь хуанли бэлтгэхдээ setDate аргыг, хоёр хуанлигаас огноог авахын тулд getDate аргыг ашиглан эхний болон хоёр дахь огнооны өдрийн зөрүүг тооцоолно (хялбар болгох үүднээс бид Хоёр огноо нь ижил бөгөөд нэг сараас байна гэж үзье). Хөтөчийн цонхон дээрх баримт бичгийн харагдах байдлыг зурагт үзүүлэв.
Бүх jQuery UI виджетүүдийн нэгэн адил Datepicker виджет нь програмын төлөв дэх чухал өөрчлөлтүүдийн талаар танд мэдэгдэх боломжийг олгодог олон үйл явдлыг дэмждэг. Эдгээр үйл явдлуудыг доорх хүснэгтэд үзүүлэв.
Би onSelect арга хэрхэн ажилладагийг дахин харуулахгүй, учир нь энэ аргыг өмнөх хэсэгт авч үзсэн хэд хэдэн жишээн дээр аль хэдийн ашигласан байна. Миний онцлохыг хүсч буй цорын ганц зүйл бол үйл явдал зохицуулагч руу дамжуулсан аргументууд нь сонгосон огноо болон үйл явдлыг үүсгэсэн Datepicker жишээний тэмдэгтүүд юм.
onChangeMonth үйл явдал нь changeMonth болон changeYear сонголтууд эсвэл сарын хуудасны товчлууруудыг ашиглан идэвхжүүлсэн унждаг жагсаалтуудаар дамжуулан хэрэглэгч өөр сар эсвэл жил сонгох үед тохиолдох үйл явдалд хариу өгөх боломжийг танд олгоно.
onClose аргыг ашигласнаар та попап хуанли хаахад хариу өгөх боломжтой. Хэрэглэгч календарьт огноо сонгоогүй байсан ч энэ үйл явдал идэвхждэг. Үйл явдал зохицуулагчийн аргументууд нь огноо (эсвэл хэрэглэгч сонголт хийлгүйгээр цонхыг хаасан бол хоосон мөр) болон үйл явдлыг үүсгэсэн Datepicker жишээний тэмдэгт мөр юм.
Тайлбар: Огноо сонгохын тулд гарч ирэх цонх эсвэл доторлогооны хуанлигаас.
Шинэ хувилбар: 1.0
JQuery UI Datepicker Plugin-ийг өөрчлөхийн тулд хуудасны өндрийг нэмэх огноог сонгоно уу. Та огнооны формат, хэлийг өөрчлөх, сонгох боломжтой огнооны мужийг хязгаарлах, товчлуур нэмэх болон бусад навигацийн сонголтуудыг хийх боломжтой.
Анхдагч байдлаар, холбогдох текст талбарт анхаарлаа төвлөрүүлэх үед жижиг нээлттэй огноо сонгогч давхарлал гарч ирнэ. Онлайн календарийн хувьд DIV эсвэл интервалд хавсаргасан огноог сонгоход хангалттай.
гарын харилцан үйлчлэлОгноо сонгогч нээлттэй үед гарын доорх тушаалуудыг ашиглах боломжтой.
- PAGE UP: Өмнөх сар руу очно уу.
- ДООШ ХУУДАС: Дараагийн сар руу шилжинэ.
- CTRL + PAGE UP: Өмнөх жил рүү шилжих.
- CTRL + PAGE DOWN: Дараа жил рүү очно уу.
- CTRL + HOME: Тухайн сарыг зөөнө. Хэрэв огноо сонгогч хаалттай бол нээлттэй байна.
- CTRL + ЗҮҮН: Өдөр рүү шилжих.
- CTRL + RIGHT: Дараагийн өдөр рүү оч.
- CTRL + ДЭЭШ: Өмнөх долоо хоног руу очих.
- CTRL + DOWN: Дараагийн долоо хоног руу очно уу.
- ENTER: Анхаарах огноог сонгоно уу.
- CTRL + END: Огноо сонгогчийг хааж, огноог арилгана.
- EMCAPE: Ямар ч сонголтгүйгээр усны цорго хаагдах өдөр.
Бүх огноо сонгогчдын өгөгдмөл тохиргоог өөрчил.
2012.08.20 Ромчик
Сайхан өдөр. Нөгөө өдөр би асуудалтай тулгарсан - хэрэглэгч оролтонд тодорхой форматаар огноог зааж өгөх ёстой. Удаан хугацаанд толгойгоо гашилгахгүйгээр би оролт дээр дарахад хуанли гарч ирэх эсэхийг шалгахаар шийдсэн. Үүнийг хэрэгжүүлэхэд хэцүү биш, гэхдээ яагаад? Хэрэв гайхалтай jQuery хуанлийн виджет байгаа бол - datepicker. Дараа нь бид огноо сонгогчийг суулгах, тохируулах, холбох талаар ярих болно.
Эхлээд би юу хийхийг хүсч байгаагаа тодорхой жишээгээр хэлье.
Огноо сонгосны дараа хуанли алга болж, сонгосон огноо текст талбарт гарч ирэх нь тодорхой байна.
Хэрэгжүүлээд эхэлцгээе.
Албан ёсны jQueryUI вэбсайт руу очно уу. Шаардлагагүй зүйлийг татаж авахгүйн тулд "Бүх бүрэлдэхүүн хэсгүүдийн сонголтыг цуцлах" дээр дарна уу.
Тэгээд "Үндсэн"-ийг сонгоно уу:
Энэ бол үндсэндээ. Гэхдээ энэ виджет нь урьдчилан тохируулсан дэлгэцтэй (загвар)
Баруун дээд буланд та тохирох сэдвийг сонгож, виджетийн хувилбарыг сонгоод "Татаж авах" дээр дарна уу.
Дараагийн шатанд архивыг задлах хэрэгтэй.
Манай хуудасны бүтцийг нэн даруй тохиролцъё:
Одоо бид татаж авсан архиваас jquery-1.8.0.min.js болон jquery-ui-1.8.23.custom.min.js файлуудыг js хавтсанд байрлуулна. Одоо бид татаж авсан архивын css хавтаснаас datepicker-д зориулсан сэдвийн нэртэй хавтсыг (миний хувьд энэ нь ui-lightness) манай хуудасны css хавтас руу байрлуулна. Энэ нь jQuery Datepicker хуанлийн виджетийг суулгаж дуусгана.
Datepicker-г холбож эхэлцгээе. Би аль хэдийн хэлсэнчлэн, текст талбар дээр дарахдаа хуанли руу залгахыг хүсч байна. Оруулсан зүйлдээ id=”datepicker” нэмье, ингэснээр бид үүнд хялбархан хандах боломжтой болно.
Одоо энэ туршилтын талбар дээр дарахад хуанли руу залгах жижиг jQuery скрипт бичье.
$(функц())( $("#огноо сонгогч").огноо сонгогч(); ));
Бид хадгалж, шалгана.
jQuery Datepicker ашиглан хуанлийн виджетийг тохируулж байна.Бидний тохируулах хамгийн эхний зүйл бол хуанлидаа зориулсан сэдэв юм. Доор би Datepicker-ийн сэдэв болон дэлгэцийн нэр бүхий хүснэгтийг өгөх болно.
| UI хөнгөн | |
| UI харанхуй | |
| Гөлгөр байдал | |
| Эхлэх | |
| Редмонд | |
| Нарлаг | |
| Бүрхэг | |
| Le Frog | |
| Товчлуур | |
| Перец бутлуур | |
| Хаш | |
| Хар үүр | |
| Купертино | |
| Өмнөд гудамж | |
| Блицер | |
| Хүн төрөлхтөн | |
| Халуун sneaks | |
| Excite Bike | |
| Вэйдер | |
| Цэг Лув | |
| Mint Chock | |
| Хар цай | |
| Тронтастик | |
| Гоёмсог түрийвч |
Таны харж байгаагаар зөвийг сонгох хангалттай сэдэв байгаа боловч ямар нэг шалтгаанаар ийм сэдвийг олж чадаагүй бол огноо сонгогчийн загварын файлыг өөрчилснөөр стандарт сэдвүүдийн аль нэгийг хялбархан өөрчилж болно.
Огноо сонгогчийн тохиргоо үүгээр дуусдаггүй бөгөөд огноо сонгогчийн функцийг дуудах үед бид нэмэлт параметрүүдийг дамжуулж болно:
| Параметр | Тодорхойлолт | Жишээ |
| идэвхгүй болгох: үнэн (худал) Өгөгдмөл: худал | Огноо сонгогчийг идэвхжүүлэх эсвэл идэвхгүй болгох | $(“.selector”).datepicker(( идэвхгүй: үнэн )); |
| alt талбар Өгөгдмөл: хоосон | Шинэчлэх элементийн сонгогчийг заана | $(“.selector”).datepicker(( alt талбар: “#actualDate” )); |
| altFormat Өгөгдмөл: хоосон | dateFormat - altField-д ашиглах огнооны формат | $(“.сонгогч”). огноо сонгогч(( altFormat: “yy-mm-dd” )); |
| appendTex Өгөгдмөл: хоосон | Огноо бүрийн дараа харуулах текст | $(“.сонгогч”).огноо сонгогч(( хавсралтТекст: “(жжж-мм-дд)” )); |
| Автомат хэмжээ: үнэн (худал) Өгөгдмөл: худал | Автомат хэмжээтэй элемент | $(“.сонгогч”).огноо сонгогч(( autoSize: үнэн )); |
| огнооФормат: Өгөгдмөл: мм/дг/ж Доорх хүснэгтэд би ямар үнэ цэнийг авч болохыг харуулах болно. | Огнооны форматыг зааж өгнө | $(“.сонгогч”).datepicker(( dateFormat: “yy-mm-dd” )); |
| өдрийн нэрс Өгөгдмөл ["Ням Даваа Мягмар Лхагва Пүрэв Баасан Бямба"] | Долоо хоногийн өдрүүдийн бүтэн нэр | $(“.selector”).datepicker(( өдрийнНэр: [“Даваа”, “Мягмар”, “Лхагва”, “Пүрэв”, “Баасан”, “Бямба”, “Ням гараг”] )); |
| өдрийнНэр Мин Өгөгдмөл: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"] | Долоо хоногийн өдрүүдийн товчлол | $(“.selector”).datepicker(( dayNamesMin: [“Дав”,”Мяг”,”Лхагва”,”Пр”,”Баасан",”Бямба”,”Нар”] )); |
| өдрийнНэр Богино Өгөгдмөл: ["Нар", "Дав", "Мяг", "Лхагва", "Пүрэв", "Баасан", "Бямба"] | Долоо хоногийн өдрүүдийн товчилсон нэрс | $(“.selector”).datepicker(( dayNamesShort: [“Дав”, “Мяг”, “Лхагва”, “Пүрэв”, “Баасан”, “Бямба”, “Нар”] )); |
| анхдагч огноо Өгөгдмөл: хоосон dateFormat параметрүүдийг параметр болгон ашигладаг | Өгөгдмөл огноог зааж өгнө | $(“.сонгогч”).огноо сонгогч(( анхдагч огноо: +7 )); |
| сарын нэрс Өгөгдмөл: ["1-р сар", "2-р сар", "3-р сар", "4-р сар", "5-р сар", "6-р сар", "7-р сар", "8-р сар", "9-р сар", "10-р сар", "11-р сар", "12-р сар"] | Саруудын бүтэн нэр | $(“.selector”).datepicker(( сарынНэр: [“1-р сар”, “2-р сар”, “3-р сар”, “4-р сар”, “5-р сар”, “6-р сар”, “7-р сар”, “8-р сар”, “9-р сар”, "10, 11, 12-р сар"] )); |
| сарынНэр Богино Өгөгдмөл ["1-р сар, "2-р сар", "3-р сар", "4-р сар", "5-р сар", "6-р сар", "7-р сар", "8-р сар", "9-р сар", "аравдугаар сар", "11-р сар", "12-р сар"] | Саруудын товчилсон нэр | $(“.selector”).datepicker(( monthNamesShort: [“1-р сар”, “2-р сар”, “3”, “4-р сар”, “5-р сар”, “6-р сар”, “7-р сар”, “8-р сар”, “9-р сар”, "10-р сар", "11-р сар", "12-р сар"] ); |
Энд би зөвхөн танд хэрэгтэй байж болох үндсэн параметрүүдийг өгсөн. Хэрэв та параметрийн бүрэн жагсаалтыг харахыг хүсвэл албан ёсны баримт бичиг рүү очно уу
Одоо dateFormat параметрийн авах утгыг харцгаая
Ингээд л болоо.
Бид гайхалтай jQuery виджетүүдийн нэг болох datepicker хуанлийн виджетийн суурилуулалт, холболт, тохиргоог харлаа.
Танд нийтлэл таалагдсан гэж найдаж байна. Хэрэв танд асуулт байвал сэтгэгдэл дээр бичнэ үү.
Үүгээр би чамтай, амжилттай вэб хөгжүүлэлттэй баяртай гэж хэлье.