Dec 28, 2015, 6:11 PM
Date Time Field
DateTimeField.cs
English (Australia) - en-AU
Portuguese (Brazil) - pt-BR
Chinese (Traditional, Taiwan) - zh-TW
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Text.RegularExpressions;
using Ext.Net;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
namespace SandBox.UX
{
public sealed class DateTimeField : DateField
{
public DateTimeField()
{
Load += DateTimeField_Load;
}
protected override List<ResourceItem> Resources
{
get
{
ResourceManager.RegisterControlResources<InputMask>();
return base.Resources;
}
}
private void DateTimeField_Load(object sender, EventArgs e)
{
DateTimeFormatInfo dateTimeFormat = ResourceManager.GetInstance().CurrentLocale.DateTimeFormat;
FactoryAlias = "dateTimeField";
Format = System.Text.RegularExpressions.Regex.Replace(string.Format("{0} {1}", dateTimeFormat.ShortDatePattern, dateTimeFormat.LongTimePattern), @"\b(d{1}|h{1}|m{1})\b", "$1$1", RegexOptions.IgnoreCase);
string mask = System.Text.RegularExpressions.Regex.Replace(Format, "[dmyhs]", "9", RegexOptions.IgnoreCase);
if (!string.IsNullOrEmpty(dateTimeFormat.AMDesignator))
{
string amDesignator = dateTimeFormat.AMDesignator.ToLower();
string pmDesignator = dateTimeFormat.PMDesignator.ToLower();
char maskSymbol = '¢';
string hourDesignatorMask = string.Empty;
JObject hourDesignatorSymbols = new JObject();
for (int index = 0; index < dateTimeFormat.AMDesignator.Length; index++)
{
string currentSymbol = (maskSymbol++).ToString();
hourDesignatorSymbols.Add(currentSymbol, JToken.FromObject(new { regex = string.Format("[{0}{1}]", amDesignator[index], pmDesignator[index]) }));
hourDesignatorMask += currentSymbol;
}
mask = System.Text.RegularExpressions.Regex.Replace(mask, "tt", hourDesignatorMask, RegexOptions.IgnoreCase);
CustomConfig.Add(new ConfigItem
{
Name = "hourDesignatorSymbols",
Value = hourDesignatorSymbols.ToString(Formatting.None),
Mode = ParameterMode.Raw
});
}
CustomConfig.Add(new ConfigItem
{
Name = "mask",
Value = mask
});
CustomConfig.Add(new ConfigItem
{
Name = "dateSeparator",
Value = dateTimeFormat.DateSeparator
});
}
}
}
DateTimeField.jsExt.define(Ext.String.format("{0}.DateTimeField", Ext.net.ResourceMgr.ns), {
alias: "widget.dateTimeField",
extend: "Ext.form.field.Date",
initComponent: function () {
var me = this;
me.submitFormat = me.format;
me.maskValuesCount = (me.mask.match(new RegExp(Ext.String.format("[^ :{0}]", me.dateSeparator), "g")) || []).length;
me.plugins = [{
ptype: "inputmask",
mask: me.mask,
maskSymbols: me.hourDesignatorSymbols
}]
me.callParent(arguments);
},
getErrors: function () {
var me = this;
if (Ext.isEmpty(me.inputMask.getUnmaskedValue()) && me.allowBlank === false) {
return [me.blankText];
}
return this.callParent(arguments);
},
isValid: function () {
var me = this;
if (me.hidden || me.disabled) {
return true;
}
var unmaskedValue = me.inputMask.getUnmaskedValue();
if ((Ext.isEmpty(unmaskedValue) && me.allowBlank) || (me.hasFocus && unmaskedValue.length < me.maskValuesCount)) {
me.clearInvalid();
return true;
}
return me.validateValue(me.processRawValue(me.getRawValue()));
}
});
Override.jsExt.onReady(function () {
if (Ext.net.InputMask) {
Ext.net.InputMask.override({
isValueValid: function () {
if (this.cmp.xtype == 'dateTimeField' && Ext.isEmpty(this.getUnmaskedValue())) {
return true;
}
return this.callParent(arguments);
},
useRaw: function (cmp) {
return cmp.xtype == 'dateTimeField' ? true : this.callParent(arguments)
}
});
}
});
Web.config<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.web>
<pages>
<controls>
<add assembly="Ext.Net" namespace="Ext.Net" tagPrefix="ext" />
<add assembly="SandBox" namespace="SandBox.UX" tagPrefix="cux" />
</controls>
</pages>
</system.web>
</configuration>
Test Page<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!DOCTYPE html>
<html>
<head runat="server">
<script src="<%=Url.Content("~/Resources/Override.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Resources/DateTimeField.js")%>" type="text/javascript"></script>
<script type="text/javascript">
var SubmitValues = function (form) {
Ext.Msg.show({ title: 'Ext.NET', msg: Ext.encode(form.getFieldValues()), modal: false, buttons: Ext.Msg.OK });
}
</script>
</head>
<body>
<ext:ResourceManager ScriptMode="Debug" Locale="en-US" Theme="Crisp" runat="server" />
<ext:FormPanel ID="_frm" BodyPadding="5" Title="Form" DefaultAnchor="100%" Width="300" Height="200" Border="true" runat="server">
<FieldDefaults LabelAlign="Top" MsgTarget="Side" />
<Items>
<%--Start--%>
<cux:DateTimeField FieldLabel="Start" Name="Start" MinDate="01/01/2010" MaxDate="01/02/2016" AllowBlank="true" runat="server" />
<%--End--%>
<cux:DateTimeField FieldLabel="End" Name="End" MinDate="01/01/2010" MaxDate="01/02/2016" AllowBlank="true" runat="server" />
</Items>
<Buttons>
<ext:Button Text="Submit Values" runat="server">
<Listeners>
<Click Handler="SubmitValues(#{_frm}.form);" />
</Listeners>
</ext:Button>
</Buttons>
<Bin>
<ext:Store ID="_str" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Start" Type="Date" />
<ext:ModelField Name="End" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Bin>
</ext:FormPanel>
</body>
</html>
English - en-US English (Australia) - en-AU
Portuguese (Brazil) - pt-BR
Chinese (Traditional, Taiwan) - zh-TW
Last edited by RaphaelSaldanha; Dec 29, 2015 at 10:25 AM.