Jump to content

Implementing date ranges


tappatappa

Recommended Posts

I am trying to implement date ranges using uniGUI Date Time Pickers. I am following this guide

 

I am almost finished, but I am facing a big problem. I hope someone can help!

 

Step 1 (VTypes and daterange, copy/paste from the article):

	UniSession()->AddJS(L" Ext.apply(Ext.form.VTypes,\
	{ daterange : function(val, field)\
		  {\
			var date = field.parseDate(val);\
			if(!date){return false;}\
			if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime())))\
			{\
			   var start = Ext.getCmp(field.startDateField);\
			   start.setMaxValue(date);\
			   start.validate();\
			   field.dateRangeMax = date;\
			}\
			else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime())))\
			{\
			   var end = Ext.getCmp(field.endDateField);\
			   end.setMinValue(date);\
			   end.validate();\
			   field.dateRangeMin = date;\
			}\
			return true;\
		  },\
	});");

Step 2 (beforeInit):

dtp_START->ClientEvents->UniEvents->Values[L"beforeInit"] = L" function(sender)\
		{\
				Ext.apply(sender, {\
				vtype: 'daterange',\
				endDateField: '"+dtp_FINAL->JSName+L"'\
				});\
		}";
dtp_FINAL->ClientEvents->UniEvents->Values[L"beforeInit"] = L" function(sender)\
		{\
				Ext.apply(sender, {\
				vtype: 'daterange',\
				startDateField: '"+dtp_START->JSName+L"'\
				});\
		}";

....and here is the problem. JSName is always NULL at this point. I don't know if it is a bug or is because how uniGUI works.

So, i tried this workaround


dtp_START->ClientEvents->UniEvents->Values[L"beforeInit"] = L" function(sender)\
		{\
		    if("+form->Name+L"[\""+dtp_FINAL->Name+L"\"])\
			{\
				Ext.apply(sender, {\
				vtype: 'daterange',\
				endDateField: "+form->Name+L"[\""+dtp_FINAL->Name+L"\"].id\
				});\
			}\
		}";
dtp_FINAL->ClientEvents->UniEvents->Values[L"beforeInit"] = L" function(sender)\
		{\
			if("+form->Name+L"[\""+dtp_START->Name+L"\"])\
			{\
     			Ext.apply(sender, {\
				vtype: 'daterange',\
				startDateField: "+form->Name+L"[\""+dtp_START->Name+L"\"].id\
				});\
			}\	
		}";

but this is not enough, since the Ext.appy is called only for the SECOND picker that is initialized. As a result, only one datetimepicker is constrained.

 

Calling Ext.apply for BOTH pickers in both beforeInit events doesn't help, since only one datetimepicker (the sender) is initialized correclty anyway.

 

HELP! :excl:

 

 

Link to comment
Share on other sites

Hi,

 

And if so try: ?!

 

1. MainForm.Scripts..

Ext.apply(Ext.form.field.VTypes, {
    DateRange: function(val, field) {
        var date = field.parseDate(val);
 
        if (!date) {
            return false;
        }
        if (field.startDateField && (!field.dateRangeMax || (date.getTime() != field.dateRangeMax.getTime()))) {
            var start = field.up(field.ownerCt.xtype).down('datefield[vfield=beginDate]');
            start.setMaxValue(date);
            start.validate();
            field.dateRangeMax = date;
        }
        else if (field.endDateField && (!field.dateRangeMin || (date.getTime() != field.dateRangeMin.getTime()))) {
            var end = field.up(field.ownerCt.xtype).down('datefield[vfield=endDate]');
            end.setMinValue(date);
            end.validate();
            field.dateRangeMin = date;
        }
        /*
         * Always return true since we're only using this vtype to set the
         * min/max allowed values (these are tested for after the vtype test)
         */
        return true;
    },
    DateRangeText: 'From date must be before To date'
});

2. UniDateTimePicker1.ClientEvents.UniEvents... add beforeInit:

function beforeInit(sender, config)
{
  sender.id = 'detailBegin',    
  sender.vfield = 'beginDate',
  sender.endDateField = 'detailEnd',
  sender.vtype = 'DateRange',
    
  sender.listeners = {
        scope: this,
        change: function(field, newValue, oldValue) {
            if (newValue === null) {
                Ext.form.field.VTypes.DateRange(newValue, field);
            }
        }
    }
}

3. UniDateTimePicker2.ClientEvents.UniEvents... add beforeInit:

function beforeInit(sender, config)
{
  sender.id = 'detailEnd',    
  sender.vfield = 'endDate',
  sender.beginDateField = 'detailBegin',
  sender.vtype = 'DateRange',
    
  sender.listeners = {
        scope: this,
        change: function(field, newValue, oldValue) {
            if (newValue === null) {
                Ext.form.field.VTypes.DateRange(newValue, field);
            }
        }
    }
}

Best regards.

  • Upvote 1
Link to comment
Share on other sites

Delphi Developer, you are my hero.

 

Ok now I suspect that I have introduced a weird glitch in the datetimepicker: I have to click 2 times on the day to make the calendar disappear. Do you experience the same thing?

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...