All Projects → farshaddavoudi → Blazor.PersianDatePicker

farshaddavoudi / Blazor.PersianDatePicker

Licence: MIT license
A free JavaScript Jalali (Persian) and Gregorian (Miladi) dual datepicker library for Blazor applications

Programming Languages

SCSS
7915 projects
HTML
75241 projects
C#
18002 projects

Projects that are alternatives of or similar to Blazor.PersianDatePicker

blazor-ui
A collection of examples related to Telerik UI for Blazor Components: https://www.telerik.com/blazor-ui
Stars: ✭ 182 (+355%)
Mutual labels:  razor, blazor, razor-components, blazor-server, blazor-webassembly
vue2-persian-datepicker
A vue component that provides datepicker for persian developers
Stars: ✭ 100 (+150%)
Mutual labels:  datepicker, persian-calendar, datepicker-component, jalali-date-picker, persian-datepicker
blazor-docs
Public Documentation for Telerik UI for Blazor components.
Stars: ✭ 42 (+5%)
Mutual labels:  razor, blazor, razor-components, blazor-server
MudBlazor
Blazor Component Library based on Material design with an emphasis on ease of use. Mainly written in C# with Javascript kept to a bare minimum it empowers .NET developers to easily debug it if needed.
Stars: ✭ 4,539 (+11247.5%)
Mutual labels:  blazor, blazor-server, blazor-webassembly
AsteroidsWasm
Collection of applications based on a single C# .NET Standard project running in: Blazor Client (WebAssembly), Blazor Server, Electron, WPF, WinForms, Xamarin
Stars: ✭ 136 (+240%)
Mutual labels:  blazor, blazor-server, blazor-webassembly
Matblazor
Material Design components for Blazor and Razor Components
Stars: ✭ 2,599 (+6397.5%)
Mutual labels:  blazor, razor-components, blazor-server
AutoSaveEditForm
A replacement for the default EditForm component which will auto save a form until it is successfully submitted
Stars: ✭ 44 (+10%)
Mutual labels:  blazor, blazor-server, blazor-webassembly
AzureMapsControl.Components
Razor Components for azure-maps-control
Stars: ✭ 13 (-67.5%)
Mutual labels:  razor, blazor, razor-components
RazorComponents.Markdown
Razor component for Markdown rendering.
Stars: ✭ 30 (-25%)
Mutual labels:  razor, blazor, razor-components
praecox-datepicker
A date picker built with Svelte.Simple and flexible, supporting functions such as single selection, multiple selection, disabling, and marking.
Stars: ✭ 66 (+65%)
Mutual labels:  datepicker, datepicker-component, calendar-component
Awesome Blazor
Resources for Blazor, a .NET web framework using C#/Razor and HTML that runs in the browser with WebAssembly.
Stars: ✭ 6,063 (+15057.5%)
Mutual labels:  razor, blazor, razor-components
vue-persian-datepicker
A datepicker component for select Persian date
Stars: ✭ 23 (-42.5%)
Mutual labels:  datepicker, datepicker-component, persian-datepicker
bUnit
bUnit is a testing library for Blazor components that make tests look, feel, and runs like regular unit tests. bUnit makes it easy to render and control a component under test’s life-cycle, pass parameter and inject services into it, trigger event handlers, and verify the rendered markup from the component using a built-in semantic HTML comparer.
Stars: ✭ 857 (+2042.5%)
Mutual labels:  nuget, blazor, razor-components
Ant Design Blazor
🌈A set of enterprise-class UI components based on Ant Design and Blazor WebAssembly.
Stars: ✭ 3,890 (+9625%)
Mutual labels:  blazor, blazor-server, blazor-webassembly
MudBlazor.Markdown
Markdown component based on the MudBlazor environment
Stars: ✭ 30 (-25%)
Mutual labels:  blazor, blazor-server, blazor-webassembly
react-calendar
A no dependencies, lightweight and feature-rich ⚡ calendar component for react.
Stars: ✭ 68 (+70%)
Mutual labels:  datepicker, datepicker-component, calendar-component
smart-blazor
Blazor UI Components & Examples
Stars: ✭ 32 (-20%)
Mutual labels:  blazor, blazor-server, blazor-webassembly
Blazorade-Teams
A Blazor component library that is designed to be used when building applications for Microsoft Teams.
Stars: ✭ 29 (-27.5%)
Mutual labels:  blazor, blazor-server, blazor-webassembly
Razor.SweetAlert2
A Razor class library for interacting with SweetAlert2
Stars: ✭ 98 (+145%)
Mutual labels:  razor, blazor, razor-components
multilanguages
AKSoftware.Localization.MultiLanguages is a package for .NET developers allows them to easily build apps target multiple languages with just few lines of code
Stars: ✭ 54 (+35%)
Mutual labels:  nuget, blazor-server, blazor-webassembly

