Date Time Field

[RaphaelSaldanha]

DateTimeField.cs

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.js

Ext.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.js

Ext.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