PDA

View Full Version : [CLOSED] DateField - Configuration / Setup



stevenoc
Jul 18, 2008, 5:45 AM
Hi there,

I have a few questions with regards to the DateField control:
a.) Does anyone know how one could add an "input mask" onto the dateField control?

b.) How can one change the "InvalidText" message ("<DateField Text value> is not a valid date - it must be in the format Y/m/d), as all I want to change is the format section (to yyyy/mm/dd).


On a side note:
With regards to the validation, take for example the following date "2008/07/01". Surely the validation should pass the following as a valid date "2008/7/1" as it is the same as "2008/07/01".

Regards
Steven O'Connor

stevenoc
Jul 18, 2008, 6:11 AM
Hi there (again)

Anyone know if its at all possible to link to DateFields together?

i.e.
DateField1 = FromDate
DateField2 = ToDate

If a value is specified / selected in the "FromDate field", the "ToDate field" doesn't allow any date prior to the "FromDate" entry to be specified / selected and vice versa.


Regards
Steven O'Connor

Vladimir
Jul 18, 2008, 10:16 AM
*Hi Steven,

1. About input mask - the orginal ExtJs field has no mask. But ExtJs community wrote several mask plugins. Using one of them

ExtJs Forum post: http://extjs.com/forum/showthread.php?t=21040

Project on GoogleCode: http://code.google.com/p/cherryonext/

I wrote Coolite Plugin. Please pay attention that Coolite plugins works only with v0.6 (the version 0.6 is available via SVN only and will be publicly available with the release of v0.6)

2.* For set custom InvalidText just value for InavalidText property. For example

InvalidText="{0} is not a valid date - it must be in the format {1}"

where {0} - value; {1} - format

3. About to link to DateFields together. It takes a little bit of hacking for this to work but it is possible (thanks ExtJS forum)

I wrote example. Please see*http://examples1.ext.net/#/Form/DateField/From-To_Range/

As I mentioned this example works only with v0.6 but if you remove plugin you can play with it with your local Coolite assembly

Hope this helps

stevenoc
Jul 19, 2008, 4:43 AM
Hi Vladimir,

Thanks for the update (and url references with regards to the input masks).

Regards
Steven

stevenoc
Jul 21, 2008, 10:26 AM
Hi Valdimir,

Just a note with regards to the validation (QTip message).
InvalidText = "{0} is not a valid date - it must be in the format {1}"

In your example you've specified the following format "Y/m/d".

If for example you type in "a" into either of the datefields, the boxes are highlighted in red (denoting an error).
If you now hover over the respective field, the qtip is as follows:

____/__/__ is not a valid date - it must be in the format Y/m/j

Surely the format specified in the QTip should match the format specified on the control?

Regards
Steven

stevenoc
Jul 21, 2008, 1:59 PM
Hi there,

Tis I yet again :)

I've no idea if this is a bug or not but I've run into the following problem.

Page / User Control contains one (or more) DateField controls.

In setting the "format" property I get mixed results after the page has posted back to the server.
My "format" property was original set to "yyyy/MM/dd", after reading about the specific formats allowed
(from the ext API docs) I ended up using "Y/n/j".

The only problem was that if I set / selected / specified a date and then caused a postback, the DateField
was not reset to the selected / specified value.

I thought that this was strange and then created a test page with 6 DateField controls, each control set to a different format.

Control 1 - 'Y/m/d'
Control 2 - 'Y/n/d'
Control 3 - 'Y/n/j'
Control 4 - 'yyyy/M/d'
Control 5 - 'yyyy/m/d'
Control 6 - 'yyyy/m/j'

Page contains 2 buttons:
1.) To set the date of all controls to the current date
2.) Button to trigger a postback

The following result occurs after setting the default dates and causing the postback:
Control 1 - Date not populated after postback
Control 2 - Date not populated after postback
Control 3 - Date not populated after postback
Control 4 - Date populated correctly
Control 5 - Date populated, but with the incorrect month. Year and Day are correct.
Control 6 - Date not populated after postback

It may be that I'm misunderstanding the allowable / usable Date formats, but I thought you should know my findings :)

Here follows the code for my test page:



