介绍

在我使用Blazor.net的一项作业中，很少有表单具有输入控件作为日期选择器日历。根据业务逻辑的自定义需求不可能使用EditForm中的当前Blazor InputDate组件实现。下面列出了一些限制使用默认组件的逻辑：

限制日期，如开始日期和结束日期，或者限制未来或过去的日期
输入字段格式

以上几点可以在以后的版本中实现，但为了完成开发，我们选择使用Jquery。了解使用Blazor限制JavaScript在应用程序中的使用，当前版本不完全满足开发条件。希望未来的版本更新相同。我们可以使用第三方组件，但由于某些政策而受到限制。因此，为了清除开发障碍，我们决定使用jquery datepicker并创建一个可以在整个过程中使用的自定义组件。

下面是相同的代码以及如何在不同场景中使用它的解释。

使用代码

代码就像一个简单的插件，只需配置组件并在应用程序中使用它。下面是相同的代码。

_Host.cshtml

提供对jquery库的引用。请注意site.js是一个自定义js，其代码如下所示：

<script src="js/Jquery-3.5.1.min.js"></script>
<script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
<script src="js/site.js"></script>

site.js

window.siteFunction={InitDatePickerwithSelect: function (element, formatDate, minDate, maxDate) {$(element).datepicker('destroy');$(element).datepicker({showOtherMonths: true,selectOtherMonths: true,changeMonth: true,changeYear: true,dateFormat: formatDate,minDate: minDate == null ? null : new Date(minDate),maxDate: maxDate == null ? null : new Date(maxDate),onSelect: function (date) {var myElement = $(this)[0];var event = new Event('change');myElement.dispatchEvent(event);}});},SetMinMaxDate: function (element, minDate, maxDate) {var min = minDate == null ? null : new Date(minDate);var max = maxDate == null ? null : new Date(maxDate);$(element).datepicker('option', 'minDate', min);$(element).datepicker('option', 'maxDate', max);}
}

JQDatePicker.razor

根据以下代码在项目的共享UI文件夹中创建一个razor组件。例如，BlazorApp/Pages/Component。

<input type="text" id="@(Id)" class="form-control datepicker @(Class)" data-provide="datepicker"disabled="@Disabled"@ref="currentElement"@bind-value="BindValue"@bind-value:event="oninput"@bind-value:format="@Format"@onchange="OnChange" />

JQDatePicker.razor.cs

在razor组件所在的文件夹中创建与上述相同的razor.cs类。以下代码充当创建的razor页面的后端代码。

