65.9K
CodeProject 正在变化。 阅读更多。
Home

基于 Javascript 的日期用户控件支持 Hijri 和 Gregorian

Yahya Mohammed Ammouri
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.43/5 (4投票s)

2015 年 5 月 1 日

CPOL

3分钟阅读

viewsIcon

16868

downloadIcon

80

按键时自动根据 Java 脚本方程计算 Hijri 和 Gregorian。

您可以在这里尝试在线演示 here.

引言

两年前我开发了一个用户控件，用于支持希吉里历和公历日期输入 (文章)。 我收到了很多关于更改页面文化和处理 Ajax 的抱怨。

即使我自己在使用双语页面时，也发现使用该用户控件有些困难。

这个用户控件的理念是完全使用 JavaScript，并在按键后自动在希吉里历和公历之间转换，无需任何 ajax 或回传。

背景

您需要具备关于 如何使用用户控件 的背景知识，并熟悉 JavaScript 概念

使用用户控件

只需将用户控件拖放到您的 ASPX 页面中即可。

<uc1:uchijrigregorian enablefields="True" errormsgforrequiredfield="Required" id="dtExpiryDate" requiredfield="True" runat="server" validationgroup="submit">
</uc1:uchijrigregorian>

用户控件属性
用户控件公开五个属性：Clear、Enabled、GregorianDate、HijriDate、RequiredField 和三个与必填字段相关的属性（RequiredFieldText、ErrorMsgForRequiredField 和 ValidationGroup）

//get and set the gregorian date (date format need to be always dd/MM/yyyy)
dtBirthDate.GregorianDate = "01/07/1982";
DateTime gregBirthDate = DateTime.ParseExact(dtBirthDate.GregorianDate, "dd/MM/yyyy", null);

//get and set the Hijri date (Date format need to be always dd/MM/yyyy)
dtBirthDate.HijriDate = "07/08/1402";
string strHijriBirthDate = dtBirthDate.HijriDate;

//Enable or Disable the user control
dtBirthDate.Enabled = false;
dtBirthDate.Enabled = true;

//clear method to reset the control
dtBirthDate.Clear();

//Required Field validator Properties
dtBirthDate.RequiredField = true;
dtBirthDate.ValidationGroup = "Submit";
dtBirthDate.ErrorMsgForRequiredField = "Please fill in the Date";

先决条件
您需要拥有 .Net Framwork 4.5 或更高版本，因为 UmAlQuraCalendar 在此版本中进行了更新，以接受更广泛的日期范围。
如果您有旧版本的 .Net framework，您将在某些情况下收到异常 "字符串表示的 DateTime 在日历 System.Globalization.UmAlQuraCalendar 中不受支持"

关注点

Java Script 日期方程式
我使用了广泛流行的 Java script 方程来在希吉里历和公历日期之间进行转换，实际上我不知道这些方程的真正所有者

关闭文本框的自动完成功能
此属性受浏览器支持，该浏览器会显示您之前在该字段中输入的值。 由于我依赖于键盘输入值，我通过 (autocomplete="off") 关闭了此属性

CodeFile 或 CodeBehind
在用户控件页面指令中，您需要根据您的应用程序的性质放置 CodeBehind 或 CodePage，了解更多详情

当在同一页面上多次使用时，Web用户控件中的 JavaScript 无法工作
为了解决这个问题，我为每个 javascript 方法名称传递一个唯一的键，以便每个用户控件使用唯一的名称呈现其 JavaScript 方法和变量。了解更多详情

   this.rdnHijri.Attributes["onclick"] = "return OnChangeRadio_" + uniqueKey + "();";
   this.rdnGreg.Attributes["onclick"] = "return OnChangeRadio_" + uniqueKey + "();";

 
在 Update Panel 中添加用户控件的问题
当您希望在更新面板中访问 javascript 时，javascript 函数仅在页面加载时运行一次，然后我们需要在每次页面加载时注册脚本。 为了使此控件与 Update panel 兼容，我在页面加载时从后台代码注册了 java script 脚本。了解更多详情

ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "us_JavaScript" + uniqueKey, strScript, true);

UmAlQuraCalendar 的局限性
请注意，UmAlQuraCalendar 类仅支持从 04/30/1900 00.00.00 (公历日期) 到 11/16/2077 23:59:59 (公历日期) 的日期。


浏览器兼容性
此控件已在最新版本的 Firefox、Internet Explorer、Chrome 和 Safari 上进行了测试

使用代码

我在附带的源代码中添加了注释。 因此它将非常容易理解。
此外，我将 Javascript 函数添加到了单独的文件中，以使其更具可读性； 因为在后台代码注册中的 javascript 不容易理解或维护。

最后

欢迎对该用户控件的进一步改进提出任何意见、想法和建议。

参考文献

历史

  • 版本 1.0: 01/05/2015.
© . All rights reserved.