Πώς να συμπληρώσετε εκ νέου ένα πεδίο φόρμας με τη σημερινή ημερομηνία και JavaScript ή JQuery
Ενώ πολλές λύσεις προσφέρουν την ευκαιρία αποθήκευσης της ημερομηνίας με κάθε καταχώριση φόρμας, υπάρχουν και άλλες φορές που δεν αποτελεί επιλογή. Ενθαρρύνουμε τους πελάτες μας να προσθέσουν ένα κρυφό πεδίο στον ιστότοπό τους και να περάσουν αυτές τις πληροφορίες μαζί με την καταχώριση, ώστε να μπορούν να παρακολουθούν πότε εισάγονται καταχωρίσεις φόρμας. Χρησιμοποιώντας JavaScript, αυτό είναι εύκολο.
Πώς να συμπληρώσετε εκ νέου ένα πεδίο φόρμας με τη σημερινή ημερομηνία και JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Date Prepopulation with JavaScript</title>
</head>
<body>
<form>
<!-- Hidden field for the date -->
<input type="hidden" id="hiddenDateField" name="hiddenDateField">
</form>
<script>
// Function to get today's date in the desired format
function getFormattedDate() {
const today = new Date();
const formattedDate = today.toLocaleDateString('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
});
return formattedDate;
}
// Use JavaScript to set the value of the hidden field to today's date
document.getElementById('hiddenDateField').value = getFormattedDate();
</script>
</body>
</html>
Ας αναλύσουμε τον παρεχόμενο κώδικα HTML και JavaScript βήμα προς βήμα:
<!DOCTYPE html>
και<html>
: Πρόκειται για τυπικές δηλώσεις εγγράφων HTML που προσδιορίζουν ότι πρόκειται για έγγραφο HTML5.<head>
: Αυτή η ενότητα χρησιμοποιείται συνήθως για να συμπεριλάβει μεταδεδομένα σχετικά με το έγγραφο, όπως ο τίτλος της ιστοσελίδας, ο οποίος ορίζεται χρησιμοποιώντας το<title>
στοιχείο.<title>
: Αυτό ορίζει τον τίτλο της ιστοσελίδας σε "Προπληθυσμός ημερομηνίας με JavaScript".<body>
: Αυτή είναι η κύρια περιοχή περιεχομένου της ιστοσελίδας όπου τοποθετείτε το ορατό περιεχόμενο και τα στοιχεία διεπαφής χρήστη.<form>
: Ένα στοιχείο φόρμας που μπορεί να περιέχει πεδία εισαγωγής. Σε αυτήν την περίπτωση, χρησιμοποιείται για να περιέχει το κρυφό πεδίο εισαγωγής που θα συμπληρωθεί με τη σημερινή ημερομηνία.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Αυτό είναι ένα κρυφό πεδίο εισαγωγής. Δεν εμφανίζεται στη σελίδα, αλλά μπορεί να αποθηκεύσει δεδομένα. Του δίνεται ένα αναγνωριστικό του "hiddenDateField" και ένα όνομα του "hiddenDateField" για αναγνώριση και χρήση σε JavaScript.<script>
: Αυτή είναι η ετικέτα ανοίγματος για ένα μπλοκ σεναρίου JavaScript, όπου μπορείτε να γράψετε κώδικα JavaScript.function getFormattedDate() { ... }
: Αυτό ορίζει μια συνάρτηση JavaScript που ονομάζεταιgetFormattedDate()
. Μέσα σε αυτή τη λειτουργία:- Δημιουργεί ένα νέο
Date
αντικείμενο που αντιπροσωπεύει την τρέχουσα ημερομηνία και ώρα χρησιμοποιώνταςconst today = new Date();
. - Μορφοποιεί την ημερομηνία σε μια συμβολοσειρά με την επιθυμητή μορφή (μμ/ηη/εεεε) χρησιμοποιώντας
today.toLocaleDateString()
. ο'en-US'
Το όρισμα καθορίζει την τοπική ρύθμιση (αμερικανικά αγγλικά) για τη μορφοποίηση και το αντικείμενο μεyear
,month
, ναday
ιδιότητες ορίζει τη μορφή ημερομηνίας.
- Δημιουργεί ένα νέο
return formattedDate;
: Αυτή η γραμμή επιστρέφει τη μορφοποιημένη ημερομηνία ως συμβολοσειρά.document.getElementById('hiddenDateField').value = getFormattedDate();
: Αυτή η γραμμή κώδικα:- μπορείτε να χρησιμοποιήσετε
document.getElementById('hiddenDateField')
για να επιλέξετε το κρυφό πεδίο εισαγωγής με το αναγνωριστικό "hiddenDateField". - Ορίζει το
value
ιδιότητα του επιλεγμένου πεδίου εισαγωγής στην τιμή που επιστρέφεται από τοgetFormattedDate()
λειτουργία. Αυτό συμπληρώνει το κρυφό πεδίο με τη σημερινή ημερομηνία στην καθορισμένη μορφή.
- μπορείτε να χρησιμοποιήσετε
Το τελικό αποτέλεσμα είναι ότι όταν φορτώνεται η σελίδα, το κρυφό πεδίο εισαγωγής με αναγνωριστικό "hiddenDateField" συμπληρώνεται με τη σημερινή ημερομηνία στη μορφή μμ/ηη/εεεε χωρίς αρχικά μηδενικά, όπως ορίζεται στο getFormattedDate()
λειτουργία.
Πώς να συμπληρώσετε εκ νέου ένα πεδίο φόρμας με τη σημερινή ημερομηνία και το jQuery
<!DOCTYPE html>
<html>
<head>
<title>Date Prepopulation with jQuery and JavaScript Date Object</title>
<!-- Include jQuery from a CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form>
<!-- Hidden field for the date -->
<input type="hidden" id="hiddenDateField" name="hiddenDateField">
</form>
<script>
// Use jQuery to set the value of the hidden field to today's date
$(document).ready(function() {
const today = new Date();
const formattedDate = today.toLocaleDateString('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
});
$('#hiddenDateField').val(formattedDate);
});
</script>
</body>
</html>
Αυτός ο κώδικας HTML και JavaScript δείχνει πώς να χρησιμοποιήσετε το jQuery για να συμπληρώσετε εκ των προτέρων ένα κρυφό πεδίο εισαγωγής με τη σημερινή ημερομηνία, μορφοποιημένο ως mm/dd/εεεε, χωρίς μηδενικά. Ας το αναλύσουμε βήμα βήμα:
<!DOCTYPE html>
και<html>
: Πρόκειται για τυπικές δηλώσεις εγγράφων HTML που υποδεικνύουν ότι πρόκειται για έγγραφο HTML5.<head>
: Αυτή η ενότητα χρησιμοποιείται για τη συμπερίληψη μεταδεδομένων και πόρων για την ιστοσελίδα.<title>
: Ορίζει τον τίτλο της ιστοσελίδας σε "Προπληθυσμός ημερομηνίας με αντικείμενο jQuery και JavaScript Date".<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Αυτή η γραμμή περιλαμβάνει τη βιβλιοθήκη jQuery καθορίζοντας την πηγή της από ένα δίκτυο παράδοσης περιεχομένου (CDN). Διασφαλίζει ότι η βιβλιοθήκη jQuery είναι διαθέσιμη για χρήση στην ιστοσελίδα.<body>
: Αυτή είναι η κύρια περιοχή περιεχομένου της ιστοσελίδας όπου τοποθετείτε το ορατό περιεχόμενο και τα στοιχεία διεπαφής χρήστη.<form>
: Ένα στοιχείο φόρμας HTML που χρησιμοποιείται για να περιέχει πεδία εισαγωγής. Σε αυτήν την περίπτωση, χρησιμοποιείται για την ενθυλάκωση του κρυφού πεδίου εισαγωγής.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Ένα κρυφό πεδίο εισαγωγής που δεν θα είναι ορατό στην ιστοσελίδα. Του έχει εκχωρηθεί ένα αναγνωριστικό του "hiddenDateField" και ένα όνομα του "hiddenDateField".<script>
: Αυτή είναι η ετικέτα ανοίγματος για ένα μπλοκ σεναρίου JavaScript όπου μπορείτε να γράψετε κώδικα JavaScript.$(document).ready(function() { ... });
: Αυτό είναι ένα μπλοκ κώδικα jQuery. Χρησιμοποιεί το$(document).ready()
λειτουργία για να διασφαλίσει ότι ο κώδικας που περιέχεται εκτελείται μετά την πλήρη φόρτωση της σελίδας. Μέσα σε αυτή τη λειτουργία:const today = new Date();
δημιουργεί ένα νέοDate
αντικείμενο που αντιπροσωπεύει την τρέχουσα ημερομηνία και ώρα.const formattedDate = today.toLocaleDateString('en-US', { ... });
μορφοποιεί την ημερομηνία σε μια συμβολοσειρά με την επιθυμητή μορφή (μμ/ηη/εεεε) χρησιμοποιώντας τοtoLocaleDateString
μέθοδος.
$('#hiddenDateField').val(formattedDate);
επιλέγει το κρυφό πεδίο εισαγωγής με το αναγνωριστικό "hiddenDateField" χρησιμοποιώντας jQuery και ορίζειvalue
στη μορφοποιημένη ημερομηνία. Αυτό ουσιαστικά συμπληρώνει εκ των προτέρων το κρυφό πεδίο με τη σημερινή ημερομηνία στην καθορισμένη μορφή.
Ο κώδικας jQuery απλοποιεί τη διαδικασία επιλογής και τροποποίησης του κρυφού πεδίου εισαγωγής σε σύγκριση με την καθαρή JavaScript. Όταν φορτώνεται η σελίδα, το κρυφό πεδίο εισαγωγής συμπληρώνεται με τη σημερινή ημερομηνία σε μορφή μμ/ηη/εεεε και δεν υπάρχουν μηδενικά στην αρχή, όπως καθορίζεται στο formattedDate
μεταβλητός.