როგორ განვსაზღვროთ ფორმის ველი დღევანდელი თარიღით და 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">
: ეს არის დამალული შეყვანის ველი. ის არ ჩანს გვერდზე, მაგრამ შეუძლია შეინახოს მონაცემები. მას ენიჭება ID „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')
ფარული შეყვანის ველის ასარჩევად ID „hiddenDateField“. - ადგენს
value
არჩეული შეყვანის ველის თვისება დაბრუნებულ მნიშვნელობაზეgetFormattedDate()
ფუნქცია. ეს ავსებს დამალულ ველს დღევანდელი თარიღით მითითებულ ფორმატში.
- თქვენ გამოიყენოთ
საბოლოო შედეგი არის ის, რომ როდესაც გვერდი იტვირთება, დამალული შეყვანის ველი ID „hiddenDateField“ ივსება დღევანდელი თარიღით ფორმატში mm/dd/yyyy, წინა ნულების გარეშე, როგორც მითითებულია 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/yyyy, წინა ნულების გარეშე. მოდით დავშალოთ ის ეტაპობრივად:
<!DOCTYPE html>
მდე<html>
: ეს არის სტანდარტული HTML დოკუმენტის დეკლარაციები, რომლებიც მიუთითებს, რომ ეს არის HTML5 დოკუმენტი.<head>
: ეს განყოფილება გამოიყენება ვებგვერდის მეტამონაცემებისა და რესურსების ჩასართავად.<title>
: აყენებს ვებგვერდის სათაურს „თარიღის წინასწარი პოპულაცია jQuery-ით და JavaScript თარიღის ობიექტით“.<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“-ის ID და „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);
ირჩევს ფარული შეყვანის ველს ID-ით „hiddenDateField“ jQuery-ის გამოყენებით და ადგენს მისvalue
ფორმატირებულ თარიღამდე. ეს ეფექტურად ავსებს ფარულ ველს დღევანდელი თარიღით მითითებულ ფორმატში.
jQuery კოდი ამარტივებს ფარული შეყვანის ველის შერჩევისა და შეცვლის პროცესს სუფთა JavaScript-თან შედარებით. როდესაც გვერდი იტვირთება, დამალული შეყვანის ველი ივსება დღევანდელი თარიღით მმ/დდ/წწწწ ფორმატში და არ არსებობს წინა ნულები, როგორც ეს მითითებულია formattedDate
ცვლადი.