Tapaa Vuelendar: Datepicker-kalenteri, joka on kirjoitettu VueJS:llä.

Koska räätälöinti kävi yhä haastavammaksi ja aikaa vievämmäksi, päätimme etsiä toisen ratkaisun. Lisäksi API:t eivät mahdollistaneet monien sellaisten vaatimusten toteuttamista, jotka olivat varsin ratkaisevia lopputuloksen laadun kannalta. tuote. Tämän vuoksi Vuekalenteri tehtiin.

Löydät lähteen koodi of the Vuekalenteri meidän GitHub-arkisto.

Mikä se tarkalleen ottaen on?

Kuten ehkä jo arvasit tämän artikkelin alussa, a Vuekalenteri on VueJ:llä kirjoitettu kalenterikomponentti. Sen avulla voit valita päivämäärien vaihteluvälin tai yksittäisen päivämäärän. Lisäksi voit myös helposti korvata toimimattomia päiviä! Lisäksi sen avulla voit lisätä räätälöityjä CSS-pätkiä, jotka voivat lopulta muuttaa "ulkoasua".

Luomisprosessi

Aiemmin käytimme jQqueryä kalenteriominaisuuden toteuttamiseen eräässä projektissamme ja törmäsimme ongelmaan - sitä oli vaikea mukauttaa. Silloin päätimme tehdä oman komponentin. Ensimmäisessä vaiheessa käytimme sitä lähinnä omissa projekteissamme, mutta ajan myötä tulimme siihen tulokseen, että se voisi olla kätevä ratkaisu muille ohjelmoijille - silloin jaoimme sen The Codest:n GitHub-tilillä koodikirjaston muodossa.

Asennus

npm install [email protected]

Käyttö

Tuo tyylejä .vue-tiedostoon:

<style src="vuelendar/scss/vuelendar.scss" lang="scss"></style>

Rekisterin osat:

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

export default {
  components: {
    VRangeSelector,
    VDaySelector
  },
  data () {
    return {
      range: {},
      date: null
    }
  }
  // ...
}

Käytä mallissa:

Päivämäärien poistaminen käytöstä

Vuelendar mahdollistaa kaksi tapaa poistaa päivämääriä käytöstä.

Joukon käyttäminen:

Poistaa käytöstä 21. huhtikuuta 2019 ja 25. huhtikuuta 2019.

Esineen käyttäminen kuvaamaan päivämäärien vaihteluväliä:

Poistaa käytöstä kaikki päivämäärät 21. huhtikuuta 2019 ja 25. huhtikuuta 2019 välisenä aikana.

Jos määrität vain 'from'-attribuutin, kaikki kyseisen päivämäärän jälkeiset päivämäärät poistetaan käytöstä.

Poistaa käytöstä kaikki päivämäärät 21. huhtikuuta 2019 alkaen

Jos määrität vain 'to'-attribuutin, kaikki kyseistä päivämäärää edeltävät päivämäärät poistetaan käytöstä.

Poistaa käytöstä kaikki päivämäärät ennen 21. huhtikuuta 2019

Hakemus

Meidän Vuekalenteri voidaan käyttää kaikissa VueJS:ään perustuvissa hankkeissa. Se on yksinkertainen mutta tehokas komponentti, joka ei ainoastaan säästä aikaa ohjelmoijana vaan myös rikastuttaa teidän projekti sujuvasti toimivan kalenterin kanssa. Nykyään on monia projekteja, jotka saattavat tarvita tätä ratkaisua, joten tässä sitä ollaan!

Päivitys

Kun VueJS:n uusi päivitys julkaistiin, uudet vaatimukset tulivat esiin. Siksi olemme päättäneet mukauttaa kalenterikomponenttimme VueJS:n uusimpaan versioon. Kirjastoja oli parannettava, jotta pieni mutta kätevä helmemme toimisi sujuvasti ja tehokkaasti.

Pakkaaminen

Jos olet keskellä VueJS:ään perustuvaa projektia ja etsit siistiä kalenterin ominaisuutta, tämä on ehdottomasti sinua varten! Me kaikki tiedämme, kuinka paljon aikaa näiden komponenttien luominen voi viedä. Meidän Vuelandar auttaa sinua piristämään hakemustasi ja säästämään aikaa ja hermoja!

Lue lisää:

Miksi sinun pitäisi (luultavasti) käyttää Typescriptiä?

Miten projektia ei saa tappaa huonoilla koodauskäytännöillä?

Tiedonhakustrategiat NextJS:ssä