1. #1
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    29
    Vote Rating
    0
    Hviezdoslav is on a distinguished road

      0  

    Default Disable Future Dates On Ext.form.field.Date

    Disable Future Dates On Ext.form.field.Date


    Hello,

    I am using Sencha Architect 2 and ExtJS 4.1. I am posting this thread today, 18-JAN-2013, but I wrote in a Word document the text of this thread yesterday, 17-JAN-2013, when I was working on this problem. I have searched on the Internet to try to find a solution but everything that I have tried does not work.

    I have an Ext.form.field.Date control. I want to disable all future dates so that the user on any given day can select only the current or prior dates and cannot select a future date. The format config property has m/d/Y and the submitFormat config property has m/d/Y on this Ext.form.field.Date control.

    I read that I should use maxValue config property of the Ext.form.field.Date field. It seems that if I choose Date for the maxValue property, I must enter a date (a hardcoded date).

    So using Object for maxValue (maxValue – Object), I tried entering the following:

    new Date()

    Using the above code, the future dates were not disabled. When I do an Ext.Msg.alert for “new Date()” in the click event of the Submit button, I see the value is Thu Jan 17 15:49:05 CST 2013. So I thought that maybe the disabling of the future dates was not working because the Ext.form.field.Date has the format m/d/Y while this “new Date()” returns a date/day/time in a different format.

    So I tried the following for the maxValue/Object:

    New Date().format(‘m/d/Y’)

    That did not work because it says in the IE browser that the format method/function is not recognized.

    I tried using the following for the maxValue/Object config property:

    Ext.util.Format.date(new Date(), ‘m/d/Y’))

    That does not disable the future dates though. Yet when I do an Ext.Msg.alert(Ext.util.Format.date(new Date(), ‘m/d/Y’)) the value shown is 01/17/2013 and this format matches the date shown if I use the date picker part of the Date control to choose the current date.

    If I enter the hardcoded ‘01/17/2013’ in the maxValue config property, then the future dates ARE INDEED disabled. I cannot hardcode though because I want on any given day the user to be able to select ONLY a CURRENT or PRIOR date and to NOT be able to select any future date.

    So I am wondering if anybody can help me please to disable future dates in this Date control so that on any given day the user can select only the current date OR a prior date. I never want a user to be able to select a future date from the Ext.form.field.Date control. What can I enter into the maxValue(Object) config property of this Ext.form.field.Date control so that on any given day the user cannot choose a future date and can choose only a current or prior date?

    I appreciate the consideration of my question and hope that someone can help me to figure out how to disable always the selection of any future date on the Ext.form.field.Date control that is on a Ext.form.Panel that is on a Ext.container.Viewport.

    Thanks,

    Hviezdoslav

  2. #2
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    523
    Vote Rating
    43
    BostonMerlin is a jewel in the rough BostonMerlin is a jewel in the rough BostonMerlin is a jewel in the rough

      1  

    Default


    Are you setting the date using a property in architect or are you setting the date in code? If using architects property pane, stop, set your configs value in code. hope that helps. John.

  3. #3
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    29
    Vote Rating
    0
    Hviezdoslav is on a distinguished road

      0  

    Default


    I thank you for the response, John. I am new to Sencha and am not very experienced.

    Yes, I tried yesterday entering the code via the maxValue - Object config property within Sencha for the Ext.form.field.Date control.

    Yesterday I tried doing an afterrender event on this Ext.form.field.Date control to use setMaxValue but could not figure out how to do it and get it to work. For example, I tried entering into the afterrender event on the Ext.form.field.Date control the following code that does not seem to error in browser but that does not disable the future dates (and also causes the width of the text area of the Ext.form.field.Date to decrease despite the maxWidth 250 and labelWidth 140):

    setMaxValue(Ext.util.Format.date(new Date(), 'm/d/Y'));

    Also I tried the following in the afterrender of the Ext.form.field.Date control but the future dates were not disabled:

    me.setMaxValue(Ext.util.Format.date(new Date(), 'm/d/Y'));


    [CODE] },
    {
    xtype: 'datefield',
    anchor: '100%',
    height: 20,
    id: 'paramSlaughterOrBoneDate',
    margin: '-20 0 0 160',
    maxWidth: 250,
    name: 'paramSlaughterOrBoneDate',
    fieldLabel: 'Slaughter or Bone Date',
    labelWidth: 140,
    allowBlank: false,
    submitFormat: 'm/d/Y',
    listeners: {
    afterrender: {
    fn: me.onParamSlaughterOrBoneDateAfterRender,
    scope: me
    }
    }
    },[
    /CODE]


    Just now I removed that afterrender on the Ext.form.field.Date since that approach did not seem to disable the future dates and since also the width of the textarea of the Ext.form.field.Date control decreases so that you do not see the full date, so that you do not see the year part of the date, when you select a date from the picker..

    I already have an afterrender on the form (on the Ext.form.Panel) to set focus on a particular textfield.

    [CODE][
    Ext.applyIf(me, {
    items: [
    {
    xtype: 'form',
    itemId: 'theComboForm',
    bodyPadding: 10,
    title: 'Combo Box User Input',
    listeners: {
    afterrender: {
    fn: me.onFormAfterRender,
    scope: me
    }
    },
    items: [
    /CODE]

    So just now I added a line of code to the form's afterrender:

    Code:
    Ext.getCmp('paramBilledWeight').focus('', 10);
    Ext.getCmp('paramSlaughterOrBoneDate').setMaxValue(Ext.util.Format.date(new Date(), 'm/d/Y'));
    It worked! The future dates ARE disabled AND the width of the text area of the Ext.form.field.Date is not decreased!

    Thanks very much to you, John. I really appreciate the help. I'll look to see if there is some way in which I can designate that you provided the answer or give you points or whatever.

    I wonder why the afterrender event on the Ext.form.field.Date did not disable the future dates whereas the afterrender on the whole form does disable the future dates. Also, I wonder why using the setMaxValue(Ext.util.Format.date(new Date(), 'm/d/Y')) in the Ext.form.field.Date's maxValue - Object via the Config property pane does not work. Do you have any idea why I cannot use the maxValue config property via the Config pane does not work and why the afterrender of the Ext.form.field.Date does not work?

    Thanks again as I very much appreciate the help. Using the form's afterrender and the code that I provided above DOES WORK and now the Ext.form.field.Date control will have always the future dates disabled.

    Hviezdoslav 18-JAN-2013 Friday

  4. #4
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    523
    Vote Rating
    43
    BostonMerlin is a jewel in the rough BostonMerlin is a jewel in the rough BostonMerlin is a jewel in the rough

      0  

    Default


    the short answer is that Architect does not yet (or will ever?) have the ability to process javascript logic within the property pane editor. If your config values are dynamic, you'll need to set the value within an event and handle it there. As to why it works in one event and not the other, i can only assume it's due to the order of events being fired....

    Glad it's working...! happy coding!!
    John

Thread Participants: 1