Jump to content

DatePicker Multiselect?


mhmda

Recommended Posts

I want to enable multi select in in UniCalendar:

 

picker.png

 

I added this: 

function picker.beforeInit(sender, config)
{
  config.cls='room_clndr';//class for background color
  config.DisabledDates=[];//array to hold disabled days
}
function picker.select(sender, date, eOpts)
{
   sender.DisabledDates.push(date);
   sender.setDisabledDates(sender.DisabledDates);  
}

Everything works great except this: if user want to cancel one date from those highlighted (disabled) dates by clicking on it using the mouse, but it disabled because it has -disabled- class, How can I enable the mouse event on those disabled dates, when user click on disabled date I remove it from the array and call:

sender.setDisabledDates(sender.DisabledDates);

Any idea?

Link to comment
Share on other sites

After fighting long day I found a solution override 'handleDateClick':

function picker.beforeInit(sender, config)
{
  config.cls='room_clndr';
  config.DisabledDates=[];
  config.disabledDaysText='חסום';
  config.handleDateClick = function(e, t){
        var me = this,
        handler = me.handler;        
        e.stopEvent();
        if(!me.disabled && t.dateValue){
            me.doCancelFocus = me.focusOnSelect === false;
            me.setValue(new Date(t.dateValue));
            delete me.doCancelFocus;
            me.fireEvent('select', me, me.value);
            if (handler) {
                handler.call(me.scope || me, me, me.value);
            }
            me.onSelect();
        }
    } 
}

And:

function picker.select(sender, date, eOpts)
{
   if(jQuery.inArray( Ext.Date.format(date, 'd/m/Y'), sender.DisabledDates )>=0) {
      sender.DisabledDates.splice( $.inArray(Ext.Date.format(date, 'd/m/Y'), sender.DisabledDates), 1 );
      if(sender.DisabledDates.length>0) {
       sender.setDisabledDates(sender.DisabledDates);
      }
      else {
       sender.setDisabledDates([null]);
      }        
   }
   else {
    sender.DisabledDates.push(Ext.Date.format(date, 'd/m/Y'));
    sender.setDisabledDates(sender.DisabledDates);    
   } 
}

CSS:

.room_clndr .x-datepicker-disabled .x-datepicker-date
{
 background-color:#fe5757 !important;
 color: #fff !important; 
}

WORKS PERFECT !!!!  :) 

Link to comment
Share on other sites

  • 4 weeks later...

I hope it comes a day where We can do Everything writing Just Delphi.

FMSoft is doing an oustanding Job,if comparing to DevExpress or Telerik where

you write more Javscript than C#.

But I really love when I do everything using only Delphi.

Link to comment
Share on other sites

 

 

But I really love when I do everything using only Delphi.

 

Well I would love that too, but doing things in client side (at least for me) has two advantages:

 

1. Knowing better how extjs works.

2. Less connections to the Server (saving bandwidth and delay)

 

Also validating things that could be done in client side I do in client side for example:

 /* regex for email validation */
  var ereg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

  if(!ereg.test(frmSignUP.edtEmail.getValue())) {
    Ext.Msg.alert('Invalid email address');
  }   

If I do that in delphi I would send all data to server and do validation there:

//------------------------------------------------------------------------------
function IsValidEmail(const Value: string): Boolean;
function CheckAllowed(const s: string): Boolean;
  var i: Integer;
  begin
    Result:= false;
    for i:= 1 to Length(s) do
      if not (s[i] in ['a'..'z',
                       'A'..'Z',
                       '0'..'9',
                       '_',
                       '-',
                       '.']) then Exit;
    Result:= true;
  end;
var
  i: Integer;
  NamePart, ServerPart: string;
begin
  Result:= False;
  i:=Pos('@', Value);
  if i=0 then Exit;
  NamePart:=Copy(Value, 1, i-1);
  ServerPart:=Copy(Value, i+1, Length(Value));
  if (Length(NamePart)=0) or ((Length(ServerPart)<5)) then Exit;
  i:=Pos('.', ServerPart);
  if (i=0) or (i>(Length(serverPart)-2)) then Exit;
  Result:= CheckAllowed(NamePart) and CheckAllowed(ServerPart);
end;

if not IsValidEmail(edtEmail.Text) then
 begin
   ShowMessage('Invalid email address');
 end

Using client side is more efficient, faster and less code.

Link to comment
Share on other sites

Using client side is more efficient, faster and less code.

But insecure for critical data, client side validations can be easily removed by anyone. I still recommend to validate on server too in addition to client side just in case.

Link to comment
Share on other sites

It's not so easy as you think, give it try and see....

It is not about difficulty, but rather possibility. Client side validation is possible to remove especially on modern browsers with bulit-in dev tools and debuggers, that's enough for it to be insecure.

Link to comment
Share on other sites

Yes,Client side will allways be some miliseconds faster ,but I think harder

to debug and keep.

Imagine someone else have to keep the code.

For instance( a very silly example) ,if you change teh caption of  a label using Extjs Code

you´ll see that in the screen ,but it wont be the value in the server,imagine someone

using it in a if statement?

Of course its not a DLL with 500 users in,but the samples that are in Ankara(using only Delphi code),

are very responsive.

EXTJS 6 will bes even faster,and 6.2 or 7 will be a complete turn around.

Also Unigui itself can be optimized,everything can.

Your and others Extjs code are pretty helpfull,and for today they´re the only one thing that can be done.

Also If I have to keep the DLL in a internel dedicated  server,have more Dlls,its a price that I think pretty reasanoble

for the kind of software I  produced,tailored not multi-tenant ERP.

But I really think the goal should be Doing everything using only Delphi code,specially because the main audience of uniGUI

are Delphi programmers willing to reuse their Delphi code,most of them thinking of using a parser/importer,something that probably

won´t be possible based in EXTJS code.

An this Delphi code you provide would be a function that could be reused many time trought the system.

Link to comment
Share on other sites

  • 2 years later...

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...