{"id":25451502,"url":"https://github.com/farshaddavoudi/blazor.persiandatepicker","last_synced_at":"2025-04-07T08:22:24.348Z","repository":{"id":37823234,"uuid":"352519412","full_name":"farshaddavoudi/Blazor.PersianDatePicker","owner":"farshaddavoudi","description":"A Jalali (Persian) and Gregorian (Miladi) dual datepicker library for Blazor applications","archived":false,"fork":false,"pushed_at":"2025-02-23T13:22:07.000Z","size":760,"stargazers_count":73,"open_issues_count":4,"forks_count":12,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-31T06:08:45.466Z","etag":null,"topics":["blazor","blazor-server","blazor-webassembly","calendar-component","component","csharp","datepicker","datepicker-component","jalali-date","jalali-date-picker","javascript-calendar","nuget","persian-calendar","persian-datepicker","razor","razor-components"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/farshaddavoudi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-29T04:49:54.000Z","updated_at":"2025-03-29T15:57:34.000Z","dependencies_parsed_at":"2023-11-21T20:29:53.730Z","dependency_job_id":"5058bd23-f392-499f-aae7-ecac0e9bfcf4","html_url":"https://github.com/farshaddavoudi/Blazor.PersianDatePicker","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farshaddavoudi%2FBlazor.PersianDatePicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farshaddavoudi%2FBlazor.PersianDatePicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farshaddavoudi%2FBlazor.PersianDatePicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farshaddavoudi%2FBlazor.PersianDatePicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/farshaddavoudi","download_url":"https://codeload.github.com/farshaddavoudi/Blazor.PersianDatePicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247615394,"owners_count":20967186,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","blazor-server","blazor-webassembly","calendar-component","component","csharp","datepicker","datepicker-component","jalali-date","jalali-date-picker","javascript-calendar","nuget","persian-calendar","persian-datepicker","razor","razor-components"],"created_at":"2025-02-17T22:53:49.273Z","updated_at":"2025-04-07T08:22:24.322Z","avatar_url":"https://github.com/farshaddavoudi.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Blazor.PersianDatePicker\n \n[![NuGet Version](https://img.shields.io/nuget/v/Blazor.PersianDatePicker.svg?style=flat)](https://www.nuget.org/packages/Blazor.PersianDatePicker/)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://raw.githubusercontent.com/farshaddavoudi/Blazor.PersianDatePicker/master/LICENSE)\n\n\u003cimg src=\"https://github.com/fericode/Blazor.PersianDatePicker/blob/master/screenshot.png\"\u003e\n\n##### 🎈 Optimize design after `v2.0.0` | Mark holidays (optional) after `v3.5.0` — Thanks to [@Mostafa-Moradi](https://github.com/Mostafa-Moradi) for asking [the feature](https://github.com/farshaddavoudi/Blazor.PersianDatePicker/issues/93)\n\n\u003cimg src=\"https://github.com/fericode/Blazor.PersianDatePicker/blob/master/screenshot-design-changes.png\"\u003e\n\n\u003e ✨ **Important fix in v3.4.0 — update your package**: The 1403 Jalali leap year was miscalculated therefore all dates in the next Jalali year (1404) were wrong by one day. It is resolved now. Thanks to [@web724online](https://github.com/web724online) for creating [the issue](https://github.com/farshaddavoudi/Blazor.PersianDatePicker/issues/89).\n\n\u003e ✨ **Important fix in v3.2.0**: When we set the bound parameter value to some date by code (for example in the `OnInitialize` method of our component) and then click on the input, the selected date in the datepicker was always today, not that date. It is resolved now. Thanks to [@EsmaeelAmarloo](https://github.com/EsmaeelAmarloo) for creating [the issue](https://github.com/farshaddavoudi/Blazor.PersianDatePicker/issues/60#issuecomment-1820790657).\n\n## Compatibility:\nIt is compatible and installable on all .NET 5, .NET 6, .NET 7 and .NET 8 Blazor projects\n\n## Usage:\n\n1- Install **Blazor.PersianDatePicker** from Nuget.org\n\n2- Add `\u003cscript src=\"_content/Blazor.PersianDatePicker/datepicker.min.js\" type=\"text/javascript\"\u003e\u003c/script\u003e` to your **index.html** or **_Host.cshtml** or **App.razor** *(in .NET 8)*\n\n3- Add `\u003clink href=\"_content/Blazor.PersianDatePicker/datepicker.css\" rel=\"stylesheet\" /\u003e` to your **index.html** or **_Host.cshtml** or **App.razor** *(in .NET 8)*\n\n4- Add `@using Blazor.PersianDatePicker` to **_imports.razor**\n\n5- Use the component **InputPersianDatePicker** \n\n## Options:\n\n```csharp\n\u003cInputPersianDatePicker \n       // Html input element id attribute \n       Id=\"myInputDatePicker\" //Optional\n\n       // Bind input value to local variable or dto etc\n       @bind-Value=\"_myComponentField\"\n\n       // Html input element name attribute\n       Name=\"myInputName\" //Optional\n\n       // Control visibility of input\n       Visible=\"true\" //Default: true\n\n       // Disabled make input disabled. This means only showing value and the picker popup won't open\n       Disabled=\"false\" //Default: false\n\n       // Readonly make input readonly. This means the user cannot change the picker value e.g. by typing\n       ReadOnly=\"true\" //Default: true\n\n       // Picker'align relative to input\n       // Options: Align.Right | Align.Left\n       PickerAlign=\"Align.Right\" //Default: Align.Right\n\n       // Show calendar icon on text input\n       ShowCalendarIcon=\"true\" //Default: true\n\n       // Calendar icon position relative to input\n       // Options: IconPosition.BasedOnAlign | IconPosition.Left | IconPosition.Right\n       CalendarIconPosition=\"IconPosition.BasedOnAlign\" //Default: IconPosition.BasedOnAlign\n\n       // Can be used in changing the vertical position of the picker popup relative to the input\n       PickerOffsetTopPositionInPixels=\"2\" //Default: 2\n\n       // Initial value for the input set today\n       InitialValueSetOnToday=\"false\" //Default: false\n\n       // Calendar type for date picker including Dual, Single, etc\n       // Options: Calendar.DualModeJalaliDefault | Calendar.DualModeMiladiDefault | Calendar.SingleModeJalali | Calendar.SingleModeMiladi\n       CalendarType=\"Calendar.DualModeJalaliDefault\" //Default: Calendar.DualModeJalaliDefault\n\n       // Control the digit type showing in the input after selecting by the picker\n       // Options: DigitType.BasedOnCalendar | DigitType.Persian | DigitType.English\n       DigitType=\"DigitType.BasedOnCalendar\" //Default: DigitType.BasedOnCalendar\n\n       // Format of date to show in the input after selecting by picker, e.g. 1400/01/01 or 1400-01-01\n       // Options: DateFormat.yyyy_slash_MM_slash_dd | DateFormat.yyyy_dash_MM_dash_dd\n       DateFormat=\"DateFormat.yyyy_slash_MM_slash_dd\" //Default: DateFormat.yyyy_slash_MM_slash_dd\n\n       // Prevent the user from selecting a date before today\n       MinDateSetOnToday=\"true\" //Default: true\n\n       // Input placeholder\n       Placeholder=\"Select date\"\n\n       // CSS class for input element\n       CssClass=\"form-control\"\n\n       // Inline styles for input element\n       Style=\"border:1px solid red; width:50%\"\n\n       // Choose a theme for changing the look and feel of the picker\n       // Options: PickerTheme.Default | PickerTheme.Dark | PickerTheme.Blue | PickerTheme.Cheerup | PickerTheme.RedBlack\n       // Themes can be seen in the image\n       Theme=\"PickerTheme.Default\"\n\n       // Mark holidays red color in Persian calendar\n       MarkHolidays=\"true\" //Default: true\n\n       // Mark red color for the dates provided here in the calendar\n       // Both \"/\" seperated and \"-\" seperated Jalali date formats are valid\n       MarkedDates=\"@([\"1403-06-25\", \"1403/06/27\", \"1403/06/28\"])\" //Optional\n\n       // Input change event\n       OnChange=\"@(() =\u003e Console.WriteLine(\"OK\"))\"\n                        \n       // Input text clear event (by pressing close button)\n       OnClear=\"@(() =\u003e Console.WriteLine(\"Cleared\"))\" /\u003e\n\n```\n\n\u003e #### 💡 You can add multi-instances of InputPersianDatePicker components on a page and all of them work independently without any problem\n\n## Sample template for fast usage:\n#### Copy from here then paste in your project; change some options and you're done.\n\n```razor\n\u003cInputPersianDatePicker Id=\"myInputDatePicker\"\n                        @bind-Value=\"_variable4\"\n                        Name=\"myInputName\"\n                        Visible=\"true\"\n                        Disabled=\"false\"\n                        PickerAlign=\"Align.Right\"\n                        PickerOffsetTopPositionInPixels=\"1\"\n                        InitialValueSetOnToday=\"false\"\n                        CalendarType=\"Calendar.SingleModeJalali\"\n                        DigitType=\"DigitType.BasedOnCalendar\"\n                        DateFormat=\"DateFormat.yyyy_slash_MM_slash_dd\"\n                        MinDateSetOnToday=\"true\"\n                        Placeholder=\"Select date\"\n                        CssClass=\"form-control\"\n                        Style=\"border:1px solid green; width:20%; float:right\"\n                        Theme=\"PickerTheme.RedBlack\"\n                        MarkHolidays=\"true\"\n                        MarkedDates=\"@([\"1403-06-25\", \"1403/06/27\", \"1403/06/28\"])\"\n                        OnChange=\"@(() =\u003e Console.WriteLine(\"OK\"))\" /\u003e\n```\n\n## Performance:\n\n   * `js` size (gzipped) ⇒ **35 kb** \n\n   * `css` size (gzipped) ⇒ **5 kb** \n\n   * `dll` size (gzipped) ⇒‌ **9 kb** \n\n\n## Special Thanks:\n  *This project is ported from [pwt.datepicker](https://github.com/babakhani/pwt.datepicker) project with a lot of customizations and optimizations for easy and fast use for Blazor applications. Therefore, I appreciate the great effort of Reza Babakhani @babakhani and all contributors of that project*\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffarshaddavoudi%2Fblazor.persiandatepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffarshaddavoudi%2Fblazor.persiandatepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffarshaddavoudi%2Fblazor.persiandatepicker/lists"}