- Ώρα Ημερομηνίας
🧬 Συγκεντρώστε τα συστατικά
Ώρα Ημερομηνίας
ContributeΠοια είναι η Ημερομηνία Ώρα?
Εφαρμογή Ημερομηνίας Ώρα είναι ένα στοιχείο που επιτρέπει στους χρήστες να επιλέξουν μια ημερομηνία και ώρα από μια διεπαφή ημερολογίου και 24 ωρών, χρησιμοποιείται συνήθως σε μορφές ή διεπαφές εισαγωγής δεδομένων όπου ο χρήστης πρέπει να καθορίζει μια συγκεκριμένη ημερομηνία και ώρα.
Όταν ένα στοιχείο Ημερομηνία ώρα προστίθεται σε καμβά, εμφανίζει μια διεπαφή ημερολογίου και ρολογιού. Ο χρήστης μπορεί να πλοηγηθεί στο ημερολόγιο κάνοντας κλικ στο προηγούμενο ή τα επόμενα βέλη για να μετακινηθεί σε διαφορετικό μήνα, ή κάνοντας κλικ σε μια συγκεκριμένη ημερομηνία για να την επιλέξετε. Η διεπαφή ρολογιού εμφανίζει ώρες, λεπτά και δευτερόλεπτα που ο χρήστης μπορεί να ρυθμίσει μετακινώντας το δείκτη του ποντικιού ή χρησιμοποιώντας τα πάνω και κάτω βέλη.
Properties
Ημερομηνία Ώρα διαθέσιμες ιδιότητες. Η JavaScript μπορεί να γραφτεί για να διαβάσει ή να τροποποιήσει πληροφορίες σχετικά με τα στοιχεία.
| Ιδιότητες | Περιγραφή |
|---|---|
| Προεπιλεγμένη τιμή | Η αρχική τιμή του εξαρτήματος. Μπορείτε να αλλάξετε δυναμικά την αρχική τιμή πληκτρολογώντας JavaScript στην {{}}. |
| Μορφή | Μια έγκυρη συμβολοσειρά μορφής ημερομηνίας. Δείτε την ημέραJS. |
| Υποκατάστατο | Η τιμή θα εμφανίζεται όταν το πεδίο εισαγωγής είναι κενό. |
| Μέγιστη ημερομηνία | ορισμός της μέγιστης ημερομηνίας που ένας χρήστης μπορεί να επιλέξει από τη διεπαφή ημερολογίου. |
| Ελάχιστη ημερομηνία | καθορίστε την παλαιότερη ημερομηνία που ένας χρήστης μπορεί να επιλέξει από τη διεπαφή ημερολογίου. |
| Μέγεθος βήματος | το μέγεθος του βήματος σε μονάδα λεπτών |
| Ετικέτα | Το όνομα του πεδίου που εμφανίζεται στο χρήστη |
| Λεζάντα | Μια λεζάντα που χρησιμοποιείται για να περιγράψει λεπτομερώς το πεδίο |
| Κρυφή ετικέτα | Ορίστε αν θα εμφανίζεται η ετικέτα |
| Θέση | Ορίστε τη θέση της ετικέτας σε σχέση με το στοιχείο |
| Ευθυγράμμιση | Ορισμός της στοίχισης (στοίχιση αριστερά ή δεξιά) της ετικέτας |
| Width | Όταν η ετικέτα βρίσκεται στην αριστερή πλευρά του εξαρτήματος, ορίστε το λόγο πλάτους της ετικέτας. |
| Χειριστής Συμβάντων | Ερωτήματα ενεργοποίησης, έλεγχος εφαρμογών, ή κλήση άλλων API σε απόκριση σε συμβάντα εφαρμογής. |
| Απενεργοποιημένο | Ελέγξτε την κατάσταση του αν το στοιχείο είναι απενεργοποιημένο. Το στοιχείο δεν μπορεί να τροποποιηθεί ή να εστιαστεί όταν είναι απενεργοποιημένο. |
| Μόνο Για Ανάγνωση | Ελέγξτε την κατάσταση του αν το στοιχείο είναι μόνο για ανάγνωση. Ένα στοιχείο μόνο για ανάγνωση μπορεί να επιλεγεί και να εστιασθεί, αλλά δεν μπορεί να τροποποιηθεί. |
| Υπόδειξη | Οι χρήστες μπορούν να εισάγουν εδώ την υπόδειξη συστατικού. Η υπόδειξη θα εμφανίζεται όταν εστιάζεται. Υποστηρίζεται μορφή Markdown |
| Εμφάνιση κουμπιού καθαρισμού | ελέγχει αν εμφανίζεται ή όχι ένα κουμπί εκκαθάρισης στο πεδίο εισόδου |
| Υπόδειξη | Ο χρήστης μπορεί να εισαγάγει εδώ την υπόδειξη συστατικού. Η υπόδειξη θα εμφανίζεται όταν εστιάζεται. Υποστηρίζεται μορφή Markdown |
| Απαιτούμενο πεδίο | Ισχύει μόνο όταν ο διακόπτης είναι ενεργοποιημένος. |
| Προσαρμοσμένοι κανόνες | Δημιουργήστε εδώ τη λογική επικύρωσής σας. Οι κανόνες πρέπει να γίνονται σε JavaScript και να καλύπτονται από {}}. |
| Απόκρυψη μηνύματος επικύρωσης | Μπορείτε να αποκρύψετε το μήνυμα σφάλματος αλλάζοντας την κρυφή κατάσταση όταν η τιμή εισόδου είναι εσφαλμένη. Μπορείτε να αλλάξετε δυναμικά την κρυφή κατάσταση από JavaScript. |
| Πλήκτρο Δεδομένων Φόρμας | Καθορίστε ένα κλειδί ενός στοιχείου φόρμας περιτυλίγματος κατά την κατασκευή του χαρακτηριστικού δεδομένων. |
| Hidden | Δυναμική ρύθμιση της απόκρυψης του συστατικού. Μπορείτε να αλλάξετε την κρυφή κατάσταση μέσω της δυναμικής δυαδικής τιμής. |
| Χρώμα Θέματος | Επιτρέπει στους χρήστες να καθορίσουν το χρώμα φόντου και την αδιαφάνεια του κουμπιού |
Methods
Μπορείτε να χρησιμοποιήσετε άλλα στοιχεία για τον έλεγχο της εφαρμογής. Υποστηρίζουμε τις ακόλουθες τέσσερις μεθόδους:
- ορισμός
Για να ορίσετε την τιμή ημερομηνίας εισόδου, για παράδειγμα, {{“value1”}}
| Ιδιότητες | Περιγραφή |
|---|---|
| Τιμή | Input value |
- καθαρή αξία
Για να καθαρίσετε την τιμή του επιλεγμένου στοιχείου
- validate
Για να επιβεβαιωθεί ότι οι πληροφορίες εισόδου είναι νόμιμες
- clearValidate
Για να καθαρίσετε το μήνυμα επικύρωσης
Χειριστής συμβάντων
| Γεγονός | Περιγραφή |
|---|---|
| Αλλαγή | Όταν ένας χρήστης αλλάζει την επιλεγμένη τιμή ημερομηνίας, εκτελέστε συγκεκριμένη ενέργεια προσαρμοσμένη από τους χρήστες. |
Δεδομένα
Το στοιχείο έχει κάποια κοινώς χρησιμοποιούμενα δεδομένα, τα οποία μπορούν να κληθούν μέσω του {{componentName.propertyName}} στην εφαρμογή.
| Όνομα ιδιότητας | Περιγραφή |
|---|---|
| colorScheme | την ιδιότητα χρώματος της ημερομηνίας |
| Προσαρμοσμένος κανόνας | ο προσαρμοσμένος κανόνας που καθόρισε ο χρήστης |
| απενεργοποιημένο | μια δυαδική τιμή δείχνει την κατάσταση απενεργοποιημένης λειτουργίας |
| Εμφάνιση Ονόματος | το όνομα αυτού του στοιχείου (δηλαδή το κουμπί1) |
| συμβάντα | μια τιμή πίνακα για την ακολουθία συμβάντων |
| μορφή | το μορφότυπο της ημερομηνίας και της ώρας |
| formDataKey | Η κλείδα δεδομένων της ημερομηνίας |
| hidden | κρυφή κατάσταση (αληθής ή ψευδές) |
| hideValidationMessage | μια δυαδική τιμή δείχνει αν το μήνυμα επικύρωσης είναι κρυμμένο |
| ετικέτα | τιμή ετικέτας |
| labelΣτοίχιση | στοίχιση της ετικέτας διακόπτη (αριστερά ή δεξιά) |
| ετικέταΘέση | θέση του διακόπτη ετικέτας (αριστερά ή δεξιά) |
| ετικέταΠλάτος | ο ακέραιος αριθμός που αντιπροσωπεύει το πλάτος της ετικέτας. |
| ετικέταΠλήρης | μια δυαδική τιμή δείχνει αν η ετικέτα είναι πλήρης. |
| maxDate | η τιμή της μέγιστης ημερομηνίας |
| minDate | η τιμή της ελάχιστης ημερομηνίας |
| λεπτόΒήμα | ελάχιστη τιμή μεγέθους βήματος |
| placeholder | τιμή κράτησης θέσης |
| Μόνο για ανάγνωση | μια δυαδική τιμή δείχνει την έτοιμηΜόνο κατάσταση της εισαγωγής. |
| απαιτείται | μια δυαδική τιμή δείχνει την απαιτούμενη κατάσταση της εισόδου. |
| Εμφάνιση | μια δυαδική τιμή δείχνει ότι η ημερομηνία θα εμφανιστεί καθαρή |
| tooltipText | τιμή κειμένου υπόδειξης |
| τιμή | Τιμή ημερομηνίας και ώρας εισαγωγής |
| Επικύρωση μηνύματος | τιμή συμβολοσειράς για επικύρωση μηνύματος |
Παράδειγμα: {{dateTime1.value}}
Περίπτωση χρήσης
Στη συνέχεια, θα δείξουμε πώς να χαρτογραφήσουμε τα δεδομένα από την πηγή δεδομένων μέχρι την ώρα και να ορίσουμε την τρέχουσα ημερομηνία και ώρα με ένα κουμπί.
Βήμα 1 Προσθέστε μια ενέργεια
Επιτρέψτε μας να δημιουργήσουμε έναν πίνακα στο REST API που ονομάζεται promoteCodes, συμπεριλαμβανομένων 6 στηλών: code, id, createdAt, expiredAt, startedAt, updatedAt. Θα χρησιμοποιήσουμε το ενημερωμένο Κατά το χρόνο για τη χρήση δειγμάτων.
Στη συνέχεια, μπορούμε να δημιουργήσουμε μια νέα δράση για REST API από τη λίστα δράσης, λίστα όλων των δεδομένων σε promoteCodes και ονομάζεται restapi1.
Πατήστε Save και Run για να ενεργοποιήσετε αυτήν την ενέργεια.
Βήμα 2 Προσθήκη Συστατικών
Στη συνέχεια, μπορούμε να προσθέσουμε ένα στοιχείο date time και ένα button στοιχείο στον καμβά. Για την προεπιλεγμένη τιμή του στοιχείου ημερομηνίας, το ρυθμίσαμε ως τον τελευταίο χρόνο ενημέρωσης του πρώτου κώδικα προώθησης από τα δεδομένα υπόλοιπου api.
{{restapi1.data.promoteCodes[0].updatedAt}}Επισημάνουμε επίσης το κουμπί ως “Τώρα” όπως φαίνεται παρακάτω
Βήμα 3 Διαμόρφωση του εξαρτήματος
Για την εφαρμογή button μπορούμε να την ρυθμίσουμε ώστε να ορίζει την ημερομηνία σε date time component στην τρέχουσα ημερομηνία και ώρα.
- Στο χειριστή συμβάντων επεξεργασίας, επιλέξτε
Control componentεν ενεργεία, επιλέξτε το στοιχείοdate timeπου θέλετε να ενημερώσετε ως στόχο του γεγονότος. - Επιλέξτε την
setValueενέργεια και ορίστε την τιμή ως{{currentUserInfo.updatedAt}}
4Ο Στάδιο Δοκιμή
Τώρα που όταν κάνετε κλικ στο κουμπί “Τώρα”, η ώρα θα πρέπει να αλλάξει τη σημερινή ημερομηνία. Όσο για εδώ, έχουμε 2023-5-6 11:19:47 αλλά μπορεί να είναι διαφορετικό όταν το εξετάζετε.
