[CLOSED] Blank values of DateField not submitted

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Blank values of DateField not submitted

    Hello

    I am using Ext.net version 4.1.
    "DateField" is not submitting the blank values,
    when we blank out the value on a "DateField", call the "form.getForm().GetFieldValues(false)", the "datefield" is returning the old value instead of empty string.

    What's the work around?

    Advise..
    Last edited by fabricio.murta; Sep 02, 2016 at 8:13 PM.
  2. #2
    Hello @ndotis!

    Please provide a sample reproducing your issue so we can see the issue and be able to provide you advice.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Here is the working sample, on form load "Datefield" displays the current date, clear the value (click the 'X') and then click the button, the alert displays the old value instead of blank value.

    testform1.aspx
    <%@ Page Language="vb"  AutoEventWireup="false" CodeBehind="TestForm1.aspx.vb" Inherits="LPAIndexIntranet.TestForm1" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
    </head>
    <body>
                
        <ext:ResourceManager Theme="Crisp" runat="server">
        </ext:ResourceManager>
    
        
        <ext:FormPanel ID="testFrm" Layout="AnchorLayout" runat="server">
            <Items>
                <ext:FieldContainer ID="_fdc" Layout="HBoxLayout" runat="server">
                    <Items>
                        <ext:DateField ID="fld1" Name="firstFld" runat="server" />
                        <ext:Button
                            ID="Button2"
                            runat="server"
                            Text="Submit">
                            <DirectEvents>
                                <Click OnEvent="SaveData">
                                    <ExtraParams>
                                        <ext:Parameter
                                            Name="values"
                                            Value="#{testFrm}.getForm().getValues()"
                                            Mode="Raw"
                                            Encode="true" />
                                    </ExtraParams>
                                </Click>
                            </DirectEvents>
    
                        </ext:Button>
                    </Items>
    
                </ext:FieldContainer>
            </Items>
        </ext:FormPanel>
        
    </body>
    </html>
    TestForm1.aspx.vb
    Imports Ext.Net
    
    Public Class TestForm1
        Inherits System.Web.UI.Page
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            Me.fld1.Text = DateTime.Now.ToShortDateString
        End Sub
    
        <DirectMethod()>
        Protected Sub SaveData(sender As Object, e As DirectEventArgs)
            Dim values As Dictionary(Of String, String) = JSON.Deserialize(Of Dictionary(Of String, String))(e.ExtraParams("values"))
            Dim sb As New StringBuilder()
    
            For Each value As KeyValuePair(Of String, String) In values
                sb.AppendFormat("{0} = {1}<br />", value.Key, value.Value)
            Next
    
            Ext.Net.X.Msg.Alert("Values", sb.ToString()).Show()
        End Sub
    
    
    End Class
    Last edited by ndotis; Aug 16, 2016 at 11:55 PM.
  4. #4
    Hello!

    The full DateField component handles System.DateTime date format so it can't just be a partial or empty date.

    To attain the behavior you want you'll need to use a TextField with a date picker trigger. Something like this:

    <ext:TextField ID="fld1" Name="firstFld" runat="server" BaseCls="x-form-field-date">
        <Triggers>
            <ext:FieldTrigger Handler="App.dateMenu1.showBy(this);" Icon="Date" />
        </Triggers>
    </ext:TextField>
    <ext:DateMenu runat="server" ID="dateMenu1">
        <Listeners>
            <Select Handler="App.fld1.setValue(Ext.Date.format(date,'d/m/Y'));" />
        </Listeners>
    </ext:DateMenu>
    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    No, it doesn't help.

    I have around 100 DateFields on my form, so I need to define a "DateMenu" for 100 fields? there should be a better solution like modify the form "getValues" function to include the null values too ?

    Advise..

    also, the FULL "DateField" component takes the blank value if I explicity set the values using a "Clear" trigger, but I don't want to do this for all 100 fields, there should be a workaround for this bug !!

    <ext:DateField ID="rowNTPDateFld" Name="ROWNTPDate" runat="server" FieldLabel="ROW Date">                                        
          <Listeners>
            <TriggerClick Handler="#{rowNTPDateFld}.setValue(null);this.getTrigger(0).hide();" />
            <FocusEnter Handler="this.getTrigger(0)[this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
          </Listeners>
          <Triggers>
               <ext:FieldTrigger Icon="Clear" QTip="Remove..." Hidden="true"/>
          </Triggers>
    </ext:DateField>
    Last edited by ndotis; Aug 17, 2016 at 4:16 PM.
  6. #6
    Hello @ndotis!

    Sorry it does not help you at all, but you can use the same date menu on all the hundred fields you have out there. Handling the component differently will require changes to the code and page, unfortunately.
    Fabrício Murta
    Developer & Support Expert
  7. #7
    O.K, if I can use the same "DateMenu" for all the fields how to set the "select" handler relatively, the below select handler is hard-coded to update the "fld1"

    help...

    <ext:DateMenu runat="server" ID="dateMenu1">
        <Listeners>
            <Select Handler="App.fld1.setValue(Ext.Date.format(date,'d/m/Y'));" />
        </Listeners>
    </ext:DateMenu>
  8. #8
    Hello again!

    You can attain such behavior just by syncing what is selected in the field with what is in the picker. The picker's field will always be the component the picker is "aligned" to (side effect of the showBy() call).

    So, in order to clear the golfed code in the handlers, I've written them in a separate object-container and bound them to the menu. Here's the code of the handlers:

    <script type="text/javascript">
        var datePickerHandler = {
            dateFormat: 'd/m/Y', // watch out, it should be in the supported format you're using!
            show: function (item) {
                var presetDate = Ext.Date.parse(item.alignTarget.value, datePickerHandler.dateFormat);
    
                if (presetDate == null) {
                    presetDate = Ext.Date.parse(Ext.Date.now(), 'U')
                }
    
                item.picker.selectedUpdate(presetDate);
            },
            select: function (item, date) {
                var formattedDate = Ext.Date.format(date, datePickerHandler.dateFormat),
                    alignedComponent = item.container.component.alignTarget;
    
                alignedComponent.setValue(formattedDate);
            }
        }
    </script>
    And here's how you use the handlers above with the date menu:

    <ext:DateMenu runat="server" ID="dateMenu1">
        <Listeners>
            <Select Fn="datePickerHandler.select" />
            <Show Fn="datePickerHandler.show" />
        </Listeners>
    </ext:DateMenu>
    Notice I only changed this to reduce the amount of golfed code in the date menu listeners that would make things much harder to understand.

    I am confident you can get your page working in fully with this approach!
    Fabrício Murta
    Developer & Support Expert
  9. #9
    Looks good,
    but since this is a "TextField" using as a date input field, I need to format the data and implement the date validation???

    how the "FormatText" attribute works on a "TextField", can I use that to format the data to date format (mm/dd/yyyy)?
    Is there a Vtype "Date" available or need I need to implement a custom validation?

    Advise..
  10. #10
    Hello @ndotis!

    You'd need to implement a custom validation. But you can parse input dates as shown in the code above, using Ext.Date.parse() and output using Ext.Date.format().

    You might already know but its never too much to leave a reminder for our examples explorer containing validation sample approaches. A good starting point would be: Form fields - Validation - Custom VType.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 2
    Last Post: Oct 09, 2013, 6:43 PM
  2. [CLOSED] UpdateRecordField on store leaves datefield blank
    By Fergus in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Oct 05, 2012, 3:10 PM
  3. datefield and null values
    By PetrSnobelt in forum 1.x Help
    Replies: 0
    Last Post: Jun 06, 2011, 10:51 AM
  4. Alter values of the ext:DateField by JavaScript
    By flaviodamaia in forum 1.x Help
    Replies: 1
    Last Post: Jul 22, 2009, 9:41 AM
  5. Get DateField and TimeField Values
    By Alan_HK in forum 1.x Help
    Replies: 0
    Last Post: Jul 06, 2009, 6:45 AM

Posting Permissions