چگونه یک فیلد فرم را با تاریخ امروز و جاوا اسکریپت یا JQuery از قبل پر کنید
در حالی که بسیاری از راهحلها فرصت ذخیره تاریخ را با هر ورودی فرم ارائه میدهند، زمانهای دیگری وجود دارد که این یک گزینه نیست. ما مشتریان خود را تشویق می کنیم که یک فیلد مخفی را به سایت خود اضافه کنند و این اطلاعات را همراه با ورودی ارسال کنند تا بتوانند زمان وارد شدن فرم را پیگیری کنند. با استفاده از جاوا اسکریپت، این کار آسان است.
نحوه پر کردن فیلد فرم با تاریخ امروز و جاوا اسکریپت
<!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 و جاوا اسکریپت ارائه شده را مرحله به مرحله تجزیه کنیم:
<!DOCTYPE html>
و<html>
: اینها اعلامیه های استاندارد HTML هستند که مشخص می کنند این یک سند HTML5 است.<head>
: این بخش معمولاً برای گنجاندن ابرداده در مورد سند، مانند عنوان صفحه وب، که با استفاده از<title>
عنصر<title>
: عنوان صفحه وب را روی «تاریخ پیش جمعیت با جاوا اسکریپت» تنظیم می کند.<body>
: این قسمت محتوای اصلی صفحه وب است که محتوای قابل مشاهده و عناصر رابط کاربری را در آن قرار می دهید.<form>
: یک عنصر فرم که می تواند شامل فیلدهای ورودی باشد. در این مورد، از آن برای حاوی فیلد ورودی پنهان استفاده می شود که با تاریخ امروز پر می شود.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: این یک فیلد ورودی مخفی است. در صفحه ظاهر نمی شود اما می تواند داده ها را ذخیره کند. شناسه "hiddenDateField" و نام "hiddenDateField" برای شناسایی و استفاده در جاوا اسکریپت به آن داده شده است.<script>
: این تگ باز برای بلوک اسکریپت جاوا اسکریپت است که می توانید کد جاوا اسکریپت را بنویسید.function getFormattedDate() { ... }
: این یک تابع جاوا اسکریپت به نام تعریف می کندgetFormattedDate()
. داخل این تابع:- جدید ایجاد می کند
Date
شی نشان دهنده تاریخ و زمان فعلی با استفاده ازconst today = new Date();
. - تاریخ را با استفاده از قالب مورد نظر (mm/dd/yyyy) به رشته ای تبدیل می کند
today.toLocaleDateString()
.'en-US'
آرگومان محلی (انگلیسی آمریکایی) را برای قالب بندی و شیء با را مشخص می کندyear
,month
وday
خواص فرمت تاریخ را مشخص می کند.
- جدید ایجاد می کند
return formattedDate;
: این خط تاریخ فرمت شده را به صورت رشته ای برمی گرداند.document.getElementById('hiddenDateField').value = getFormattedDate();
: این خط کد:- شما با استفاده از
document.getElementById('hiddenDateField')
برای انتخاب فیلد ورودی پنهان با شناسه "hiddenDateField". - تنظیم می کند
value
ویژگی فیلد ورودی انتخاب شده به مقدار بازگردانده شده توسطgetFormattedDate()
تابع. این فیلد پنهان را با تاریخ امروز در قالب مشخص شده پر می کند.
- شما با استفاده از
نتیجه نهایی این است که وقتی صفحه بارگیری می شود، فیلد ورودی پنهان با شناسه "hiddenDateField" با تاریخ امروز در قالب mm/dd/yyyy بدون صفرهای ابتدایی پر می شود، همانطور که در getFormattedDate()
تابع.
نحوه پر کردن فیلد فرم با تاریخ امروز و جی کوئری
<!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 و جاوا اسکریپت نحوه استفاده از jQuery را برای پر کردن یک فیلد ورودی مخفی با تاریخ امروز که به صورت mm/dd/yyyy قالببندی شده است، بدون صفرهای ابتدایی نشان میدهد. بیایید آن را مرحله به مرحله تجزیه کنیم:
<!DOCTYPE html>
و<html>
: اینها اعلامیه های استاندارد HTML هستند که نشان می دهد این یک سند HTML5 است.<head>
: این بخش برای گنجاندن ابرداده و منابع برای صفحه وب استفاده می شود.<title>
: عنوان صفحه وب را روی «پیشجمعیت تاریخ با شیء تاریخ jQuery و جاوا اسکریپت» تنظیم میکند.<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>
: این تگ آغازین برای بلوک اسکریپت جاوا اسکریپت است که می توانید کد جاوا اسکریپت را بنویسید.$(document).ready(function() { ... });
: این یک بلوک کد جی کوئری است. از آن استفاده می کند$(document).ready()
عملکردی برای اطمینان از اینکه کد موجود پس از بارگیری کامل صفحه اجرا می شود. داخل این تابع:const today = new Date();
جدید ایجاد می کندDate
شی نشان دهنده تاریخ و زمان فعلی است.const formattedDate = today.toLocaleDateString('en-US', { ... });
تاریخ را به رشته ای با فرمت دلخواه (mm/dd/yyyy) با استفاده ازtoLocaleDateString
روش.
$('#hiddenDateField').val(formattedDate);
فیلد ورودی مخفی را با شناسه "hiddenDateField" با استفاده از jQuery انتخاب می کند و آن را تنظیم می کند.value
به تاریخ قالب بندی شده این به طور موثر فیلد پنهان را با تاریخ امروز در قالب مشخص شده از قبل پر می کند.
کد jQuery فرآیند انتخاب و اصلاح فیلد ورودی مخفی را در مقایسه با جاوا اسکریپت خالص ساده می کند. هنگامی که صفحه بارگیری می شود، فیلد ورودی پنهان با تاریخ امروز در قالب mm/dd/yyyy پر می شود و هیچ صفر ابتدایی وجود ندارد، همانطور که در قسمت مشخص شده است. formattedDate
متغیر.