www.dntips.ir
مطالب ۳۶۹۴
نویسندگان ۲۷۶
گروه‌های مطالب ۱۰۲۴
نقشه‌های راه ۱۱۹
دوره‌ها ۱۴
اشتراک‌ها ۱۷۹۱۴
عنوان:

‫PersianDatePicker یک DatePicker شمسی به زبان JavaScript که از تاریخ سرور استفاده می‌کند


نویسنده: رحمت اله رضایی
تاریخ: ۱۳۹۲/۰۳/۲۶ ۱۲:۵
آدرس: www.dntips.ir
PersianDatePicker  یک DatePicker شمسی برای نمایش تاریخ شمسی در صفحات وب است.

مهمترین ویژگیها :
  • از تاریخ سرور برای نمایش روز جاری استفاده می‌کند.
  • به زبان جاوااسکریپت است و نیازی به سایر فریمورک‌ها مانند jQuery ندارد.
  • سبک و کم حجم است (3.5 کیلوبایت)
  • روزها به صورت عمودی لیست شده‌اند مانند برنامه هفتگی مدرسه که کاربران فارسی‌زبان با آن راحت‌ترند.

طرز استفاده :

PersianDatePicker.Show(textBox, today)
textBox : کنترلی است که DatePicker برای آن نمایش داده می‌شود.
today : تاریخ روز جاری است.

برای مثال :
<html>
<head>
    <script type="text/javascript" src="Scripts/PersianDatePicker.min.js"></script>
    <link type="text/css" rel="stylesheet" href="Content/PersianDatePicker.min.css" />
</head>
<body>
    <input type="text" onclick="PersianDatePicker.Show(this, '1392/03/22');" />
</body>
</html>

در ASP.NET Web Forms :
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication4.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/PersianDatePicker.min.js"></script>
    <link href="Content/PersianDatePicker.min.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label runat="server" Text="Label" AssociatedControlID="TextBox1">تاریخ : </asp:Label>
            <asp:TextBox  runat="server" ID="TextBox1"></asp:TextBox>
        </div>
    </form>
</body>
</html>

public partial class WebForm1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        var now = PersianDateTime.Now;
        var today = now.ToString(PersianDateTimeFormat.Date);

        TextBox1.Attributes["onclick"] = "PersianDatePicker.Show(this,'" + today + "');";
    }
}

در مثال بالا برای گرفتن تاریخ روز جاری از PersianDateTime استفاده شده است. 

در ASP.NET MVC یا PHP یا هر زبان دیگری کافیست onclick کنترل متنی مورد نظر در سمت سرور مانند مثال بالا مقدار داده شود. یا می‌توان image کوچکی کنار textbox مورد نظر قرار داد و onclick آن تنظیم شود.

برای استفاده از PersianDatePicker می‌توانید آنرا از NuGet دریافت کنید :
PM> Install-Package PersianDatePicker

همچنین یک مثال کامل ASP.NET MVC آن‌را می‌توانید از اینجا دریافت کنید:
MvcAppPersianDatePicker.zip   
مطالب مشابه

