PDA

View Full Version : Date Time Field



RaphaelSaldanha
Dec 28, 2015, 6:11 PM
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.DateTi meFormat;

FactoryAlias = "dateTimeField";

Format = System.Text.RegularExpressions.Regex.Replace(strin g.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(Forma t, "[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
24376

English (Australia) - en-AU
24375

Portuguese (Brazil) - pt-BR
24377

Chinese (Traditional, Taiwan) - zh-TW
24378

RaphaelSaldanha
Dec 28, 2015, 7:47 PM
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.

RaphaelSaldanha
Dec 29, 2015, 4:54 PM
On the following example, select a date using date picker
24380

Now focus Start field, at last character, then press backspace
24381

Field Start has been wrongly cleared
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 ()));
}
});

SweetyBehin
Jan 07, 2016, 3:27 AM
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?

RaphaelSaldanha
Jan 07, 2016, 12:24 PM
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 (http://forums.ext.net/showthread.php?3440)
More Information Required (http://forums.ext.net/showthread.php?10205)