Blazor 自定义可重用基础组件之 限制输入日期范围的DateBox

news/2024/11/24 9:20:16/

输入日期是一个非常重要的基础组件,可能也需要限定日期范围。这里只对日期进行定义,即设定type="date",其他的不常用,就略去了。DateTime 是一个结构体,像int有为0的初始值一样,它有一个初始值{0001/1/1 0:00:00};所以麻烦就在这里,要么就设为DateTime?,可这与codefirst相冲突;要么设定初始值,未设定初始值,需要在OnValidSubmit中再去判断日期字段是否未输入,即还是等于它的初始值。

DateBox.razor

@inherits InputBase<DateTime><div class="d-flex"><label class="control-label w-auto mt-2"><b>@Lable</b></label><div style="width:@InputWidth"><input type="date" value="@CurrentValueAsString" @onchange="EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString)" class="form-control" disabled="@Disabled" @ref="Element" @attributes="AdditionalAttributes" /></div>
</div>

DateBox.razor.cs

public partial class DateBox : InputBase<DateTime>
{[Parameter]public required string Lable { get; set; }[Parameter]public string InputWidth { get; set; } = "300";[Parameter]public bool Disabled { get; set; }[Parameter]public DateTime? MaxDate { get; set; }[Parameter]public DateTime? MinDate { get; set; }private const string DateFormat = "yyyy-MM-dd";protected override void OnParametersSet(){base.OnParametersSet();Lable += ":";InputWidth += "px;";Dictionary<string, object> keyValues = new();if (MaxDate.HasValue){keyValues.Add("max", MaxDate.Value.ToString("yyyy-MM-dd"));}if (MinDate.HasValue){keyValues.Add("min", MinDate.Value.ToString("yyyy-MM-dd"));}AdditionalAttributes = keyValues;}[DisallowNull] public ElementReference? Element { get; protected set; }/// <inheritdoc />protected override string FormatValueAsString(DateTime value)=> value switch{DateTime dateTimeValue => BindConverter.FormatValue(dateTimeValue, DateFormat, CultureInfo.InvariantCulture),//_ => string.Empty, // Handles null for Nullable<DateTime>, etc.};/// <inheritdoc />protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out DateTime result, [NotNullWhen(false)] out string? validationErrorMessage){if (BindConverter.TryConvertTo(value, CultureInfo.InvariantCulture, out result)){//Debug.Assert(result != null);validationErrorMessage = null;return true;}else{validationErrorMessage = "所填日期不正确!";return false;}}
}

使用:

        <DateBox Lable="日期测试" InputWidth="200" @bind-Value="myClass.Date" MaxDate="@maxDate" MinDate="@minDate"></DateBox>@code{private DateTime maxDate = DateTime.Today;private DateTime minDate = new DateTime(2022, 1, 1);}


http://www.ppmy.cn/news/819463.html

相关文章

wordpress 单页中子页面列表制作方法

一、目标&#xff1a; 1、父页面显示所有子页面&#xff0c;如果是子页面就显示子页面对应父页面下的所有子页面。 2、选中的子页面链接显示不一样的样式。 二、代码 <?php$current_page_id get_the_ID(); // 获取当前页面的ID// 判断当前页面是否为父页面$is_parent_…

NBA 本周五将空场复赛,球迷可用微软 Teams 现场互动

By 超神经 内容概要&#xff1a;2019-2020 赛季的 NBA 复赛&#xff0c;将于美东时间 7 月 30 日重启&#xff0c;为了保持社交距离&#xff0c;这次 NBA 做出了诸多调整&#xff0c;并与微软 Teams 达成合作&#xff0c;以为球迷带来了全新的沉浸式观影体验。 关键词&#xff…

淘宝杨志丰:OceanBase--淘宝结构化大数据解决之道

&#xfeff;&#xfeff; 淘宝杨志丰&#xff1a;OceanBase--淘宝结构化大数据解决之道 时至今日&#xff0c;“Big data”&#xff08;大数据&#xff09;时代的来临已经毋庸置疑&#xff0c;尤其是在电信、金融等行业&#xff0c;几乎已经到了“数据就是业务本身”的地步。这…

刘强东哈佛演讲:解决一个问题,创业就能成功

&#xfeff;&#xfeff; 刘强东哈佛演讲&#xff1a;解决一个问题&#xff0c;创业就能成功 DoNews 4月27日消息&#xff08;记者 周勤燕&#xff09;京东集团创始人、CEO刘强东近日在哈佛中国论坛上发表主题演讲&#xff0c;分享了创立京东以及二次创业O2O项目“京东到家”的…

互联网晚报 | 07月02日 星期六 | ​​​北京健康宝核酸检测天数计算规则调整;​上海鼓励用人单位吸纳失业3个月及以上人员...

北京健康宝核酸检测天数计算规则调整 近日&#xff0c;北京健康宝发布新版&#xff0c;结合北京市最新防疫政策及用户反馈&#xff0c;对扫码结果展示、到访人登记簿、疫苗接种状态等功能进行优化升级。调整后&#xff0c;健康宝核酸检测天数严格按照日历日计算&#xff0c;并以…

野心不小?国美首家专业VR影院落地北京

该VR影院不仅可以实现VR观影、VR游戏&#xff0c;还可以组织亲友聚会、开展学术沙龙&#xff0c;体验3D打印等。 在去年年底前&#xff0c;国美电器高级副总裁郭军宣布计划建成国内首家专业VR影院&#xff0c;并在北京、沈阳、大连、深圳四地的国美门店建成100家VR影院。国美电…

腾讯位置服务开发应用-使用教程,案例分享,知识总结

文章目录 前言一、腾讯位置服务是什么&#xff1f;二、使用步骤1.uniapp开发map说明介绍markers属性-类型为数组Arraymarker 上的气泡 callout&#xff08;Object类型&#xff09;marker 上的标签 label&#xff08;Object类型&#xff09;polylinepolygoncirclescontrolsposit…

2019第二届北京国际无人值守零售展览会【官宣】

2019第二届北京国际无人值守零售展览会The 2th Beijing International Unattended Retail Show, 2019 2019年7月8-10日 北京-中国国际展览中心 主办单位&#xff1a;中国商业联合会北京恒辉国际展览有限公司协办单位&#xff1a;北京市协会合作单位&#xff1a;《自动贩卖产业》…