Date Time Field

  1. #1

    Date Time Field

    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
    Click image for larger version. 

Name:	unitedstates.png 
Views:	20 
Size:	4.3 KB 
ID:	24376

    English (Australia) - en-AU
    Click image for larger version. 

Name:	australia.png 
Views:	6 
Size:	4.3 KB 
ID:	24375

    Portuguese (Brazil) - pt-BR
    Click image for larger version. 

Name:	brazil.png 
Views:	9 
Size:	4.2 KB 
ID:	24377

    Chinese (Traditional, Taiwan) - zh-TW
    Click image for larger version. 

Name:	chinese.png 
Views:	6 
Size:	4.5 KB 
ID:	24378
    Last edited by RaphaelSaldanha; Dec 29, 2015 at 11:25 AM.
  2. #2
    The example provided above is not working as expected on the following cultures: Afrikaans, Greek (Greece), Persian, Korean and Vietnamese.

    Please refer the following thread: http://forums.ext.net/showthread.php?60467.
    Last edited by RaphaelSaldanha; Dec 29, 2015 at 3:18 AM.
  3. #3
    On the following example, select a date using date picker
    Click image for larger version. 

Name:	dtf001.png 
Views:	7 
Size:	4.5 KB 
ID:	24380

    Now focus Start field, at last character, then press backspace
    Click image for larger version. 

Name:	dtf002.png 
Views:	6 
Size:	1.4 KB 
ID:	24381

    Field Start has been wrongly cleared
    Click image for larger version. 

Name:	dtf003.png 
Views:	5 
Size:	1.1 KB 
ID:	24382

    The issue presented above is related to the following issue: http://forums.ext.net/showthread.php?50002

    <!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>
    </head>
    <body>
        <ext:ResourceManager ScriptMode="Debug" Locale="en-US" Theme="Crisp" runat="server" />
        <ext:FormPanel Margin="10" ID="_frm" BodyPadding="5" Title="Form" DefaultAnchor="100%" Width="300" Height="120" Border="true" runat="server">
            <FieldDefaults LabelAlign="Top" MsgTarget="Side" />
            <Items>
                <%--Start--%>
                <cux:DateTimeField FieldLabel="Start" Name="Start" AllowBlank="true" runat="server" />
            </Items>
            <Bin>
                <ext:Store ID="_str" runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="Start" Type="Date" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Bin>
        </ext:FormPanel>
    </body>
    </html>
    It's possible to overcome the issue by overriding DateTimeField's setValue, as shown below:
    setValue: function (value) {
        var me = this;
        me.callParent(arguments);
    
        var inputMask = me.inputMask;
        if (inputMask && !inputMask.disabled) {
            inputMask.validateMask();
        }
    }
    So we get the following 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 = [{
                alwaysShow: false,
                ptype: "inputmask",
                mask: me.mask,
                maskSymbols: me.hourDesignatorSymbols
            }]
            me.callParent(arguments);
        },
        setValue: function (value) {
            var me = this;
            me.callParent(arguments);
    
            var inputMask = me.inputMask;
            if (inputMask && !inputMask.disabled) {
                inputMask.validateMask();
            }
        },
        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()));
        }
    });
    Last edited by RaphaelSaldanha; Dec 29, 2015 at 5:56 PM.
  4. #4

    Problem in the DateField Size

    I am using the DateField inside a panel... If the panel is visible during page load, the datetfield is displaying correctly. If the panel is invisible during page load and made to visible only after a event trigger, the datefiled is not displaying correctly.
    Same happens with the file upload control also. The width of the control reduces...
    Any advise?
  5. #5
    Hello SweetyBehin, welcome to the Ext.NET forums.

    I am using the DateField inside a panel... If the panel is visible during page load, the datetfield is displaying correctly. If the panel is invisible during page load and made to visible only after a event trigger, the datefiled is not displaying correctly.
    Same happens with the file upload control also. The width of the control reduces...
    Any advise?
    Please, open a new thread (It wil help us to track the issue) and post a complete (but simplified) code sample demonstrating how to reproduce the issue.

    Some more details are in our forums guidelines.
    Forum Guidelines For Posting New Topics
    More Information Required
    Last edited by RaphaelSaldanha; Jan 07, 2016 at 1:51 PM.

Similar Threads

  1. [CLOSED] Date time field editing in gridpanel
    By bossun in forum 2.x Premium Help
    Replies: 9
    Last Post: Nov 05, 2012, 6:18 AM
  2. Replies: 3
    Last Post: Jul 24, 2012, 9:40 PM
  3. date time field in grid panel
    By sunshine in forum 1.x Help
    Replies: 1
    Last Post: Jul 28, 2011, 1:53 AM
  4. [CLOSED] Field with Date And Time
    By fehmeed.bilgrami in forum 1.x Premium Help
    Replies: 7
    Last Post: Mar 10, 2010, 7:47 AM
  5. Time Field Time Format Setting
    By Dinesh.T in forum 1.x Help
    Replies: 0
    Last Post: Aug 18, 2009, 4:21 AM

Posting Permissions