Help to program an own component based on TUniDateTimePicker

[YangNing]

I want to add a buttom or a href to a TUniDateTimePicker, and click the button to clear the text of TUniDateTimePicker

. How can I do it to make a own component based on TUniDateTimePicker.

Please help me! Thanks!

[Sherzod]

Hi YangNing.

Try to consider this link: http://www.eekboom.de/ClearButton.html

Sincerely

[Sherzod]

Hi YangNing.

 

How to use? 

 

1. Download files: 

     http://www.eekboom.de/js/ClearButton.js (copy to directory .. \ files \) 

     http://www.eekboom.de/css/ClearButton.css (copy to directory .. \ files \) 

     http://www.eekboom.de/images/clear-text-icon.gif (copy to directory .. \ images \, if this directory is not present, create a directory) 

 

2. UniDateTimePicker1 -> ClientEvents -> UniEvents add function beforeInit:

function beforeInit(sender)
{
  sender.plugins = new Ext.ux.form.field.ClearButton({animateClearButton: true});
}

or

function beforeInit(sender)
{
  sender.plugins = ['clearbutton'];
}

 

This plugin can also be used for some other text controls, for example:

   

 

...

The plugin understands these config options:

• hideClearButtonWhenEmpty (Boolean) - Hide the clear button when the field is empty (default: true).
• hideClearButtonWhenMouseOut (Boolean) - Hide the clear button until the mouse is over the field (default: true).
• animateClearButton (Boolean) - When the clear buttons is hidden/shown, this will animate the button to its new state (using opacity) (default: true).
• clearOnEscape - Empty the text field when ESC is pressed while the text field is focused (default: true).
• ...

 

Best regards...

[YangNing]

 

Hi YangNing.

 

How to use? 

 

1. Download files: 

     http://www.eekboom.de/js/ClearButton.js (copy to directory .. \ files \) 

     http://www.eekboom.de/css/ClearButton.css (copy to directory .. \ files \) 

     http://www.eekboom.de/images/clear-text-icon.gif (copy to directory .. \ images \, if this directory is not present, create a directory) 

 

2. UniDateTimePicker1 -> ClientEvents -> UniEvents add function beforeInit:

function beforeInit(sender)
{
  sender.plugins = new Ext.ux.form.field.ClearButton({animateClearButton: true});
}

or

function beforeInit(sender)
{
  sender.plugins = ['clearbutton'];
}

clearButton.png

 

This plugin can also be used for some other text controls, for example:

clearButton2.png    clearButton3.png

 

...

The plugin understands these config options:

• hideClearButtonWhenEmpty (Boolean) - Hide the clear button when the field is empty (default: true).
• hideClearButtonWhenMouseOut (Boolean) - Hide the clear button until the mouse is over the field (default: true).
• animateClearButton (Boolean) - When the clear buttons is hidden/shown, this will animate the button to its new state (using opacity) (default: true).
• clearOnEscape - Empty the text field when ESC is pressed while the text field is focused (default: true).
• ...

 

Best regards...

 

Thanks a lot.

[Hayri ASLAN]

Dear Delphi Developer

thanks. It will help to us for integrate every plugin to unigui

[Farshad Mohajeri]

 

Hi YangNing.

 

How to use? 

 

1. Download files: 

     http://www.eekboom.de/js/ClearButton.js (copy to directory .. \ files \) 

     http://www.eekboom.de/css/ClearButton.css (copy to directory .. \ files \) 

 

 

 

2. Add files to ServerModule.CustomFiles

files/ClearButton.js
files/ClearButton.css

[Sherzod]

 

2. Add files to ServerModule.CustomFiles

files/ClearButton.js
files/ClearButton.css

 

Thank you Farshad! I forgot to specify.

[Mediv07]

Hello everyone, I'm trying to catch the event of purification of the field for this event is used to onAjaxEvent TUniEdit. In older releases, everything worked. In this I can not do it, tell me the solution.

 

procedure TMainFrame.FindEditAjaxEvent(Sender: TComponent; EventName: string;
  Params: TStrings);
begin
  if EventName = 'onClearButton' then
    begin
      ...
    end;
end;

Thank you.

 

[Sherzod]

 

Hello everyone, I'm trying to catch the event of purification of the field for this event is used to onAjaxEvent TUniEdit. In older releases, everything worked. In this I can not do it, tell me the solution.

 

procedure TMainFrame.FindEditAjaxEvent(Sender: TComponent; EventName: string;
  Params: TStrings);
begin
  if EventName = 'onClearButton' then
    begin
      ...
    end;
end;

Thank you.

 

 

 

Hi Mediv07.

 

With this plugin you can so:

 

1. Firstly, I changed ClearButton.js, download the attached file and copy it to the directory "files".    

    I can not attach a file type. Js, so you do need to change the file ClearButton.js:

 

    1.1. Find line in  the file ClearButton.js: this.textField.setValue (''); after this line paste the following code:

ajaxRequest (this.textField, '_clear', []);

    1.2. Find line in  the file ClearButton.js: (this.textField.setValue, 1, this.textField, ['']); after this line paste the following code:

ajaxRequest (this.textField, '_clear', []);

2. FindEdit -> ClientEvents -> ExtEvents -> add function keyup: ??

function keyup(sender, e, eOpts)
{
  if (sender.value == '') {
    ajaxRequest (sender, '_clear', []);
  };
}

3. Then you can catch the event clear, TRY:

procedure TMainFrame.FindEditAjaxEvent(Sender: TComponent; EventName: string;
  Params: TStrings);
begin
  if EventName = '_clear' then
    begin
      ...
    end;
end;

4. Clear the browser cache (or press ctrl + R on tab localhost: 8077).

 

 

It's just one of the quick solutions, good luck...

 

Best regards.

 

[Mediv07]

Thanks, I'll try.