目录
介绍
使用代码
_Host.cshtml
site.js
JQDatePicker.razor
JQDatePicker.razor.cs
如何使用？
DatePicker.razor
介绍
在我使用的一项作业中，很少有表单具有输入控件作为日期选择器日历。根据业务逻辑的自定义需求不可能使用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 Referencesusing ponents;using Microsoft.JSInterop;#endregion#region System Referencesusing System;using System.Threading.Tasks;#endregionnamespace ponents{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}}
下面是每个变量和函数的描述：
如何使用？
下面是一组示例代码，展示了如何使用双向绑定来使用上述组件。
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上获得。
/Tips/5290232/Blazor-datepicker-Component-using-JQuery
