رحمت اله رضایی رحمت اله رضایی
PersianDatePicker یک DatePicker شمسی به زبان JavaScript که از تاریخ سرور استفاده می‌کند
اندازه‌ی قلم متن
تخمین مدت زمان مطالعه‌ی مطلب: یک دقیقه
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   
‫۱۱ سال و ۴ ماه قبل، یکشنبه ۲۶ خرداد ۱۳۹۲، ساعت ۱۶:۳۵
۷۵۵۴۰
۷۱
JavaScriptPersianتاریخ شمسیDatePicker
مطالب مشابه
  • #
    وحید نصیری وحید نصیری
    ‫۱۱ سال و ۴ ماه قبل، یکشنبه ۲۶ خرداد ۱۳۹۲، ساعت ۱۶:۴۴
    بسیار عالی. مزیت کار شما به تقویم‌های نمونه دیگر ، سورس باز بودن آن است (نمونه غیرفشرده هم لحاظ شده). ضمنا یکی از مواردی که می‌تونه در تهیه ایده برای تولید یک محصول بهتر و پخته‌تر کمک کنه مراجعه به مشکلات و نظرات کتابخانه‌های مشابه است. مثلا همان تقویم لینک داده شده، قسمت نظراتش پر است از ایده برای کسانی که بخواهند یک کار خیلی پخته رو در این زمینه تکمیل کنند؛ بر اساس نیازهای واقعی استفاده کننده‌ها.
    • #
      رحمت اله رضایی رحمت اله رضایی
      ‫۱۱ سال و ۴ ماه قبل، یکشنبه ۲۶ خرداد ۱۳۹۲، ساعت ۱۷:۰۳
      بله درست است و امیدوارم در آینده به کمک دیگران توسعه داده شود.
  • #
    مرادیان مرادیان
    ‫۱۱ سال و ۴ ماه قبل، یکشنبه ۲۶ خرداد ۱۳۹۲، ساعت ۱۸:۲۰

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

    بسیار ممنون

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