نظرات

  • وحید نصیری در ۱۳۹۲/۰۳/۲۶ ۱۲:۱۴
    بسیار عالی. مزیت کار شما به تقویم‌های نمونه دیگر ، سورس باز بودن آن است (نمونه غیرفشرده هم لحاظ شده). ضمنا یکی از مواردی که می‌تونه در تهیه ایده برای تولید یک محصول بهتر و پخته‌تر کمک کنه مراجعه به مشکلات و نظرات کتابخانه‌های مشابه است. مثلا همان تقویم لینک داده شده، قسمت نظراتش پر است از ایده برای کسانی که بخواهند یک کار خیلی پخته رو در این زمینه تکمیل کنند؛ بر اساس نیازهای واقعی استفاده کننده‌ها.
    • رحمت اله رضایی در ۱۳۹۲/۰۳/۲۶ ۱۲:۳۳
      بله درست است و امیدوارم در آینده به کمک دیگران توسعه داده شود.
  • مرادیان در ۱۳۹۲/۰۳/۲۶ ۱۳:۵۰

    سلام؛ میخوام بدونم چجوری یه رویداد مثل onclick  یه شیء مثل textbox رو تو mvc مدیریت می‌کنن مثلا نمایش همین  datepicker (ناگفته نمونه تا بخش هشتم از آموزش mvc شما رو مطالعه کردم)

    بسیار ممنون

    • وحید نصیری در ۱۳۹۲/۰۳/۲۶ ۱۳:۵۶
      با مقدار دهی HTML attributes اینکار امکان پذیر است:
      @Html.TextBox("DateCreated", "", new { onclick="alert('yes')"} )
  • حمیدرضا معینی در ۱۳۹۲/۰۳/۲۶ ۱۹:۱۵
    کاربرد پارامتر dayOfWeek چیست؟ مثلاً در مثال فوق که 1392/03/22 برابر روز چهارشنبه است، می‌توان dayOfWeek را برابر 2 ارسال کرد یعنی این روز دوشنبه است؟ 
    • رحمت اله رضایی در ۱۳۹۲/۰۳/۲۶ ۱۹:۵۴
      - شماره روز جاری در هفته است. شماره سایر روزها در هفته از روی آن تعیین می‌شود.
      - بله اگر آنرا برابر 2 قرار دهید یعنی روز جاری دوشنبه است.
  • رحمت اله رضایی در ۱۳۹۲/۰۳/۲۶ ۲۱:۶
    بروزرسانی شد (نسخه 1.1) : پارامتر todayWeekDay حذف شد.
  • مهمان در ۱۳۹۲/۰۳/۳۱ ۱۰:۵۶
    یک تقویم دیگر
    بر پایه دات نت بصورت کنترل در دات نت
    https://zebradatepickerdotnet.codeplex.com/
    سبک، ساده، شبیه تقویم ویندوز 7 برای انتخاب سال و ماه و روز

    با کتابخانه فارسی تبدیل تاریخ و ....
    بر پایه
    http://stefangabos.ro/jquery/zebra-datepicker/#download 
  • بهمن خلفی در ۱۳۹۲/۰۴/۰۴ ۰:۲۸
    با سلام و تشکر
    برخی از امکاناتی که تقویم‌های مشابه دارند که اگر در این تقویم هم پیش بینی شود بهتر است.
    تقویم با jQuery به فرموده آقای یوسفی : محدود کردن انتخاب تاریخ
    یا تقویم ترجمه آقای هاشمی نژاد : انتخاب تاریخ‌های محدود بین دو تاریخ

    بنده میخواستم نظرم را به عنوان بازخورد ثبت کنم ولی فکر کردم اینجا ثبت کنم بهتره
    اینکه datepicker رو به datetimepicker تبدیل کنیم
    بتوانیم یک نمونه یا راهنمای توسعه برای همکاران جهت ادامه راه پرارزش شما ارائه دهیم.
    محصول را با برخی از ابزارهای معروف مانند KENDO UI  یا Telerik  که مصرف کنندگان بسیار زیادی دارند مقایسه کنیم و امکاناتشان را در کنار هم تشریح کنیم
    • رحمت اله رضایی در ۱۳۹۲/۰۴/۰۵ ۱:۳۸
      - در نسخه بعدی تغییراتی مثل محدود کردن انتخاب تاریخ  و انتخاب ساده‌تر سال و ماه در نظر گرفته شده است.
      • پهلوانی در ۱۳۹۲/۰۴/۱۳ ۲۰:۲۷

        با سلام و تشکر

        از  این DataPicker  استفاده کردم  ولی:

        1- به چه صورت از یک دکمه برای نمایش تقویم و نمایش تاریخ انتخابی در TexBox استفاده کنیم

        2-در حالت عادی دکمه‌های برگشت ماه و سال درست نمایش داده نمی‌شوند و در حالت Compatibility View دکمه‌ها درست دیده می‌شوند

        • محسن خان در ۱۳۹۲/۰۴/۱۴ ۱۳:۵۶

          شما حتی در ویندوز XP هم مجبور نیستی از IE 8 استفاده کنی. فایرفاکس و کروم روی XP راحت نصب می‌شن

        • رحمت اله رضایی در ۱۳۹۲/۰۴/۱۵ ۲۳:۵۲
          - کافیست در onclick دکمه کنار textbox، تابع PersianDatePicker.Show را صدا بزنید. البته پارامتر اول آن باید به textbox اشاره داشته باشد.
          - نرم‌افزار فشرده ساز، ;gt& را حذف کرده و به جای آن < قرار داده که در بعضی نسخه‌های IE به خاطر همسانی با کاراکتر انتهای تگ، نمایش داده نمی‌شود. در نسخه بعدی این مورد اصلاح خواهد شد (فعلا گرفتارم).
  • سیروان در ۱۳۹۲/۰۵/۰۲ ۱۱:۴۵
    مرسی از تقویمتون ولی اگه بخوام مقدار میلادی روهم داشته باشم چیکار کنم
    با تشکر
    • رحمت اله رضایی در ۱۳۹۲/۰۵/۰۶ ۸:۵۹
      در سمت سرور، کافیست تاریخ شمسی را تبدیل کنید.
  • مهمان در ۱۳۹۲/۰۵/۰۵ ۱۹:۵۸
    برای استفاده از این برای مقدار دهی به یک پروپرتی از یک مدل تو mvc تایپ اون فیلد رو چی باید در نظر بگیرم؟
       public DateTime deliveryDate { get; set; }
    الان وقتی با این دستور اسکریپت رو فراخوانی می‌کنم فقط قالب datepicker رو می‌بینم روزا رو نمی‌بینم. اگر میشه راهنماییم کنید. ممنون
     @Html.TextBoxFor(model => model.deliveryDate,
 new { @id = "TextBox1",onclick = "PersianDatePicker.Show(this,'PersianDateTime.Now.now.ToString(PersianDateTimeFormat.Date)')" })
    • وحید نصیری در ۱۳۹۲/۰۵/۰۵ ۲۱:۱۸
      - این کنترل (و مشابهات آن) یک رشته تاریخ شمسی را بر می‌گردانند. اگر نیاز است مقدار آن به DateTime میلادی انتساب داده شود، باید از یک model binder سفارشی برای اینکار در ASP.NET MVC استفاده کنید. یک نمونه پیاده سازی شده آن‌را در بحث PersianDateModelBinder می‌توانید مشاهده و استفاده کنید.
      - در کدی که نوشتید یک now اضافه است. همان Now اول کافی است.
  • مهمان در ۱۳۹۲/۰۵/۱۳ ۱۰:۵۰
    باسلام
    ضمن تشکر  در ie8 هنگام اجرا بر روی s.onchange در PersianDatePicker.min.js پیام خطا
     Microsoft JScript runtime error: Object doesn't support this property or method
    میدهد.
  • مهمان در ۱۳۹۲/۰۵/۱۶ ۱۸:۵۸
    سلام
    چرا موقع نمایش برای من به جای نام ماه undefined را نمایش می‌دهد و با زدن کلید چپ و راست درست میشه ؟
  • مهمان در ۱۳۹۲/۰۶/۲۱ ۱۴:۳۲
    سلام.
    اگر تاریخ انتخابی از تقویم 31 اردیبهشت، 31 تیر و یا 31 شهریور باشد، در سمت کنترلر مقدار null بر میگرداند. ممنون از زحمات شما.
  • مهمان در ۱۳۹۲/۰۶/۲۵ ۱۰:۷
    سلام
    برای من هم در قسمت نمایش ماه‌ها undefined نشون می‌ده
    • وحید نصیری در ۱۳۹۳/۰۳/۰۹ ۱۸:۴۰
      علت اینجا است که ماه را دو رقمی محاسبه کرده‌است.
      اگر از ماه یک رقمی استفاده کنید، دراپ داون ماه‌های آن undefined نمایش داده می‌شود.
  • مجید_فاضلی نسب در ۱۳۹۲/۰۸/۰۳ ۱۹:۳
    سلام و خسته نباشین
    فقط فرمت PersianDateTimeFormat.Date متد ToString() کار میکنه و بقیه فرمت‌ها کار نمی‌کنن.
  • مهمان در ۱۳۹۲/۰۹/۱۴ ۲۳:۳۸
    با سلام
    در هنگام نصب پکیج، چه با استفاده از کنسول و چه با استفاده از واسطِ گرافیکی، خطای زیر رخ می‌دهد:
    Id is required
    version is required
    Author is required
    description is required

  • هادی دانش پژوه در ۱۳۹۳/۰۲/۲۷ ۱۸:۴۴
    با سلام
    کنترل زیبایی درست کردیند، ممنون
    ولی چرا وقتی روی تاریخی کلیک میکنم Object expected  میده

    و برای تغییر ماه و سال هم چند بار باید کلیک کرد.
    البته این مشکل فقط در IE وجود داره ، در نسخه 8  و 11 تست کردم
    • هادی دانش پژوه در ۱۳۹۳/۰۲/۲۷ ۱۹:۱۷
      مثل اینکه خودم تونستم درستش کنم!  :)
      فقط تو قسمتی که خطا میده try catch گذاشتم! الان بدرستی کار میکنه،
      اینم فایل اصلاح شده:PersianDatePicker.min.js 
      • وحید نصیری در ۱۳۹۳/۰۳/۰۹ ۱۸:۳۸
        متد setValue است که نیاز است اصلاح شود:
            function setValue(date) {
        _textBox.value = date;
        _textBox.focus();
        hide();
        try {
            _textBox.onchange();
        }catch(ex) {}
    }
  • مهمان در ۱۳۹۳/۰۳/۰۹ ۱۶:۵۰
    با سلام؛ من از persiandatapicker در mvc به شکل زیراستفاده می‌کنم:
     "ReleaseDate" "" new "PersianDatePicker.Show();" } )
    در قالب ویو هم فایل‌های جی کوئری را اضافه کردم اما بازهم موقع کلیک در تکست باکس خطا میدهد که persiandatapicker وجود ندارد. اگه میشه استفاده persiandatapicker را در mvc با مثال توضیح دهید. ممنون
    • وحید نصیری در ۱۳۹۳/۰۳/۰۹ ۱۸:۳۶
      با فرض اینکه layout برنامه تعاریف لازم را دارد:
      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="~/Content/PersianDatePicker.css" rel="stylesheet" />