#region Microsoft References
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
#endregion#region System References
using System;
using System.Threading.Tasks;
#endregionnamespace BlazorApp.Pages.Components
{
public partial class JQDatePicker{#region Parameter[Parameter] public DateTime? Value { get=>_value; set{if(_value==value) return;_value=value;ValueChanged.InvokeAsync(Value);} }[Parameter] public string Format { get; set; }[Parameter] public EventCallback<DateTime?> ValueChanged {get;set;}[Parameter] public string Id { get; set; }[Parameter] public string Class { get; set; }[Parameter] public bool Disabled { get; set; }[Parameter] public DateTime? MinDate { get; set; }[Parameter] public DateTime? MaxDate { get; set; }#endregion#region Inject[Inject] IJSRuntime JSRuntime { get; set; }#endregionprivate DateTime? _value ;private string DatePickerFormat { get; set; }ElementReference currentElement { get; set; }#region Protected Method/// <summary>/// Method to initialize variable on component initialization/// </summary>protected override async Task OnInitializedAsync(){Format = string.IsNullOrEmpty(Format) ? "dd/MMM/yyyy" : Format;DatePickerFormat = string.IsNullOrEmpty(DatePickerFormat) ? "dd/M/yy" : DatePickerFormat;}/// <summary>////// </summary>/// <param name="firstRender"></param>/// <returns></returns>protected override async Task OnAfterRenderAsync(bool firstRender){if (firstRender){await RenderDatePicker();}if (!firstRender)await SetMinMaxDate();}#endregion#region Private Method/// <summary>/// Method to invoke Date picker js function/// </summary>/// <returns></returns>private async Task RenderDatePicker(){await JSRuntime.InvokeVoidAsync("siteFunction.InitDatePickerwithSelect", currentElement, DatePickerFormat, MinDate, MaxDate);}/// <summary>/// Method to invoke setminmaxdate js function/// </summary>/// <returns></returns>private async Task SetMinMaxDate(){await JSRuntime.InvokeVoidAsync("siteFunction.SetMinMaxDate", currentElement, MinDate, MaxDate);}/// <summary>/// Method to handle date picker change/// </summary>/// <param name="e">ChangeEventArgs</param>private void OnChange(ChangeEventArgs e){DateTime dateTime;if (DateTime.TryParse(e.Value.ToString(), out dateTime)){ValueChanged.InvokeAsync(dateTime);}}#endregion}
}

下面是每个变量和函数的描述：

组件属性	描述
Value	要传递的模型属性
Format	UI组件的UI格式
ValueChanged	在值更改时设置模型属性的事件回调。这有助于两种方式的绑定
Id	要设置的组件的id属性
Class	要设置的组件的类属性
Disabled	要设置的禁用属性，即如果为true其他启用则禁用
MinDate	要设置的属性以限制过去的日期。如果为null或未设置，则日历不会限制过去的日期
MaxDate	在限制未来日期的情况下要设置的属性。如果设置null或未设置，则日历不会限制未来日期

变量	描述
DatePickerFormat	要为jquery datepicker设置的格式。保持可配置，但可以更改为参数。
currentElement	传递DOM元素引用的变量

方法	描述
OnInitializedAsync	在组件初始化时执行的方法
OnAfterRenderAsync	每次渲染组件时执行的方法
RenderDatePicker	调用设置jquery的JavaScript datepicker函数的方法
SetMinMaxDate	调用设置datepicker最小和最大日期的JavaScript函数的方法
OnChange	更改输入字段时调用的方法

如何使用？

下面是一组示例代码，展示了如何使用双向绑定来使用上述组件。

DatePicker.razor

下面是显示如何使用能够组件的示例代码。

@page "/datepicker"
<div class="container"><div class="col-12"><div class="row"><div class="form-group"><label for="txtStartDate">Start Date</label><JQDatePicker Id="txtStartDate" BindValue="@StartDate"MaxDate="@EndDate"Format="dd/MMM/yyyy"></JQDatePicker></div></div><div class="row"><p>Start Date : @StartDate</p></div></div>
</div>@code{private DateTime? StartDate{get;set;}private DateTime? EndDate{get;set;}
}

以下是显示如何使用Min Max日期函数的示例代码：

 <div class="form-group"><label for="txtStartDate">Start Date</label><JQDatePicker Id="txtStartDate" BindValue="@StartDate"MaxDate="@EndDate"Format="dd/MMM/yyyy"></JQDatePicker></div><div class="form-group"><label for="txtEndDate">End Date</label><JQDatePicker Id="txtEndDate" BindValue="@EndDate"MinDate="@StartDate"Format="dd/MMM/yyyy"></JQDatePicker></div><div class="row"><p>Start Date : @StartDate</p></div><div class="row"><p>End Date : @EndDate</p></div>
@code{private DateTime? StartDate{get;set;}private DateTime? EndDate{get;set;}
}

示例代码可在GitHub上获得。

https://www.codeproject.com/Tips/5290232/Blazor-datepicker-Component-using-JQuery

使用JQuery的Blazor日期选择器组件相关推荐

js日期控件_11个开源的Github开源日期选择器组件，供你选择
介绍本文主要介绍几个Vue的时间日期选择器组件,目的在于让开发者们多一些选择,不管是从功能还是从样式,都可以选择一个适合的组件,这些组件没有绝对的好与不好,就看个人如何选择了,以下分别介绍十一个日期 ...
JavaScript：日期选择器组件的使用
前言: 在实际项目开发中,日期选择是一个十分常见而且重要的问题,在表单中设计到日期的验证时,如果让用户自己输入时间的话,那么使用正则进行验证其正确性是不可取的,因为他一般只能验证日期的格式,无法准确的 ...
自己动手写一个移动端日期选择器组件
文章目录背景效果演示思路实现 1. picker-view 实现基础交互 2. 年月日动态配置以及支持最大最小日期 3. 支持不同日期模式背景本文写的组件是基于 uni-app 框架下的, ...
axure日期选择器组件_vue干货分享，超过六种组件通信方法讲解和精髓归纳
好消息:为了更好的规划和组织内容,今后每期内容之后能将预告下期的主题,欢迎大家补充组件的分类常规页面组件,由 vue-router 产生的每个页面,它本质上也是一个组件(.vue),主要承载当前页 ...
axure日期选择器组件_Vue原理解析（十）：搞懂事件API原理及在组件库中的妙用
在vue内部初始化时会为每个组件实例挂载一个this._events私有的空对象属性: vm._events = Object.create(null) // 没有__proto__属性这个里面存放 ...
antd 日期时间选择_AntD日期选择器组件DatePicker默认展示当前时间前一个周四
util中写个js方法 // 取当前时间的前一个周四 export const getThursday = () => { let now = new Date(); let nowTime = ...
jQuery之日期选择器
1:默认情况下,日期输入文本框获得页面焦点的时候,日期选择器组件会在一个覆盖层中打开日历选择面板,当日期输入文本框失去焦点或者选择一个日期的时候,将自动关闭该日历选择面板 $(selector).d ...
Angular中修改第三方组件的样式 - zorro日期选择器右端不对齐的BUG
在一列上同时使用zorro的日期选择器和input组件会出现右端不对齐的BUG(nzSpan设置为一样) 上图中3个表单项:单据日期.开票.交货方式,nzSpan数值是一样的,可以看到日期选择器和下面 ...
vue日期选择组件_一个Vue组件，为波斯开发人员提供日期选择器
vue日期选择组件 Vue波斯日期选择器 (vue persian datepicker) This is a Jalali date picker component for Vue. 这是Vue的 ...

使用JQuery的Blazor日期选择器组件

介绍