استفاده از تقویم فارسی MD.BootstrapPersianDateTimePicker در سایت با javascript ( بروزرسانی 1404 )
تقویم فارسی date picker – تقویم فارسی این امکان را می دهد که یک تاریخ شمسی مشخص را انتخاب کنیم .
نمونه آن انتخاب تاریخ در سایت های فروش بلیط و تور که تاریخی را برای حرکت از کاربر دریافت می کند .
با استفاده از کتابخانه MD.BootstrapPersianDateTimePicker تقویم فارسی را خواهیم ساخت .
index.html برای ساختار تقویم فارسی
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Rapidcode.iR - سورس کد</title>
<link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="static/css/lib/mds.bs.datetimepicker.style.css" />
<link rel="stylesheet" href="static/css/main.css">
</head>
<body>
<div class="container">
<a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>
<label class="h3 mb-3" for="persianDatapicker-text">تقویم فارسی </label>
<div class="input-group mb-3">
<span class="input-group-text cursor-pointer" id="persianDatapicker">📅</span>
<input dir="ltr" type="text" class="form-control text-center" placeholder="" data-name="persianDatapicker-text">
<input dir="ltr" type="text" class="form-control text-center" placeholder="" data-name="persianDatapicker-date">
</div>
</div>
<script src="static/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="static/js/lib/mds.bs.datetimepicker.js"></script>
<script src="static/js/app.js"></script>
</body>
</html>
به طور کلی کتابخانه در فایل app.js نیاز به تنظیم دارد نیازی نیست که همانند پایین تمامی قسمت های تقویم را مقدار دهی کنیم و برخی از گزینه ها همان مقدار پیشفرض کافی است اما سعی داریم که با تمامی قسمت های قابل تنظیم تقویم آشنایتان کنیم .
فایل app.js
window.addEventListener("load" , function () {
const dtp1Instance = new mds.MdsPersianDateTimePicker(document.getElementById("persianDatapicker"), {
targetTextSelector: '[data-name="persianDatapicker-text"]',
targetDateSelector: '[data-name="persianDatapicker-date"]',
persianNumber : true,
enableTimePicker: true,
textFormat : "yyyy/MM/dd HH:mm:ss",
dateFormat : "yyyy/MM/dd"
});
});
خروجی برنامه تقویم فارسی ( نتیجه )
همچنین در صورتی که قصد نمایش تقویم به همراه تمامی مناسبت ها داخل سایت تان را دارید می توانید از این آموزش .
و در صورتی که می خواهید تاریخ میلادی را به شمسی یا برعکس تبدیل کنید این آموزش به کارتان می آید .
لیست نظرات
سلام وقت بخیر با توجه به سی روزه بودن اسفند تمام روزهای سال 1404 یک روز جلو افتاده
درود ، ممنون از اطلاع رسانی . آموزش بروز شد .
سلام سال 1403 کبیسه است ولی نمایش نمی دهد آیا تنظیم خاصی دارد
درود ، داکیومنت رو باید بررسی کنید .
date picker فارسی برای انتخاب سال تولد (استاتیک) سورس کدی میشناسی؟
از خود این کتابخانه هم میشه استفاده کرد اما کتابخانه مناسب تر kamaDatePicker هست .
سلام ، از زحمات شما ممنونم. چطور می تونم تقویم رو به صورت inline در صفحه استفاده کنم؟ یعنی داخل صفحه به صورت پیش فرض یه جایی قرار بگیره و نیاز نباشه که جایی کلیک بشه که باز بشه
درود
{"inline": false}سلام خسته نباشید چطور میتونم تایم استمپ دریافت کنم و اینکه ساعت رو دیفالت روی 12 شب قرار بدم
درود ، برای دریافت timestamp باید
و برای اینکه زمان رو روی 12 شب به طور پیشفرض قرار بدیدو مقدار value در تگ input به شکلقرار بدید .با سلام من اسکریپت crm rise و فارسی کردم، فقط بخش date picker اون مانده ، چطور باید اون قسمت از تقویم و فارسی کنم ؟ با سپاس
درود ، باید با api این اسکریپت آشنایی خوبی داشته باشید که بتونید بدون مشکل تغییرات رو اعمال کنید .
سلام خسته نباشید. من نیاز دارم توی یک فرم از چندین تقویم استفاده کنم و فقط تقویم اولی درست کار میکنه و الباقی تقویم ها به صورت تکست باکس هستند. باید چه کاری انجام بدم؟
درود ، هر input باید id منحصر خود را داشته و سپس اقدام به نمونه سازی تقویم کنید