How to use PersianDatePicker in Razor?

Question

I want to use PersianDatePicker. How can I use it in razor (EditorFor) instead of <input> since I want to use viewbag as today date, and set the value using @Model.

 <input type="text" id="Item.FromRequestDate" name="Item.FromRequestDate" onclick="PersianDatePicker.Show(this, '1392/03/22');" class = "form-control form-filter input"  />

my base EditorFor is as below:

@Html.EditorFor(model => model.Item.FromRequestDate, new { htmlAttributes = new { @class = "form-control form-filter input" } })

Update:

As a solution, I did it as below:
(I haven't use EditorFor yet.I have wrote the codes below just as alternative and it's not answer) Now, I use Item.FromRequestDate as name and Id for binding value to model.

<input type="text" value="@ViewBag.PersianFromRequestDate" id="Item.FromRequestDate" name="Item.FromRequestDate" onclick="PersianDatePicker.Show(this, '@ViewBag.PersianToday');" class = "form-control form-filter input"  />

and in controller I have

ViewBag.PersianFromRequestDate = item.FromRequestDate;

for sending the value from controller separately (and not in model), and

        var now = PersianDateTime.Now;
        var today = now.ToString(PersianDateTimeFormat.Date);
        ViewBag.PersianToday = today;

for today value. Attention that you should use today Viewbag in single cote sign, even if you have send it as string from controller: '@ViewBag.PersianToday'

You don't need to convert the date and pass it as a ViewBag. `PersianDatePicker.cshtml` will do that for you automatically. Just add `[UIHint("PersianDatePicker")]` as an attribute and it will render and convert the date (https://github.com/VahidN/Mvc-App-Persian-DatePicker/blob/master/MvcAppPersianDatePicker/Views/Shared/EditorTemplates/PersianDatePicker.cshtml). — VahidN, Jul 04 '16 at 04:50

score 3 · Answer 1 · answered Jul 03 '16 at 18:00

3

I have a created a sample repository for this plugin here @github: https://github.com/VahidN/Mvc-App-Persian-DatePicker

Take a look at its sample model with [UIHint("PersianDatePicker")] which uses Views\Shared\EditorTemplates\PersianDatePicker.cshtml automatically.

answered Jul 03 '16 at 18:00

VahidN

18,457
8
73
117

Your question was about `EditorFor` and `UIHint` is designed for that. – VahidN Jul 04 '16 at 04:34
you are right, I didn't use EditorFor yet. I understood your answer. I will try it. thanks – Elnaz Jul 04 '16 at 04:48

score 0 · Answer 2 · answered Mar 26 '18 at 08:09

I have prepared an example for using the solar calendar based on the Telerik Kendo UI calendar, see the link below:

KendoUI Persian Solar (Shamsi-Jalali) Calendar for Kendo UI in MVC applications.

Note: Using these files, you can use kendoDatePicker and kendoCalendar (English and Persian) together.

How to use PersianDatePicker in Razor?

2 Answers2