Γνωρίστε το Vuelendar: ένα ημερολόγιο Datepicker γραμμένο σε VueJS

Καθώς η προσαρμογή γινόταν όλο και πιο δύσκολη και χρονοβόρα, αποφασίσαμε να αναζητήσουμε μια άλλη λύση. Επιπλέον, τα API δεν μας επέτρεπαν να υλοποιήσουμε πολλές απαιτήσεις που ήταν αρκετά κρίσιμες για την ποιότητα του τελικού προϊόν. Αυτός είναι ο λόγος για τον οποίο η Vuelendar έγινε.

Μπορείτε να βρείτε την πηγή κωδικός του Vuelendar στο Αποθετήριο GitHub.

Τι είναι ακριβώς;

Όπως ίσως έχετε ήδη μαντέψει στην αρχή αυτού του άρθρου, ένα Vuelendar είναι ένα στοιχείο ημερολογίου γραμμένο σε VueJs. Σας επιτρέπει να επιλέξετε ένα εύρος ημερομηνιών ή μία μόνο ημερομηνία. Επιπλέον, μπορείτε επίσης να αντικαταστήσετε εύκολα ανενεργές ημέρες! Επίσης , σας επιτρέπει να προσθέσετε προσαρμοσμένα κομμάτια CSS που μπορούν τελικά να αλλάξουν την εμπειρία "look and feel".

Η διαδικασία δημιουργίας

Προηγουμένως, χρησιμοποιούσαμε το jQquery για να υλοποιήσουμε τη λειτουργία ημερολογίου σε ένα από τα έργα μας και πέσαμε πάνω σε ένα πρόβλημα - ήταν δύσκολο να το προσαρμόσουμε. Τότε ήταν που πήραμε την απόφαση να φτιάξουμε το δικό μας συστατικό. Σε πρώτη φάση, το χρησιμοποιήσαμε κυρίως στα δικά μας έργα, αλλά καθώς περνούσε ο καιρός, καταλήξαμε στο συμπέρασμα ότι μπορεί να είναι μια εύχρηστη λύση για άλλους προγραμματιστές - τότε είναι που το μοιραστήκαμε στο λογαριασμό GitHub του The Codest με τη μορφή βιβλιοθήκης κώδικα.

Εγκατάσταση

npm install [email protected]

Χρήση

Εισάγετε στυλ στο αρχείο .vue:

Στοιχεία μητρώου:

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
    }
  }
  // ...
}

Χρήση στο πρότυπο:

Απενεργοποίηση ημερομηνιών

Το Vuelendar επιτρέπει δύο τρόπους για την απενεργοποίηση ημερομηνιών.

Χρήση ενός πίνακα:

Θα απενεργοποιήσει την 21η Απριλίου 2019 και την 25η Απριλίου 2019.

Χρήση ενός αντικειμένου για την περιγραφή ενός εύρους ημερομηνιών:

Θα απενεργοποιήσει όλες τις ημερομηνίες από την 21η Απριλίου 2019 και την 25η Απριλίου 2019

Ο προσδιορισμός μόνο του χαρακτηριστικού 'από' θα απενεργοποιήσει όλες τις ημερομηνίες που είναι μεταγενέστερες αυτής της ημερομηνίας.

Θα απενεργοποιήσει όλες τις ημερομηνίες από τις 21 Απριλίου 2019

Ο προσδιορισμός μόνο του χαρακτηριστικού 'έως' θα απενεργοποιήσει όλες τις ημερομηνίες πριν από αυτή την ημερομηνία.

Θα απενεργοποιήσει όλες τις ημερομηνίες πριν από τις 21 Απριλίου 2019

Εφαρμογή

Το μας Vuelendar μπορεί να χρησιμοποιηθεί σε όλα τα έργα που βασίζονται στο VueJS. Πρόκειται για ένα απλό αλλά αποτελεσματικό στοιχείο που όχι μόνο θα εξοικονομήσει το χρόνο σας ως προγραμματιστής αλλά και θα εμπλουτίσει το έργο με ένα ημερολόγιο που λειτουργεί ομαλά. Σήμερα, υπάρχουν πολλά έργα που μπορεί να χρειάζονται αυτή τη λύση, οπότε εδώ είμαστε!

Η ενημέρωση

Καθώς ξεκίνησε η νέα ενημέρωση του VueJS, εμφανίστηκαν οι νέες απαιτήσεις. Αυτός είναι ο λόγος για τον οποίο αποφασίσαμε να προσαρμόσουμε το στοιχείο ημερολογίου μας στη νεότερη έκδοση του VueJS. Οι βιβλιοθήκες έπρεπε να βελτιωθούν ώστε το μικρό αλλά εύχρηστο κόσμημά μας να λειτουργεί ομαλά και αποτελεσματικά.

Ανακεφαλαιώνοντας

Αν βρίσκεστε στη μέση ενός έργου βασισμένου στο VueJS και ψάχνετε για ένα δροσερό χαρακτηριστικό ενός ημερολογίου, αυτό είναι σίγουρα για εσάς! Όλοι γνωρίζουμε πόσο χρόνο μπορεί να πάρει η δημιουργία αυτών των στοιχείων. Το μας Vuelandar θα σας βοηθήσουν να κάνετε πιο πικάντικη την αίτησή σας και να γλιτώσετε χρόνο και νεύρα!

Διαβάστε περισσότερα:

Γιατί θα πρέπει (πιθανώς) να χρησιμοποιήσετε την Typescript

Πώς να μην σκοτώσετε ένα έργο με κακές πρακτικές κωδικοποίησης;

Στρατηγικές άντλησης δεδομένων στο NextJS