Masked input plugin

[Sherzod]

Hi! This is a masked input plugin for the jQuery javascript library.

(Hayri Aslan more professionally implemented this feature: http://forums.unigui.com/index.php?/topic/4475-uniexclusive/)

 

Source and usage: http://digitalbush.com/projects/masked-input-plugin/

Demo: http://digitalbush.com/projects/masked-input-plugin/#demo

 

Simple example of use (eg with component UniEdit):

 

1. It is necessary to download the two files and include in your project
   1. jquery
   2. jquery.maskedinput.min.js

 

2.

   1. UniEdit1.Text := '';

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

function beforeInit(sender)
{   
  Ext.onReady( function () {
    $("#"+sender.id+"-inputEl").mask("99/99/9999");        
  });  
}

 

 

Best regards.

[billyChou]

Thanks

[Marlon Nardi]

!

[mehmet07]

hi,

i can uniedit mask like this example. it is working.

and i add unidbgrid column editor. but not working.

thanks.

[Sherzod]

hi,

i can uniedit mask like this example. it is working.

and i add unidbgrid column editor. but not working.

thanks.

 

Hi

 

Try:

 

UniEdit1 -> ClientEvents -> ExtEvents -> add afterrender function:

function afterrender(sender, eOpts)
{
  $("#"+sender.id+"-inputEl").mask("aa***");
}

function beforeInit(sender)

{   

  Ext.onReady( function () {

    $("#"+sender.id+"-inputEl").mask("99/99/9999");        

  });  

}

 

 

Best regards.

[chefdackel]

Hi! This is a masked input plugin for the jQuery javascript library.

(Hayri Aslan more professionally implemented this feature: http://forums.unigui.com/index.php?/topic/4475-uniexclusive/)

 

Source and usage: http://digitalbush.com/projects/masked-input-plugin/

Demo: http://digitalbush.com/projects/masked-input-plugin/#demo

 

Simple example of use (eg with component UniEdit):

 

1. It is necessary to download the two files and include in your project

   1. jquery

   2. jquery.maskedinput.min.js

 

2.

   1. UniEdit1.Text := '';

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

function beforeInit(sender)
{   
  Ext.onReady( function () {
    $("#"+sender.id+"-inputEl").mask("99/99/9999");        
  });  
}

UniEditMask.png

 

 

Best regards.

 

great! As you are one of the JS-Gurus in this forum: how to not define the mask in the ClientEvents-properties (because the definitions are a bit hidden there for the developers), but in the Delphi-code, f.e. myform.create? Is this possible? 

[mehmet07]

thanks delphi Developer. it is working.

[mehmet07]

hi,

If left empty, the maskedit component fails

[Sherzod]

Hi,

 

Sorry, actually this plugin is not oriented for DB components.

But although it is possible to modify the code for the DB component.

In your case,
On which field you set? (what data type)

 

 

Best regards.

[mehmet07]

my field datatype is "date"

thanks

[Sherzod]

how to not define the mask in the ClientEvents-properties (because the definitions are a bit hidden there for the developers), but in the Delphi-code, f.e. myform.create? Is this possible? 

 

Hi chefdackel.

 

If I understand you correctly, try:

uses ... UniGUIApplication ...

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  UniSession.AddJS('Ext.onReady ( function () {$("#' + UniEdit1.JSName + '_id-inputEl").mask("aa**");});');
  
  //OR
  
  UniEdit1.ClientEvents.ExtEvents.Add
      ('OnAfterrender=function OnAfterrender(sender, eOpts)'+
      ' { $("#"+sender.id+"-inputEl").mask("aa**"); }');
end;

Best regards.

[Sherzod]

my field datatype is "date"

thanks

 

I will try...

 

 

Have you tried using UniDateTimePicker1 with mask?

 

UniDateTimePicker1 -> ClientEvents -> ExtEvents -> add afterrender function:

function afterrender(sender, eOpts)
{
  $("#"+sender.id+"-inputEl").mask("99/99/9999");
}

[mehmet07]

now , i try UniDateTimePicker1 and working . but i use UniDateTimePicker1 and i get long date

 

[Sherzod]

now , i try UniDateTimePicker1 and working . but i use UniDateTimePicker1 and i get long date

ekran1.png

 

UniDateTimePicker1.DateFormat := 'dd/MM/yyyy'; does not help?

[mehmet07]

my UniDateTimePicker1 date format is  'dd/MM/yyyy' but not working.  and i write 

UniDateTimePicker1.DateFormat := 'dd/MM/yyyy';  

again not working.

 i see long date.

[Farshad Mohajeri]

my UniDateTimePicker1 date format is  'dd/MM/yyyy' but not working.  and i write 

again not working.

 i see long date.

 

What is your uniGUI version?

[Sherzod]

my UniDateTimePicker1 date format is  'dd/MM/yyyy' but not working.  and i write 

again not working.

 i see long date.

 

without plugin is displayed correctly?

[mehmet07]

my unigui version is "0.93.0.996"

[mehmet07]

column editor without correctly. but i add editor not displayed correctly.

[Farshad Mohajeri]

my unigui version is "0.93.0.996"

 

It is a very old version. Many improvements are added since then. Please upgrade to latest build.

[rullomare]

Hi Delphi Developer, 

 

Thanks for Plugin. 

 

I wrote a very small component inherited from TuniEdit where I added a single Property  "NumberFormat" 

 and copying your code, I implemented AfterRender event. 

 

If leave blank the NumberFormat property, the  component behaves exactly like TuniEdit. 

 

 

 

 

Problems with the component :  

 

The component, just as it is written, only works with the new version of Unigui (0.96,0.97). 

 

For older versions? , Booo. 

 

 

The solution of Delphi Developer, I  believe also works with the old vesion of Unigui . 

 

Tested Only with Delphi XE3

 

MskEdit.zip

 

Best Regards.

 

 

 

 

[Sherzod]

Thanks rullomare!

[aneuk_meutuah]

how to clean uniDatetimePicker

[Sherzod]

how to clean uniDatetimePicker

 

Hi,

 

Which version are you using? The latest versions have a boolean property "clearButton".

 

In previous versions, we could use this: http://forums.unigui.com/index.php?/topic/4179-help-to-program-an-own-component-based-on-tunidatetimepicker/

 

Best regards.

[CarlosJ]

Devo add estes arquivos no meu projeto como? de que tipo? Pretendo inserir máscara para CPF