<%@ Page Language="C#" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{

}
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Test Page</title>
<ext:ScriptManager ID="extScriptManager" runat="server" CleanResourceUrl="true" />
</head>
<body>
<form id="form1" runat="server">
<div style="width:100%">
<table>
<tr>
<td width="35px" align="right">
<asp:Label ID="Label1" runat="server" Text="Test1:" Font-Names="Tahoma" Font-Size="8pt" />
</td>
<td width="5px" />
<td>
<ext:DateField
runat="server"
ID="DateField1"
Format="Y/m/d"
InvalidText="{0} is not a valid date - it must be in the format {1}"
AllowBlank="True">
</ext:DateField>
</td>
<td width="5px" />
<td>
<asp:Label ID="Label6" runat="server" Text="(Y/m/d)" Font-Names="Tahoma" Font-Size="8pt" />
</td>
</tr>
<tr>
<td width="35px" align="right">
<asp:Label ID="Label2" runat="server" Text="Test2:" Font-Names="Tahoma" Font-Size="8pt" />
</td>
<td width="5px" />
<td>
<ext:DateField
runat="server"
ID="DateField2"
Format="Y/n/d"
InvalidText="{0} is not a valid date - it must be in the format {1}"
EnableViewState="True">
</ext:DateField>
</td>
<td width="5px" />
<td>
<asp:Label ID="Label7" runat="server" Text="(Y/n/d)" Font-Names="Tahoma" Font-Size="8pt" />
</td>
</tr>
<tr>
<td width="35px" align="right">
<asp:Label ID="Label3" runat="server" Text="Test3:" Font-Names="Tahoma" Font-Size="8pt" />
</td>
<td width="5px" />
<td>
<ext:DateField
runat="server"
ID="DateField3"
Format="Y/n/j"
InvalidText="{0} is not a valid date - it must be in the format {1}"
EnableViewState="True">
</ext:DateField>
</td>
<td width="5px" />
<td>
<asp:Label ID="Label8" runat="server" Text="(Y/n/j)" Font-Names="Tahoma" Font-Size="8pt" />
</td>
</tr>
<tr>
<td width="35px" align="right">
<asp:Label ID="Label4" runat="server" Text="Test4:" Font-Names="Tahoma" Font-Size="8pt" />
</td>
<td width="5px" />
<td>
<ext:DateField
runat="server"
ID="DateField4"
Format="yyyy/M/d"
InvalidText="{0} is not a valid date - it must be in the format {1}"
EnableViewState="True">
</ext:DateField>
</td>
<td width="5px" />
<td>
<asp:Label ID="Label9" runat="server" Text="(yyyy/M/d)" Font-Names="Tahoma" Font-Size="8pt" />
</td>
</tr>
<tr>
<td width="35px" align="right">
<asp:Label ID="Label5" runat="server" Text="Test5:" Font-Names="Tahoma" Font-Size="8pt" />
</td>
<td width="5px" />
<td>
<ext:DateField
runat="server"
ID="DateField5"
Format="yyyy/m/d"
InvalidText="{0} is not a valid date - it must be in the format {1}"
EnableViewState="True">
</ext:DateField>
</td>
<td width="5px" />
<td>
<asp:Label ID="Label10" runat="server" Text="(yyyy/m/d)" Font-Names="Tahoma" Font-Size="8pt" />
</td>
</tr>
<tr>
<td width="35px" align="right">
<asp:Label ID="Label11" runat="server" Text="Test6:" Font-Names="Tahoma" Font-Size="8pt" />
</td>
<td width="5px" />
<td>
<ext:DateField
runat="server"
ID="DateField6"
Format="yyyy/m/j"
InvalidText="{0} is not a valid date - it must be in the format {1}"
EnableViewState="True">
</ext:DateField>
</td>
<td width="5px" />
<td>
<asp:Label ID="Label12" runat="server" Text="(yyyy/m/j)" Font-Names="Tahoma" Font-Size="8pt" />
</td>
</tr>
</table>
<br />
<asp:Button ID="Button1" runat="server" Font-Names="Tahoma" Font-Size="8pt" &#111;nclick="Button1_Click" Text="Click Me!"/>
<asp:Button ID="Button2" runat="server" Font-Names="Tahoma" Font-Size="8pt" Text="Set Default Dates" OnClientClick="setDates();return false;"/>


</form>

<script type="text/javascript">
function setDates() {
var date1 = Ext.getCmp("<%= DateField1.ClientID %>");
var date2 = Ext.getCmp("<%= DateField2.ClientID %>");
var date3 = Ext.getCmp("<%= DateField3.ClientID %>");
var date4 = Ext.getCmp("<%= DateField4.ClientID %>");
var date5 = Ext.getCmp("<%= DateField5.ClientID %>");
var date6 = Ext.getCmp("<%= DateField6.ClientID %>");

var today = new Date();

date1.setValue(today);
date2.setValue(today);
date3.setValue(today);
date4.setValue(today);
date5.setValue(today);
date6.setValue(today);
}
</script>
</body>
</html>


Regards Steven

geoffrey.mcgill
Jul 21, 2008, 3:03 PM
Hi Steven,

I think there was a bit of a mistake in the sample provided regarding the .Format property.

The .Format property should be set with a .NET DateTime format specifier. The .Format is then converted automatically to the php/unix style of date format string required by ExtJS.

Thanks for the tests! Based on your results I would also expect only Control 4 ('yyyy/M/d') to work, as that is the only pure .NET format.

For both DateField's the .Format property should be set to "yyyy/M/d".

The problem with .InvalidText property is that the second argument "{1}" uses the converted format, not the original .NET format. In this scenario I think the best option would be to set/hard-code the format right in the .InvalidText message.