</head>
<body>
    @RenderBody()
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/PersianDatePicker.js"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>
      فایلی را به نام PersianDatePicker.cshtml در مسیر Views\Shared\EditorTemplates ایجاد کنید؛ با این محتوا:
      @using System.Globalization
@model DateTime?
@{
    Func<DateTime, string> toPersianDate = date =>
    {
        var dateTime = new DateTime(date.Year, date.Month, date.Day, new GregorianCalendar());
        var persianCalendar = new PersianCalendar();
        return persianCalendar.GetYear(dateTime) + "/" + 
               persianCalendar.GetMonth(dateTime).ToString("00") + "/" + 
               persianCalendar.GetDayOfMonth(dateTime).ToString("00");
    };
    var today = toPersianDate(DateTime.Now);
    var name = this.ViewContext.ViewData.ModelMetadata.PropertyName;
    var value = Model.HasValue ? toPersianDate(Model.Value) : string.Empty;
}
<input type="text" dir="ltr" 
       name="@name" id="@name" 
       value="@value" 
       onclick="PersianDatePicker.Show(this,'@today');" />
      بعد از این تنها کاری که باید انجام شود، استفاده از ویژگی UIHint است:
      // Location: Views\Shared\EditorTemplates\PersianDatePicker.cshtml
[UIHint("PersianDatePicker")]
public DateTime AddDate { set; get; }
      به صورت خودکار به متد EditorFor اعمال می‌شود:
      <div>
    <label>تاریخ:</label>
    @Html.EditorFor(model => model.AddDate)
