tappatappa Posted July 30, 2015 Share Posted July 30, 2015 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! Link to comment Share on other sites More sharing options...
Sherzod Posted July 30, 2015 Share Posted July 30, 2015 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. 1 Link to comment Share on other sites More sharing options...
tappatappa Posted July 30, 2015 Author Share Posted July 30, 2015 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 More sharing options...
Sherzod Posted July 30, 2015 Share Posted July 30, 2015 hmm, for me is working correctly.. Link to comment Share on other sites More sharing options...
tappatappa Posted July 30, 2015 Author Share Posted July 30, 2015 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now