[CLOSED] DateField - Configuration / Setup

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] DateField - Configuration / Setup

    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
  2. #2

    RE: [CLOSED] DateField - Configuration / Setup

    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
  3. #3

    RE: [CLOSED] DateField - Configuration / Setup

    *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/Date...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
    Last edited by geoffrey.mcgill; Jan 19, 2011 at 6:38 AM.
    Vladimir Shcheglov
    Sr. Developer
  4. #4

    RE: [CLOSED] DateField - Configuration / Setup

    Hi Vladimir,

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

    Regards
    Steven
  5. #5

    RE: [CLOSED] DateField - Configuration / Setup

    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
    Last edited by geoffrey.mcgill; Jan 19, 2011 at 6:38 AM.
  6. #6

    RE: [CLOSED] DateField - Configuration / Setup

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

    RE: [CLOSED] DateField - Configuration / Setup

    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.
    Geoffrey McGill
    Founder & CEO
  8. #8

    RE: [CLOSED] DateField - Configuration / Setup

    Hi Geoffrey,

    Thanks for the update and feedback :)

    Regards
    Steven
  9. #9

    RE: [CLOSED] DateField - Configuration / Setup

    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)
  10. #10

    RE: [CLOSED] DateField - Configuration / Setup

    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
    Founder & CEO
Page 1 of 2 12 LastLast

Similar Threads

  1. Install and Setup Guide for Visual Studio
    By urbn in forum Open Discussions
    Replies: 48
    Last Post: Jun 15, 2017, 9:28 PM
  2. Web.Config setup for IIS7
    By mattwoberts in forum 1.x Help
    Replies: 2
    Last Post: Dec 15, 2010, 10:42 AM
  3. Replies: 2
    Last Post: Oct 21, 2010, 4:51 PM
  4. [CLOSED] Creating a SVN setup
    By r_honey in forum 1.x Premium Help
    Replies: 2
    Last Post: Jul 10, 2010, 8:39 AM
  5. 1.0 Sample Site Setup
    By rthiney in forum 1.x Premium Help
    Replies: 0
    Last Post: Mar 02, 2010, 10:50 AM

Posting Permissions