</div>

      همچنین اگر نیاز است مقدار رشته تاریخ شمسی آن به یک DateTime میلادی انتساب داده شود (در حین ارسال اطلاعات به سرور)، باید از یک model binder سفارشی برای اینکار در ASP.NET MVC استفاده کنید. یک نمونه پیاده سازی شده آن‌را در بحث PersianDateModelBinder می‌توانید مشاهده و استفاده کنید. 
      • سارا محمدی در ۱۳۹۳/۰۳/۱۷ ۲۲:۳۹

        باسلام وتشکر

        من دقیقا همین کارها را انجام دادم اما موقع ذخیره تاریخ خطای زیر را میدهد

        The conversion of a datetime2 data type to a datetime data type resulted in an out-of-range value.
        The statement has been terminated

        مثل اینکه فرمت تاریخ و ساعتی که خروجی persiandatapicker است را نمی‌تواند ذخیره کند

        ممنون از توجهتون

        • وحید نصیری در ۱۳۹۳/۰۳/۱۷ ۲۲:۵۳
          با فرض فعال سازی و ثبت PersianDateModelBinder، این خطا زمانی حاصل می‌شود که یک فیلد datetime مقدار دهی نشده را بخواهید در بانک اطلاعاتی ذخیره کنید. نوع datetime در دات نت value type است و مقدار پیش فرض آن 0001-01-01 است (DateTime.MinValue) که قابل ذخیره سازی در بانک اطلاعاتی نیست. یا فیلد را nullable تعریف کنید (هم در سمت کدها و هم در سمت بانک اطلاعاتی) و یا حتما هنگام ذخیره سازی اطلاعات، آن‌را مقدار دهی کنید تا مقدار پیش فرض خود را نداشته باشد.
      • مهدی ملائیان در ۱۳۹۵/۱۱/۰۹ ۱۶:۱۱
        باتشکر.آیا UIHint تنها در زمان استفاده از EditorFor اعمال می‌شود؟ چون در جاهائی که DisplayFor استفاده کردم تبدیل انجام نشد.
        • وحید نصیری در ۱۳۹۵/۱۱/۰۹ ۱۷:۳۹
          در مورد تفاوت مسیر Views/Shared/DisplayTemplates و Views\Shared\EditorTemplates در مطلب « ASP.NET MVC #12» بیشتر بحث شده‌است.
      • کیان سبزی در ۱۳۹۸/۰۶/۰۸ ۱۰:۴۹
        شما فرمودید که برای انتساب رشته تاریخ شمسی به یک DateTime میلادی از modelbinder سفارشی استفاده بشه. که یک نمونه رو اشاره کردید که البته برای دات نت mvc هستش و آیا میشه از اون در نسخه دات نت core mvc استفاده کرد؟
  • مهمان در ۱۳۹۳/۰۴/۱۲ ۱۲:۴۹
    ایول.از وقتی کامپوننت شما رو دیدم datepicker تلریک و jquery از چشمم افتاده. به سادگی کار کردن با یه input میشه باهاش زندگی کرد.هم سمت کلاینت هم سمت سرور میشه راحت بهش دسترسی پیدا کرد و مقدار اولیه داد. تازه راه اندازی اش هم آسونه و عین jquery نیست که یه فایل به صفحه اضافه کنی مجبور شی همه صفحه رو بالا پایین کنی.
    در کل خدا اجرتون بده. 
    • نقوی در ۱۳۹۳/۰۹/۱۱ ۱۵:۲
      با تشکر از کنترل خوبتون
      من از این کنترل توی پروژه‌ی ام وی سی خودم استفاده کردم این کنترل توی مرورگر‌های کروم و IE به درستی کار میکنه
      ولی توی فایرفاکس دکمه هاش کار نمیکنن و وقتی دکمه ایی فشار داده میشه کنترل بسته میشه
      • وحید نصیری در ۱۳۹۳/۰۹/۱۱ ۱۷:۵۶
        - مشکلی با فایرفاکس مشاهده نشد.
        - نکته‌ی UIHint ایی که کمی بالاتر توضیح داده شد، مثال کاملش را از اینجا دریافت کنید: MvcAppPersianDatePicker.zip
        • نقوی در ۱۳۹۳/۰۹/۱۵ ۱۹:۵۰
          بسیار ممنون از مثالی که گذاشتین. حق با شماست با فایر فاکس مشکلی نبود.
          مشکل من حالت خاصیه که ازش استفاده کردم. من تو دیالوگ modal جی کوئری یو آی از این کتترل استفاده کردم و تو این حالت خاص این مشکل رو داره احتمالا جاوااسکریپتش یه جا کانفلیکت میده.
          • محسن خان در ۱۳۹۳/۰۹/۱۵ ۲۳:۴۴
            اگر z-index یک popup بیشتر از المانی باشه، اون popup هست که لایه رویی قابل کلیک رو تشکیل می‌ده.
            • عماد آرمون در ۱۳۹۳/۱۰/۰۱ ۱۹:۲۴
              سلام
              من هم با این مسئله مشکل دارم، وقتی از این کامپوننت در یک Dialog که Modal هست استفاده می‌کنم، دیگه دکمه‌های کامپوننت کار نمی‌کنن و با کلیک روی اون‌ها ، کامپوننت بسته میشه
              برای رفع مشکل ، z-index ش رو هم بالا بردم، ولی بازم درست نشد. توی یه دیالوگ z-index صفحه کدر پس زمینه 100 هست و z-index خود دیالوگ هم 101 هست. من خیلی بالاتر از این ارقام هم به دیالوگم دادم، حتی به تک تک دکمه‌های توی دیالوگ هم دادم، ولی بازم همون مشکل پابرجا هست.
              کسی راه حلی سراغ نداره؟
              • وحید نصیری در ۱۳۹۳/۱۰/۰۲ ۱:۲۲
                با فرم‌های مودال بوت استرپ 3، در دو حالت in-line و remote آزمایش شد؛ مشکلی نبود.
                مثال بررسی شده: MvcAppPersianDatePicker-2.zip
                • عماد آرمون در ۱۳۹۳/۱۰/۰۲ ۷:۹
                  ممنون، ولی من از فرم‌های مودال jQuery UI استفاده می‌کنم. برای اون راه حلی ندارین؟
                  • وحید نصیری در ۱۳۹۳/۱۰/۰۲ ۱۵:۲۸
                    از این نسخه‌ی اصلاح شده استفاده کنید: PersianDatePicker-93.10.02.zip
                    • فرزاد فضلی در ۱۳۹۳/۱۰/۲۷ ۲۰:۱۸
                      سلام خدمت دوستان
                      بنده PersianDatePicker رو در پروژه خودم به کار گرفتم اما ظاهرا زمانی که بجای استفاده از Post Model از پیاده سازی PostViewModel استفاده می‌کنیم، datepicker به درستی عمل نمیکنه، البته در نمایش تقویم و انتخاب تاریخ مشکلی نیست بلکه در تبدیل شمسی به میلادی و ارسال به سرور مشکل داره و نهایتا فیلد addDate مقدار {01/01/0001 12:00:00 ق.ظ} رو میگیره.

                      Post ViewModel به صورت:
                       
                      namespace MvcAppPersianDatePicker.ViewModels
{
    public class PostViewModel
    {
        public Post post { get; set; }
    }
}

                      و Home کنترلر:

                      namespace MvcAppPersianDatePicker.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            var model = new PostViewModel();
            model.post = new Post() { AddDate = DateTime.Now.AddDays(-1), Title = "تست" };
            return View(model);
        }

        [HttpPost]
        public ActionResult Index(PostViewModel model)
        {
            if (ModelState.IsValid)
            {
                // todo: save data
                return RedirectToAction("Index");
            }

            return View(model);
        }
    }
}


                      • محسن خان در ۱۳۹۳/۱۰/۲۷ ۲۰:۴۱

                        مشکل از این مثال یا این تقویم یا هیچکدوم نیست. مشکل از اینجا است که در حین Post، سیستم بایندینگ MVC میاد نگاه می‌کنه چه خواصی رو در کلاس PostViewModel داری (اسم این کلاس مهم نیست). زمانی که در اون خاصیت AddDate رو پیدا نکرد، خوب ... همه چیز تموم میشه. خاصیتی رو پیدا نکرده که اطلاعات دریافتی رو بهش بایند کنه، بنابراین خاصیت‌های شیء تو در تویی که درست کردی، خالی باقی می‌مونه. این نوع View مدل بیشتر برای حالت Get استفاده میشه نه حالت Post. برای حالت Get ایی که قراره در یک صفحه چند منبع داده رو به قسمت‌های مختلف اون بایند کنی.

                        البته MVC می‌تونه به یک شیء تو در تو هم اطلاعات رو در حالت Post بایند کنه. اینطوری model=> model.Post.AddDate (دو تا دات داره نه یکی). خودت باید دستی این چند سطح رو مشخص کنی (در متدهای For دار).

  • وحید نصیری در ۱۳۹۳/۱۰/۲۸ ۰:۴۲
    جهت اطلاع
    مثال ASP.NET MVC این پروژه به مخزن کد ذیل منتقل شد. در آن امکان استفاده از خواص تو در تو به همراه یک مثال نیز لحاظ شده‌است:
    Mvc-App-Persian-DatePicker      
  • بابک تبریزی در ۱۳۹۳/۱۱/۲۱ ۱۸:۳۶
    می شود در DotNet2 هم از این تقویم استفاده کرد؟ var ... لطفاً بفرمائید چگونه می‌توانیم نوع داده var رو به web app  معرفی کنیم. system.string در win app ، نوع var داره چرا در وب DotNet2 نمی‌تونیم استفاده کنیم.?
    • وحید نصیری در ۱۳۹۳/۱۱/۲۱ ۱۸:۵۸
      - بله. این کتابخانه اساسا جاوا اسکریپتی است و کاری به نگارش دات نت شما ندارد. اینجا فقط مثالی ارائه شده جهت نمایش نحوه‌ی ارسال یک رشته از سمت سرور به کدهای کلاینت.
      + var مربوط به C# 3 است (دات نت 3.5) جهت خلاصه نویسی نوع متغیرها. در این کدها بجای اولین var بنویسید DateTime و بجای دومی string.
  • حامدص در ۱۳۹۳/۱۲/۲۷ ۲۳:۵۲
    من می‌خوام روز هفته تاریخ انتخابی رو بریزم تو یک متغیر ؛ چه جوری این کارو کنم؟
    • وحید نصیری در ۱۳۹۳/۱۲/۲۸ ۰:۲۸
      برای جدا کردن قسمت‌های مختلف تاریخ رشته‌ای از متد split استفاده کنید. نمونه‌ی این مورد در سورس همین کتابخانه بکار رفته‌است (split را در آن جستجو کنید). در سمت سرور هم متد Split برای کار با رشته‌ها وجود دارد.
      • حامدص در ۱۳۹۳/۱۲/۲۹ ۱۳:۱۷
        من با کد زیر تاریخ رو با کلیک روی datepicker به دست میارم:
          txtDate.Attributes["onclick"] = "PersianDatePicker.Show(this,'" + pc.GetYear(now)+"/"+pc.GetMonth(now)+"/"+pc.GetDayOfMonth(now) + "');";
        چیزی که توی تکست باکس قرار میگیره یه همچین چیزیه:
        1393/12/17
        حالا من کدوم رشته رو باید اسپلیت کنم؟
        • وحید نصیری در ۱۳۹۳/۱۲/۲۹ ۱۳:۳۰
          شروع کنید به مطالعه‌ی مباحث jQuery در سایت: «آموزش (jQuery) جی کوئری 1#». در همان صفحه از متد val برای دریافت مقدار یک textbox قرارگرفته شده در صفحه (در سمت کاربر) می‌توان استفاده کرد.
  • پرویز در ۱۳۹۴/۰۱/۱۰ ۱۲:۴۳
    سلام 
     تاریخی که برگشت داده میشه همراه با زمان است اما مقدار زمان صفر در نظر گرفته میشه و  صفر هم در کنار تاریخ برای زمان ذخیره میشه ، سوالی که پیش میاد اینه که  همزمان با تاریخ دریافتی ، زمان را هم میشه دریافت کرد؟(منظورم در همون فیلدی که برای تاریخ در نظر  گرفته شده نه به صورت جدا) 
    با تشکر
  • امیر نوروزیان در ۱۳۹۴/۰۱/۲۷ ۱۵:۵۲
    با سلام
    من از نسخه‌ی اصلاح شده آقای نصیری استفاده کردم و به دو مورد مشکل برخوردم.
    ۱- زمانی که تاریخ رو وارد میکنی خودش هنگام ارسال به میلادی تبدیل میکنه اگر در کلاس post 
     public DateTime AddDate { set; get; }
    به این صورت بنویسی. اما اگر بصورت زیر باشه
     public DateTime ? AddDate { set; get; }
    تاریخ رو بصورت رشته شمسی ارسال میکنه.
     ۲- هنگام ارسال اگه خالی ارسال کنی خطا میده یا هنگام ویرایش اگر تو بانک تاریخ خالی باشه وقت نشون دادن اطلاعات بازم خطا میده.. با سپاس
  • سیدمصطفی علیایی همپا در ۱۳۹۴/۰۳/۱۴ ۲۲:۱۵
    سلام؛ من توی پیج لود کدو قرار دادم و اررو میده. آیا فضای نام خاصی باید به پروژه ادد کنم؟
    • محسن خان در ۱۳۹۴/۰۳/۱۵ ۲۳:۲

      این پروژه یک فایل اسکریپت بیشتر نیست. بنابراین برای کار کردن نیاز به الحاق آن به صفحه هست (مثل تمام پروژه‌های جاوا اسکریپتی). ضمنا این مطلب رو برای سؤال پرسیدن باید رعایت کنی: آناتومی یک گزارش خطای خوب . کسی نمی‌دونه این ارور می‌ده یعنی چی؟ چه خطایی می‌ده؟ کسی مونیتورت رو نمی‌تونه از راه دور ببینه. باید توضیح بدی. تشریحش کنی با کمک این ابزار: نحوه استفاده از افزونه Firebug برای دیباگ برنامه‌های ASP.NET مبتنی بر jQuery        

      • سیدمصطفی علیایی همپا در ۱۳۹۴/۰۳/۱۵ ۲۳:۲۰
        من مثل این کدو میزنم و persiandatetime خطا میده؟ منظورم این بود که آیا فضای نامی براش باید ادد کنم؟ 
  • علی شریعتی در ۱۳۹۴/۰۳/۲۰ ۰:۳
    با سلام.
    من میخوام از این datepicker و تبدیل شمسی به میلادی واسه سرور تو پروژم استفاده کنم
    (MVC + API + angular)
    کسی تو انگولار استفاده کرده ازش؟
    جواب میده؟
  • م علیزاده در ۱۳۹۴/۰۹/۳۰ ۱۶:۶
    با سلام.
    من از این کامپوننت برای پروژه MVC استفاده کردم و همه چیز عالی کار میکنه.سوال اینه که چه طوری میشه برای فیلد مورد نظر ValidationMessageFor رو اضافه کرد؟ در ViewModel مربوطه این فیلد Required در نظر گرفته شده ولی موقع submit هیچ client-side-validation ی اتفاق نمی‌افته. و فقط بعد از postback که ModelState.IsValid بررسی شد،از سمت سرور validate میشه. چه طور میشه client-side-validation  رو براش فعال کرد؟
    با تشکر.
    • وحید نصیری در ۱۳۹۴/۰۹/۳۰ ۱۷:۱
      از قالب ادیتور به روز شده استفاده کنید؛ در اینجا.
      • مهدی ملائیان در ۱۳۹۶/۰۲/۲۵ ۱۳:۳۱
        زمانی که خصوصیتی بصورت زیر تعریف می‌کنم:
        [DisplayName("تاریخ شروع قرارداد")]