The following sample demonstrates both revisions. 1) setting the .Format property with a .NET format string, 2) setting the date format in the .InvalidText message.

Example


<ext:DateField
runat="server"
ID="DateField1"
Format="yyyy/M/d"
InvalidText="{0} is not a valid date - it must be in the format 'YYYY/M/D'"
AllowBlank="True"
/>

The following Datejs documentation provides a good list of available .NET format strings.

http://code.google.com/p/datejs/wiki/FormatSpecifiers

I'll also update the sample in sandbox with the revised code.

I hope this helps clarify things.

stevenoc
Jul 21, 2008, 5:20 PM
Hi Geoffrey,

Thanks for the update and feedback :)

Regards
Steven

stevenoc
Jul 22, 2008, 4:30 AM
Hi there,

Making use of the code (excl. input mask) from the sandbox, with the following changes:
a.) Format change: yyyy/M/d
b.) Added a button to the page (for postbacks)


Scenario:
a.) User selects a date (From / To / Both).
b.) User clicks on the button, and page is posted back to the server

At this point, the controls are repopulated with the user's selected values.
If (s)he then proceeds to remove / delete one of the dates by:
a.) Highlighting one / any of the populated datefields and then hitting / pressing the "Del" / "Backspace" key
b.) Clicks on the button

After the postback, the "removed" / "deleted" date fields are repopulated with their respective values.

My question is as follows:
Is it possible to retain the "cleared" values.

Note:
Prior to the postback, the values of the datefields are correct (as I created a func. which just created alert boxes with the current values of all the datefields).


Regards
Steven

ps. The DateField controls contain the following:
a.) FieldLabel
b.) HideLabel
c.) LabelSeparator

If these are populated, and the "HideLabel" property is set to false, is it meant to appear?
(In v.0.5.4, setting these properties does not result in anything being displayed next to the control)

geoffrey.mcgill
Jul 22, 2008, 6:48 AM
Hi Steven,

Thanks for pointing out the bug re: the DateField not maintaining it's cleared value. I think this bug was (re)introduced because of a recent fix for another bug. I've fixed the clearing bug and everything should be working better now. The fix will be included with the v0.6 release or available in svn.

On a somewhate related note, if you want to clear the input field value from code-behind, you can use the .Clear() Method.

Example


this.DateField1.Clear();

Currently the FieldLabel property has not been implemented. The property/functionality will be available when using the DateField (or other form controls) inside a <ext:FormPanel>, which may be available with the v0.6 release, although is currently planned for v0.7.

I hope this helps answer your questions.

geoffrey.mcgill
Sep 07, 2008, 8:06 AM
Quick Note: The <ext:FormLayout> will be included with the v0.6 release. The <ext:FormLayout> supports the FieldLabel property.*

The following thread demonstrates a simple sample, see*http://forums.ext.net/showthread.php?262

Hope this helps.

haltenberg
Sep 11, 2008, 2:42 PM
Vladimir,

Could you please update the example to include the source code?


Thank you!

geoffrey.mcgill
Sep 11, 2008, 3:42 PM
I polished up the sample slightly and add added the Source Code

Hope this helps.

haltenberg
Sep 11, 2008, 5:00 PM
Awesome! Thank you, Geoffrey!

Hope the topic about sandbox samples (http://forums.ext.net/showthread.php?188) is still on the to-do list of Coolite team ;-)

Update: the sandbox sample looks weird in Chrome (the window is rendered to the top left of the viewport and only bottom right part of it is visible).

ljcorreia
Sep 17, 2008, 10:13 AM
geoffrey.mcgill (9/11/2008)I polished up the sample slightly and add added the Source Code, see http://sandbox.ext.net/Form/DateField/Default.aspx

Hope this helps.



Hi Geoffrey,
I could not see the source code on the sandbox DateField sample above. Clicking on the source button it does not show the code.

I am wondering if you can give me an example how to bind information to DateField, if it is possible. I am placing a DateField inside a DetailsView, and I don't know how to deal with the date and format. Another concern I have is working with null. How is it possible to deal with null comming from the database on a databound manner?

Appreciate your help.

Thanks
Leo.

haltenberg
Sep 17, 2008, 12:22 PM
I also confirm that the sandbox example is brocken (click on the "Source" button doesn't pop up the window). :-(

geoffrey.mcgill
Sep 17, 2008, 4:32 PM
Source code button is working again.

The button stopped working because of the following change we implemented, see http://forums.ext.net/showthread.php?391

We're also wrapping up a new Examples Explorer which will help stabalize the "official" code samples. The "sandbox" will still be available and continue to be a source for misc samples and tests.

Hi Leo, can you start an new thread/topic with your DataBinding question. thx.

chispa
Oct 27, 2009, 1:08 PM
How can i get the DateFormat="yyyy-MM-ddThh:mm:ss" to include the milliseconds value of the datetime value. I am currently losing the millisecond value which is very important to my application.