Giter VIP home page Giter VIP logo

blazor.persiandatepicker's Introduction

Blazor.PersianDatePicker

NuGet Version License: MIT

After v2.0.0:

Important fix in v3.2.0:

  • When we set the bound parameter value to some date by code (for example in OnInitialize method of our page) 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 for creating the issue.

Compatibility:

It is compatible and installable on all .NET5, .NET6, .NET7 and .NET8 Blazor projects

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 or App.razor (in .NET8)

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

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. This means only showing value and the picker popup won't open
       Disabled="false" //Default: false

       // Readonly make input readonly. This means the 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 the vertical position of the picker popup relative to the input
       PickerOffsetTopPositionInPixels="2" //Default: 2

       // Initial value for the input set today
       InitialValueSetOnToday="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 the input after selecting by the picker
       // Options: DigitType.BasedOnCalendar | DigitType.Persian | DigitType.English
       DigitType="DigitType.BasedOnCalendar" //Default: DigitType.BasedOnCalendar

       // Format of date to show in the 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 the user from selecting a 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 the look and feel of the picker
       // Options: PickerTheme.Default | PickerTheme.Dark | PickerTheme.Blue | PickerTheme.Cheerup | PickerTheme.RedBlack
       // Themes can be seen in the image
       Theme="PickerTheme.Default"

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

๐Ÿ’ก You can add multi-instances of InputPersianDatePicker components on a page and all of them work independently without any problem

Sample template for fast usage:

Copy from here then paste in your project; change some options and you're done.

<InputPersianDatePicker Id="myInputDatePicker"
                        @bind-Value="_variable4"
                        Name="myInputName"
                        Visible="true"
                        Disabled="false"
                        PickerAlign="Align.Right"
                        PickerOffsetTopPositionInPixels="1"
                        InitialValueSetOnToday="false"
                        CalendarType="Calendar.SingleModeJalali"
                        DigitType="DigitType.BasedOnCalendar"
                        DateFormat="DateFormat.yyyy_slash_MM_slash_dd"
                        MinDateSetOnToday="true"
                        Placeholder="Select date"
                        CssClass="form-control"
                        Style="border:1px solid green; width:20%; float:right"
                        Theme="PickerTheme.RedBlack"
                        OnChange="@(() => Console.WriteLine("OK"))" />

Performance:

  • js size (gzipped) โ‡’ 35 kb

  • css size (gzipped) โ‡’ 5 kb

  • dll size (gzipped) โ‡’โ€Œ 9 kb

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

blazor.persiandatepicker's People

Contributors

farshaddavoudi avatar somayeebrahimi avatar rypedram avatar zabihrajaie avatar sajadkardel avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.