[Required(ErrorMessage = "تاریخ شروع قرارداد مشخص نشده است")]
public DateTime ContractStartDate { get; set; }
        و در View از partialview تعریف شده بصورت زیر استفاده می‌کنم :
         @Html.EditorFor(model => model.ContractStartDate, MVC.Shared.Views.EditorTemplates.PersianDatePicker)
        در زمانی که تاریخ خالی وارد میشه (مقدار min تاریخ در خصوصیت ذخیره میشه) و IsValid مقدار false رو بازگشت میده به علت اجرای مجدد partialview سیستم خطا صادر می‌کنه،و به اعتبار سنجی تعریف شده در Viewmodel نمیرسه .اگر ممکنه راهنمائی کنید.
        [HttpPost]
        [ValidateAntiForgeryToken()]
        public virtual ActionResult Create(AddContractVM vm)
        {
            if (!ModelState.IsValid)
            {
                return View(vm);
            }
            else
            {
                if (new Services.Contract().Add(vm))
                {
                    return RedirectToAction("Index");
                }
                else
                {
                    return View(vm);
                }
            }
        }
        • وحید نصیری در ۱۳۹۶/۰۲/۲۵ ۱۴:۱۴
          - «... تاریخ خالی وارد میشه ...»
          اگر قرار هست تاریخی خالی وارد شود، باید آن‌را nullable تعریف کنید (DateTime? ContractStartDate ) چون DateTime یک value types است و نه یک reference type.
          - اگر قرار هست Required داشته باشد (مانند مثال شما)، که همان سمت کلاینت از این مساله جلوگیری می‌شود و کار به ارسال به سمت سرور نمی‌رسد؛ چون new RouteValueDictionary(validationAttributes) کار درج ویژگی‌های اعتبارسنجی را انجام می‌دهد. البته به شرطی که UIHint را ذکر کرده باشید.
          • سیاوش زاهدی در ۱۳۹۷/۱۰/۰۳ ۱۰:۵۲
            البته در بین ویژگی‌های اعتبارسنجی   درج‌شده،  لازم است مقدار "data-val-date="the field must be a date را به صورت زیر ویرایش کنیم:
             
 string key = "data-val-date";    
 if (validationAttributes.ContainsKey(key))
    {
        validationAttributes[key] = "تاریخ را به شکل صحیح وارد کنید";
    }
            همچنین اگر قصد داریم textbox مقدار اولیه نداشته باشد باید کد زیر را با ابتدای  این متد اضافه کنیم:
                   
        DateTime defaultdate=new DateTime();
        if (date == defaultdate)
        {
            return string.Empty;

        }
            اگر  بخش binding  را نیز به صورت زیر تغییر بدهیم تحت هیچ شرایطی مشکلی پیش نخواهد آمد!
                      // nullable 
            if (valueResult.AttemptedValue.Length == 0)
            {
                return valueResult.AttemptedValue;
            }
            // اگر تاریخ مقدار داشت مقدار آن کمتر یا بیشتر از 10 نباشد
            else if (valueResult.AttemptedValue.Length != 10)
            {
                modelState.Errors.Add(" تاریخ را به شکل صحیح وارد کنید (مثال " + DateTimeExtention.ToFarsi(DateTime.Now, null).ToString() + ") ");
                bindingContext.ModelState.Add(bindingContext.ModelName, modelState);
                return valueResult.AttemptedValue;
            }
            object actualValue = null; // یا یک تاریخ میلادی
            البته در قسمت controller نیز بایستی valid بودن ModelState را بررسی کنیم.
            • وحید نصیری در ۱۳۹۷/۱۰/۰۳ ۱۱:۹
              بهتر است برای Parse دقیق‌تر تاریخ شمسی، از متدهای الحاقی ToGregorianDateTime و IsValidPersianDateTime استفاده کنید که حالت‌های بیشتری را پوشش می‌دهند و نیازی به این if/elseها دیگر نخواهد بود.
  • کیان سبزی در ۱۳۹۸/۰۶/۰۸ ۱۴:۹
    آیا امکان استفاده از این کتابخونه با گرید‌های KendoUI وجود داره نظیر این مطلب در اینجا؟ بیشتر نظرم روی تبدیل تاریخ میلادی به شمسی در حالت نمایشی (برای نمایش به کاربر) در گرید هستش.
  • وحید نصیری در ۱۴۰۴/۰۱/۱۸ ۲۰:۴۲
    یک نکته‌ی تکمیلی: اگر از این date-picker استفاده می‌کنید، قسمت محاسبه‌ی سال کبیسه‌ی آن، باید به صورت زیر اصلاح شود:
    function isLeapYear(pYear) {
        // Persian leap year follows a 33-year cycle pattern
        // Using the algorithm: year % 33, if remainder is one of [1, 5, 9, 13, 17, 21, 25, 29], it's a leap year
        const remainder = pYear % 33;
        const leapYears = [1, 5, 9, 13, 17, 21, 25, 29];
        return leapYears.includes(remainder);
    }