PersianDatePicker

After v2.0.0:

Usage:

1- Install Blazor.PersianDatePicker from Nuget.org

2- Add <script src="_content/Blazor.PersianDatePicker/datepicker.min.js" type="text/javascript"></script> to your index.html or _Host.cshtml

3- Add <link href="_content/Blazor.PersianDatePicker/datepicker.css" rel="stylesheet" /> to your index.html or _Host.cshtml

4- Add @using Blazor.PersianDatePicker to _imports.razor

5- Use the component InputPersianDatePicker

Options:

<InputPersianDatePicker 
                        // Html input element id attribute 
                        Id="myInputDatePicker" //Optional

                        // Bind input value to local variable or dto etc
                        @bind-Value="_myComponentField"

                        // Html input element name attribute
                        Name="myInputName" //Optional

                        // Control visibility of input
                        Visible="true" //Default: true

                        // Disabled make input disabled. Meaning only showing value and picker popup won't open
                        Disabled="false" //Default: false

                        // Readonly make input readonly. Meaning user cannot change the picker value e.g. by typing
                        ReadOnly="true" //Default: true

                        // Picker align relative to input
                        // Options: Align.Right | Align.Left
                        PickerAlign="Align.Right" //Default: Align.Right

                        // Show calendar icon on text input
                        ShowCalendarIcon="true" //Default: true

                        // Calendar icon position relative to input
                        // Options: IconPosition.BasedOnAlign | IconPosition.Left | IconPosition.Right
                        CalendarIconPosition="IconPosition.BasedOnAlign" //Default: IconPosition.BasedOnAlign

                        // Can be used in changing vertical position of picker popup relative to input
                        PickerOffsetTopPositionInPixels="2" //Default: 2

                        // Initial value for input set on today
                        InitialValue="false" //Default: false

                        // Calendar type for date picker including Dual, Single, etc
                        // Options: Calendar.DualModeJalaliDefault | Calendar.DualModeMiladiDefault | Calendar.SingleModeJalali | Calendar.SingleModeMiladi
                        CalendarType="Calendar.DualModeJalaliDefault" //Default: Calendar.DualModeJalaliDefault

                        // Control the digit type showing in input after selecting by picker
                        // Options: DigitType.BasedOnCalendar | DigitType.Persian | DigitType.English
                        DigitType="DigitType.BasedOnCalendar" //Default: DigitType.BasedOnCalendar

                        // Format of date to show in input after selecting by picker, e.g. 1400/01/01 or 1400-01-01
                        // Options: DateFormat.yyyy_slash_MM_slash_dd | DateFormat.yyyy_dash_MM_dash_dd
                        DateFormat="DateFormat.yyyy_slash_MM_slash_dd" //Default: DateFormat.yyyy_slash_MM_slash_dd

                        // Prevent user select date before today
                        MinDateSetOnToday="true" //Default: true

                        // Input placeholder
                        Placeholder="Select date"

                        // CSS class for input element
                        CssClass="form-control"

                        // Inline styles for input element
                        Style="border:1px solid red; width:50%"

                        // Choose a theme for changing look and feel of picker
                        // Options: PickerTheme.Default | PickerTheme.Dark | PickerTheme.Blue | PickerTheme.Cheerup | PickerTheme.RedBlack
                        // Themes can be seen in the image
                        Theme="PickerTheme.Default"

                        // Input onchange event
                        OnChange="@(() => Console.WriteLine("OK"))"
                        
                        // Input text clear event (by pressing close button)
                        OnClear="@(() => Console.WriteLine("Cleared"))" />

You can add multi instance of InputPersianDatePicker component in a page and all of them works independently without any problem

Performance:

  • js size: 35 KB => gzipped

  • css size: 5 KB => gzipped

  • dll size: 9 KB =>‌ gzipped

– IIS server uses compressed gzip files out of the box (as default) for Blazor Web Assembly Hosted applications. For Blazor Standalone app, though, some manual steps is required. More info

Special Thanks:

This project is ported from 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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].