Implementing date ranges

[tappatappa]

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!

 

 

[Sherzod]

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.

[tappatappa]

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?

[Sherzod]

hmm, for me is working correctly..

[tappatappa]

I don't know what I did, but after a bit of cleaning/refactoring now the problem disappeared. JavaScript will always be a mystery to me.

 

Problem solved!

 

Thanks again.

[MichaelM]

This may no longer work.

It worked great, but when I added a login form to the application I received errors before the mainform showing.

 

[Sherzod]

Can you make a simple testcase and attach here?