Iepazīstieties ar Vuelendar: Datepicker kalendārs, kas rakstīts VueJS programmā

Tā kā pielāgošana kļuva arvien sarežģītāka un laikietilpīgāka, mēs nolēmām meklēt citu risinājumu. Turklāt API neļāva mums lai īstenotu daudz prasību, kas bija ļoti svarīgas gala kvalitātes nodrošināšanai. produkts. Tāpēc 1TP68Kalendārijs tika veikts.

Jūs varat atrast avotu kods no 1TP68Kalendārijs mūsu GitHub repozitorijs.

Kas tieši tas ir?

Kā jau varēja nojaust šī raksta sākumā, a 1TP68Kalendārijs ir kalendāra komponents, kas rakstīts VueJs valodā. Tā ļauj jums izvēlēties datumu diapazonu vai vienu datumu. Turklāt jūs varat arī viegli aizstāt neaktīvās dienas! Turklāt tas ļauj jums pievienot pielāgotus CSS bitus, kas galu galā var mainīt "izskatu un sajūtu".

Radīšanas process

Iepriekš mēs izmantojām jQquery, lai ieviestu kalendāra funkciju vienā no mūsu projektiem, un mēs saskārāmies ar problēmu - to bija grūti pielāgot. Tieši tad mēs pieņēmām lēmumu izveidot savu komponentu. Pirmajā fāzē mēs to galvenokārt izmantojām savos projektos, bet, laikam ejot, nonācām pie secinājuma, ka tas varētu būt ērts risinājums citiem programmētājiem - tieši tad mēs ar to dalījāmies The Codest GitHub kontā kodu bibliotēkas veidā.

Uzstādīšana

npm instalēt [email protected]

Lietošana

Importējiet stilus savā .vue failā:

Reģistrēt sastāvdaļas:

importēt VRangeSelector no 'vuelendar/components/vl-range-selector';
import VDaySelector from 'vuelendar/components/vl-day-selector';

export default {
  components: {
    VRangeSelector,
    VDaySelector
  },
  dati () {
    atgriezties {
      diapazons: {},
      date: null
    }
  }
  // ...
}

Izmantošana veidnē:

Datu atspējošana

Vuelendar ļauj atspējot datumus divos veidos.

Izmantojot masīvu:

Atslēgs 2019. gada 21. aprīli un 2019. gada 25. aprīli

Objekta izmantošana, lai aprakstītu datumu diapazonu:

Izslēgs visus datumus no 2019. gada 21. aprīļa un 2019. gada 25. aprīļa.

Norādot tikai atribūtu 'no', tiks atspējoti visi datumi pēc šī datuma.

Izslēgs visus datumus no 2019. gada 21. aprīļa

Norādot tikai atribūtu 'līdz', tiks atspējoti visi datumi pirms šī datuma.

Izslēgs visus datumus līdz 2019. gada 21. aprīlim

Pieteikums

Mūsu 1TP68Kalendārijs var izmantot visos projektos, kuru pamatā ir VueJS. Tā ir vienkārša, bet efektīva komponente, kas ne tikai ietaupīs jūsu kā programmētāja laiku, bet arī bagātinās jūsu darbu. projekts ar vienmērīgi strādājošu kalendāru. Mūsdienās ir daudz projektu, kuriem varētu būt nepieciešams šāds risinājums, tāpēc mēs esam šeit!

Atjauninājums

Tā kā tika uzsākts jauns VueJS atjauninājums, parādījās jaunas prasības. Tāpēc mēs nolēmām pielāgot mūsu kalendāra komponentu jaunākajai VueJS versijai. Bija jāuzlabo bibliotēkas, lai mūsu nelielā, bet parocīgā gem darbotos raiti un efektīvi.

Pabeigšana

Ja jūs atrodaties projekta, kas balstīts uz VueJS, vidū un meklējat foršu kalendāra funkciju, šis noteikti ir domāts jums! Mēs visi zinām, cik daudz laika var aizņemt šo komponentu izveide. Mūsu Vuelandar palīdzēs jums uzlabot jūsu pieteikumu un ietaupīt laiku un nervus!

Lasīt vairāk:

Kāpēc jums (iespējams) vajadzētu izmantot Typescript

Kā nenogalināt projektu ar sliktu kodēšanas praksi?

Datu iegūšanas stratēģijas NextJS