What's New?

[CLOSED] DatePicker Validation

  1. #1
    Jul 22, 2010, 1:43 PM

    [CLOSED] DatePicker Validation

    Hi,

    I have used for two date picker controls in my application. The following source i have used in my page.
    Those controls are worked fine in client side for validation on two dates. Also it showing alert tooltip. 
    <tr>
<td>
<ext:LabelID="lbl_etd"runat="server">
</ext:Label>
</td>
<td>
<ext:DateFieldID="dtpick_etd"runat="server"Width="180"Vtype="daterange"FieldLabel="To">
<CustomConfig>
<ext:ConfigItemName="endDateField"Value="#{dtpick_eta}"Mode="Value"/>
</CustomConfig>
</ext:DateField>
</td>
</tr>
<tr>
<td>
<ext:LabelID="lbl_eta"runat="server">
</ext:Label>
</td>
<td>
<ext:DateFieldID="dtpick_eta"runat="server"Width="180"Vtype="daterange"FieldLabel="From">
<CustomConfig>
<ext:ConfigItemName="startDateField"Value="#{dtpick_etd}"Mode="Value"/>
</CustomConfig>
</ext:DateField>
</td>
</tr>
    Click image for larger version.  Name: issue..jpg  Views: 131  Size: 12.6 KB  ID: 1405

    Even i am trying to click save button those values are updated in database.

    How to show alert window if mismatch the two date values when i click a button?

    Regards

    Rameshkumar.T
    Last edited by Daniil; Jul 23, 2010 at 7:17 AM.
  2. #2
    Jul 22, 2010, 4:34 PM
    Hello!

    Please look at this sample code:
    <script runat="server">
    
    protected void Save_Click(object sender, DirectEventArgs e)
    {
        X.Msg.Alert("Hello!", "Hello from server!").Show();
    }
           
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        var save = function() {
            if (!dtpick_etd.isValid(false) || !dtpick_eta.isValid(false)) {
                Ext.Msg.alert("Error!", "One or two values are invalid!");
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
    <ext:ResourceManager runat="server"></ext:ResourceManager>
    <form runat="server">
    <tr>
        <td>
            <ext:Label ID="lbl_etd" runat="server">
            </ext:Label>
        </td>
        <td>
            <ext:DateField ID="dtpick_etd" runat="server" Width="180" Vtype="daterange" FieldLabel="To">
                <CustomConfig>
                    <ext:ConfigItem Name="endDateField" Value="#{dtpick_eta}" Mode="Value" />
                </CustomConfig>                
            </ext:DateField>
        </td>
    </tr>
    <tr>
        <td>
            <ext:Label ID="lbl_eta" runat="server">
            </ext:Label>
        </td>
        <td>
            <ext:DateField ID="dtpick_eta" runat="server" Width="180" Vtype="daterange" FieldLabel="From">
                <CustomConfig>
                    <ext:ConfigItem Name="startDateField" Value="#{dtpick_etd}" Mode="Value" />
                </CustomConfig>
            </ext:DateField>
        </td>
    </tr>
    <ext:Button runat="server" Text="Save">
        <Listeners>
            <Click Fn="save" />
        </Listeners>
        <DirectEvents>
            <Click OnEvent="Save_Click" />
        </DirectEvents>    
    </ext:Button>
    </form>
</body>
</html>
    Here I use the isValid method of a DateField class to define value is valid or not.

    isValid    ( Boolean preventMark ) : Boolean Returns whether or not the field value is currently valid by validating the processed value of the field.
    Returns whether or not the field value is currently valid by validating the processed value of the field.
    Note: disabled fields are ignored.

    Parameters:
    • preventMark : BooleanTrue to disable marking the field invalid

    Returns:
    • BooleanTrue if the value is valid, else false


    Also I use returning false from the Click event listener (save function) on client side to stop event if any of DateField's values are invalid.
    Last edited by Daniil; Jul 22, 2010 at 4:36 PM.
  3. #3
    Jul 23, 2010, 6:06 AM

    DatePicker Validation

    Quote Originally Posted by Daniil.Veriga View Post
    Hello!

    Please look at this sample code:
    <script runat="server">
 
    protected void Save_Click(object sender, DirectEventArgs e)
    {
        X.Msg.Alert("Hello!", "Hello from server!").Show();
    }
 
</script>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        var save = function() {
            if (!dtpick_etd.isValid(false) || !dtpick_eta.isValid(false)) {
                Ext.Msg.alert("Error!", "One or two values are invalid!");
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
    <ext:ResourceManager runat="server"></ext:ResourceManager>
    <form runat="server">
    <tr>
        <td>
            <ext:Label ID="lbl_etd" runat="server">
            </ext:Label>
        </td>
        <td>
            <ext:DateField ID="dtpick_etd" runat="server" Width="180" Vtype="daterange" FieldLabel="To">
                <CustomConfig>
                    <ext:ConfigItem Name="endDateField" Value="#{dtpick_eta}" Mode="Value" />
                </CustomConfig>                
            </ext:DateField>
        </td>
    </tr>
    <tr>
        <td>
            <ext:Label ID="lbl_eta" runat="server">
            </ext:Label>
        </td>
        <td>
            <ext:DateField ID="dtpick_eta" runat="server" Width="180" Vtype="daterange" FieldLabel="From">
                <CustomConfig>
                    <ext:ConfigItem Name="startDateField" Value="#{dtpick_etd}" Mode="Value" />
                </CustomConfig>
            </ext:DateField>
        </td>
    </tr>
    <ext:Button runat="server" Text="Save">
        <Listeners>
            <Click Fn="save" />
        </Listeners>
        <DirectEvents>
            <Click OnEvent="Save_Click" />
        </DirectEvents>    
    </ext:Button>
    </form>
</body>
</html>
    Here I use the isValid method of a DateField class to define value is valid or not.

    isValid( Boolean preventMark ) : Boolean Returns whether or not the field value is currently valid by validating the processed value of the field.
    Returns whether or not the field value is currently valid by validating the processed value of the field.
    Note: disabled fields are ignored.



    Parameters:
    • preventMark : BooleanTrue to disable marking the field invalid
    Returns:
    • BooleanTrue if the value is valid, else false
    Also I use returning false from the Click event listener (save function) on client side to stop event if any of DateField's values are invalid.
    Hi Daniil,

    This is working fine.

    Thank you

    Rameshkumar.T

Similar Threads

  1. Client Side Validation and Validation Status
    By speddi in forum 1.x Help
    Replies: 8
    Last Post: Nov 03, 2011, 11:24 AM
  2. [CLOSED] how to control the validation sequence between the client side validation and remote validation
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 11, 2011, 9:43 AM
  3. [CLOSED] [1.0] FormPanel Validation Bug if it contain DatePicker!
    By webclouder in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 29, 2010, 7:48 AM
  4. [CLOSED] DatePicker:
    By RomualdAwessou in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Jul 09, 2010, 2:50 PM
  5. [CLOSED] datepicker from to example
    By LeeTheGreek in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 04, 2010, 2:29 PM

Tags for this Thread

Posting Permissions