I've created MEMO component

[leo_kacharkovParticipant]

I do this because the TinyMCE always refresh, when i paste from MS-Word.
I have adapt it from the example project: JQdatetimepicker
it is really dirrrty because I’m so new to JavaScript, i dont know how to delete unwanted code, but it work for me.

unit RxLeoMemo;

interface

uses
Classes, SysUtils, dialogs,
RaControlsVCL;

type
TRxLEOmemo = class(TRaExtendableControlGCD)
public
constructor Create(AOwner: TComponent); override;
private
FValue: TDateTime;
FValueJQ: String;
SNFValue : String;

FValueModified: Boolean;
FChangeMonth: Boolean;
FChangeYear: Boolean;
FShowWeek: Boolean;
FShowButtonPanel: Boolean;
FUseLocalNames: Boolean;
FFormatSettings: TFormatSettings;
FFormatSettingsDateFormatJQ: String;
FFormatSettingsLongMonthNamesJQ: String;
FFormatSettingsShortMonthNamesJQ: String;
FFormatSettingsLongDayNamesJQ: String;
FFormatSettingsShortDayNamesJQ: String;
FOthersModified: Boolean;
FOnSelect: TNotifyEvent;
procedure SetValue(AValue: TDateTime);
procedure SetChangeMonth(AChangeMonth: Boolean);
procedure SetChangeYear(AChangeYear: Boolean);
procedure SetShowWeek(AShowWeek: Boolean);
procedure SetShowButtonPanel(AShowButtonPanel: Boolean);
procedure SetFormatSettings;
procedure DoOnSelect;
procedure SNSetValue(AValue:String);
private
function EncodeDateJQ(D: TDateTime): String;
function DecodeDateJQ(S: String): TDateTime;
published
property Value: TDateTime read FValue write SetValue;
property SValue: string read SNFValue write SNSetValue;
property ChangeMonth: Boolean read FChangeMonth write SetChangeMonth default False;
property ChangeYear: Boolean read FChangeYear write SetChangeYear default False;
property ShowWeek: Boolean read FShowWeek write SetShowWeek default False;
property ShowButtonPanel: Boolean read FShowButtonPanel write SetShowButtonPanel default False;
property UseLocalNames: Boolean read FUseLocalNames write FUseLocalNames default False;
property OnSelect: TNotifyEvent read FOnSelect write FOnSelect;
protected
procedure RaDrawExtend(var AJavascript: String); override;
procedure RaUpgradeExtend(var AJavascript: String); override;
procedure RaRouteExtend(AData: String); override;
published
property Anchors;
property Visible;
property OnEnter;
property OnExit;
end;

procedure Register;

implementation

uses
StrUtils, DateUtils;

constructor TRxLEOmemo.Create(AOwner: TComponent);
begin
inherited;
SetBounds(Left, Top, 121, 21);
SetFormatSettings;
// SetValue(EncodeDate(1900, 1, 1));
SNSetValue(‘AA’);
FChangeMonth := False;
FChangeYear := False;
FShowWeek := False;
FShowButtonPanel := False;
FUseLocalNames := False;
end;

procedure TRxLEOmemo.SetValue(AValue: TDateTime);
begin
FValue := AValue;
FValueJQ := EncodeDateJQ(FValue);
FValueModified := True;
end;
procedure TRxLEOmemo.SNSetValue(AValue:String);
begin
snFvalue := AValue;
FValueJQ := snFvalue;//EncodeDateJQ(FValue);
FValueModified := True;
end;
procedure TRxLEOmemo.SetChangeMonth(AChangeMonth: Boolean);
begin
FChangeMonth := AChangeMonth;
FOthersModified := True;
end;

procedure TRxLEOmemo.SetChangeYear(AChangeYear: Boolean);
begin
FChangeYear := AChangeYear;
FOthersModified := True;
end;

procedure TRxLEOmemo.SetShowWeek(AShowWeek: Boolean);
begin
FShowWeek := AShowWeek;
FOthersModified := True;
end;

procedure TRxLEOmemo.SetShowButtonPanel(AShowButtonPanel: Boolean);
begin
FShowButtonPanel := AShowButtonPanel;
FOthersModified := True;
end;

{$IFDEF VER220}
{$DEFINE FORMATSETTINGS} // Delphi 15 – Delphi XE
{$ENDIF}
{$IFDEF VER230}
{$DEFINE FORMATSETTINGS} // Delphi 16 – Delphi XE2
{$ENDIF}
{$IFDEF VER240}
{$DEFINE FORMATSETTINGS} // Delphi 17 – Delphi XE3
{$ENDIF}
{$IFDEF VER250}
{$DEFINE FORMATSETTINGS} // Delphi 18 – Delphi XE4
{$ENDIF}

procedure TRxLEOmemo.SetFormatSettings;

function MayBeConvert(AString: String): String;
begin
{$IFDEF FPC}
{$IFDEF MSWINDOWS}
Result := AnsiToUtf8(AString);
{$ELSE}
Result := AString; // already in utf8. ADD CLOCALE UNIT!
{$ENDIF}
{$ELSE}
Result := AString; // no need for explicit convert
{$ENDIF}
end;

var
i: Integer;
begin
// here settings are taken from SysUtils. you may introduce
// a number of properties to setup each DatePicker individually
FFormatSettings.DateSeparator := SysUtils.{$IFDEF FORMATSETTINGS}FormatSettings.{$ENDIF}DateSeparator;
FFormatSettings.ShortDateFormat := SysUtils.{$IFDEF FORMATSETTINGS}FormatSettings.{$ENDIF}ShortDateFormat;
for i := 1 to 12 do begin
FFormatSettings.LongMonthNames[i] := SysUtils.{$IFDEF FORMATSETTINGS}FormatSettings.{$ENDIF}LongMonthNames[i];
FFormatSettings.ShortMonthNames[i] := SysUtils.{$IFDEF FORMATSETTINGS}FormatSettings.{$ENDIF}ShortMonthNames[i];
end;
for i := 1 to 7 do begin
FFormatSettings.LongDayNames[i] := SysUtils.{$IFDEF FORMATSETTINGS}FormatSettings.{$ENDIF}LongDayNames[i];
FFormatSettings.ShortDayNames[i] := SysUtils.{$IFDEF FORMATSETTINGS}FormatSettings.{$ENDIF}ShortDayNames[i];
end;
// DateFormat for jQuery
FFormatSettingsDateFormatJQ := FFormatSettings.ShortDateFormat;
FFormatSettingsDateFormatJQ := StringReplace(FFormatSettingsDateFormatJQ, ‘dddd’, ‘DD’, [rfReplaceAll]);
FFormatSettingsDateFormatJQ := StringReplace(FFormatSettingsDateFormatJQ, ‘ddd’, ‘D’, [rfReplaceAll]);
FFormatSettingsDateFormatJQ := StringReplace(FFormatSettingsDateFormatJQ, ‘MM’, ‘mm’, [rfReplaceAll]);
FFormatSettingsDateFormatJQ := StringReplace(FFormatSettingsDateFormatJQ, ‘M’, ‘m’, [rfReplaceAll]);
FFormatSettingsDateFormatJQ := StringReplace(FFormatSettingsDateFormatJQ, ‘mmmm’, ‘MM’, [rfReplaceAll]);
FFormatSettingsDateFormatJQ := StringReplace(FFormatSettingsDateFormatJQ, ‘mmm’, ‘M’, [rfReplaceAll]);
FFormatSettingsDateFormatJQ := StringReplace(FFormatSettingsDateFormatJQ, ‘yy’, ‘y’, [rfReplaceAll]);
// LongMonthNames for jQuery
FFormatSettingsLongMonthNamesJQ := ‘[‘;
for i := 1 to 12 do begin
if i > 1 then begin
FFormatSettingsLongMonthNamesJQ := FFormatSettingsLongMonthNamesJQ + ‘,’;
end;
FFormatSettingsLongMonthNamesJQ := FFormatSettingsLongMonthNamesJQ + ‘”‘ +
MayBeConvert(FFormatSettings.LongMonthNames[i]) + ‘”‘;
end;
FFormatSettingsLongMonthNamesJQ := FFormatSettingsLongMonthNamesJQ + ‘]’;
// ShortMonthNames for jQuery
FFormatSettingsShortMonthNamesJQ := ‘[‘;
for i := 1 to 12 do begin
if i > 1 then begin
FFormatSettingsShortMonthNamesJQ := FFormatSettingsShortMonthNamesJQ + ‘,’;
end;
FFormatSettingsShortMonthNamesJQ := FFormatSettingsShortMonthNamesJQ + ‘”‘ +
MayBeConvert(FFormatSettings.ShortMonthNames[i]) + ‘”‘;
end;
FFormatSettingsShortMonthNamesJQ := FFormatSettingsShortMonthNamesJQ + ‘]’;
// LongDayNames for jQuery
FFormatSettingsLongDayNamesJQ := ‘[‘;
for i := 1 to 7 do begin
if i > 1 then begin
FFormatSettingsLongDayNamesJQ := FFormatSettingsLongDayNamesJQ + ‘,’;
end;
FFormatSettingsLongDayNamesJQ := FFormatSettingsLongDayNamesJQ + ‘”‘ +
MayBeConvert(FFormatSettings.LongDayNames[i]) + ‘”‘;
end;
FFormatSettingsLongDayNamesJQ := FFormatSettingsLongDayNamesJQ + ‘]’;
// ShortDayNames for jQuery
FFormatSettingsShortDayNamesJQ := ‘[‘;
for i := 1 to 7 do begin
if i > 1 then begin
FFormatSettingsShortDayNamesJQ := FFormatSettingsShortDayNamesJQ + ‘,’;
end;
FFormatSettingsShortDayNamesJQ := FFormatSettingsShortDayNamesJQ + ‘”‘ +
MayBeConvert(Copy(FFormatSettings.ShortDayNames[i], 1, 2)) + ‘”‘;
end;
FFormatSettingsShortDayNamesJQ := FFormatSettingsShortDayNamesJQ + ‘]’;
//
FOthersModified := True;
end;

procedure TRxLEOmemo.DoOnSelect;
begin
if Assigned(FOnSelect) then FOnSelect(Self);
end;

function TRxLEOmemo.EncodeDateJQ(D: TDateTime): String;
begin
if D = 0 then begin
Result := ”;
end else begin
{$IFDEF FPC}
Result := FormatDateTime(FFormatSettings.ShortDateFormat, D);
{$ELSE}
Result := DateToStr(D, FFormatSettings);
{$ENDIF}
end;
end;

function TRxLEOmemo.DecodeDateJQ(S: String): TDateTime;
var
FS: TFormatSettings;
begin
FS.ShortDateFormat := ‘dd.mm.yyyy’;
FS.DateSeparator := ‘.’;
{$IFDEF FPC}
Result := StrToDate(S, FS.ShortDateFormat, FS.DateSeparator);
{$ELSE}
Result := StrToDate(S, FS);
{$ENDIF}
end;

procedure TRxLEOmemo.RaDrawExtend(var AJavascript: String);
begin
FValueModified := False;
FOthersModified := False;
AJavascript :=

‘var me=this;’ +
‘me.VALUE=”‘ + FValueJQ + ‘”;’ +
‘me.DATEFORMAT=”‘ + FFormatSettingsDateFormatJQ + ‘”;’ +
IfThen(FUseLocalNames,
‘me.MONTHNAMES=’ + FFormatSettingsLongMonthNamesJQ + ‘;’ +
‘me.MONTHNAMESSHORT=’ + FFormatSettingsShortMonthNamesJQ + ‘;’ +
‘me.DAYNAMES=’ + FFormatSettingsLongDayNamesJQ + ‘;’ +
‘me.DAYNAMESSHORT=’ + FFormatSettingsShortDayNamesJQ + ‘;’ +
‘me.DAYNAMESMIN=’ + FFormatSettingsShortDayNamesJQ + ‘;’, ”) +
‘me.CHANGEMONTH=’ + IfThen(FChangeMonth, ‘1’, ‘0’) + ‘;’ +
‘me.CHANGEYEAR=’ + IfThen(FChangeYear, ‘1’, ‘0’) + ‘;’ +
‘me.SHOWWEEK=’ + IfThen(FShowWeek, ‘1’, ‘0’) + ‘;’ +
‘me.SHOWBUTTONPANEL=’ + IfThen(FShowButtonPanel, ‘1’, ‘0’) + ‘;’ +

‘me.onRender=function(){‘ +
// load jQuery library or ensure it is already loaded
‘me.r=me.require([“js”,”/jquery-1.10.1/jquery-1.10.1.min.js”],function(){‘ +
‘me.r=me.require([“js”,”/jquery-ui-1.10.3/ui/minified/jquery-ui.min.js”,’ +
‘”css”,”/jquery-ui-1.10.3/themes/base/minified/jquery-ui.min.css”],function(){‘ +

‘me.r=undefined;’ +

‘if(typeof jQuery===”undefined”){‘ +
‘me.getDOM().innerHTML=”jQuery library was not loaded”;’ +
‘return;’ +
‘};’ +
‘if(typeof jQuery.datepicker===”undefined”){‘ +
‘me.getDOM().innerHTML=”jQuery UI was not loaded”;’ +
‘return;’ +
‘};’ +

‘me.e=document.createElement(“TEXTAREA”);’ +
// +’me.e.onEvent.add(function(){‘ +
// ‘me.CONTENT=me.e.getContent();’ +
// postponed send content to server (to RaRouteExtend)

‘ me.e.addEventListener(“input”, function(){ var person = “John Doe”; person=me.e.value; me.route(escape(person),true); }); ‘
// alert(person)

// ‘me.route(escape(“me.e.VALUE”));’ +
// ‘});’ +
+ ‘me.e.setAttribute(“type”,”text”);’ +
‘me.e.setAttribute(“resize”,”none”);’ +

‘me.e.value=me.VALUE;’ +

‘me.e.style.cssText=”resize: none;’ +
‘-webkit-box-sizing:border-box;’ +
‘-moz-box-sizing:border-box;’ +
‘-o-box-sizing:border-box;’ +
‘box-sizing:border-box;’ +
‘font-family:MS Sans Serif,Tahoma,Verdana,Arial;’ +
‘font-size:’ + IfThen(Font.Size = 0, ‘8’, IntToStr(Font.Size)) + ‘pt;’ +
‘outline:none;’ +
‘width:100%;’ +
‘height:100%;’ +
‘”;’ +

//
//

‘me.getDOM().appendChild(me.e);’ +

‘$(me.e).on(“focus”,function(){‘ +
‘me.acquireFocus();’ +
‘});’ +

‘$(me.e).datepicker({‘ +
‘dateFormat:me.DATEFORMAT,’ +
‘monthNames:me.MONTHNAMES,’ +
‘monthNamesShort:me.MONTHNAMESSHORT,’ +
‘dayNames:me.DAYNAMES,’ +
‘dayNamesShort:me.DAYNAMESSHORT,’ +
‘dayNamesMin:me.DAYNAMESMIN,’ +
‘changeMonth:me.CHANGEMONTH,’ +
‘changeYear:me.CHANGEYEAR,’ +
‘showWeek:me.SHOWWEEK,’ +
‘showButtonPanel:me.SHOWBUTTONPANEL,’ +
‘onSelect:function(s,d){‘ +
‘me.VALUE=s;’ +
‘me.route(‘ +
‘[d.selectedDay.toString(),’ +
‘(d.selectedMonth+1).toString(),’ +
‘d.selectedYear.toString()].join(“.”)’ +
‘);’ +
‘}’ +
‘});’ +

‘if($.datepicker&&$.datepicker.dpDiv&&$.datepicker.dpDiv[0]){‘ +
‘$.datepicker.dpDiv[0].style.fontSize=”‘ + IfThen(Font.Size = 0, ‘8’, IntToStr(Font.Size)) + ‘pt”‘ +
‘};’ +

‘});’ +
‘});’ +
‘};’ +

‘me.onFadePopup=function(){‘ +
‘if(typeof jQuery!==”undefined”){‘ +
‘if($.datepicker&&$.datepicker._hideDatepicker){‘ +
‘$.datepicker._hideDatepicker();’ +
‘};’ +
‘if(me.e){‘ +
‘$(me.e).blur();’ +
‘};’ +
‘};’ +
‘};’ +

‘me.onUnrender=function(){‘ +
‘if(typeof jQuery!==”undefined”){‘ +
‘if($.datepicker&&$.datepicker._hideDatepicker){‘ +
‘$.datepicker._hideDatepicker();’ +
‘};’ +
‘};’ +
‘if(me.r){‘ +
‘me.dontRequire(me.r);’ +
‘me.r=undefined;’ +
‘};’ +
‘if(me.d){‘ +
‘clearTimeout(me.d);’ +
‘me.d=undefined;’ +
‘};’ +
‘if(me.e){‘ +
// ‘me.e.destroy();’ + // TODO how to dispose correcly? or no dispose?
‘me.e=undefined;’ +
‘};’ +
‘};’;

end;

procedure TRxLEOmemo.RaUpgradeExtend(var AJavascript: String);
begin

if FValueModified then begin
FValueModified := False;
AJavascript := AJavascript +
‘var me=this;’ +
‘me.VALUE=”‘ + FValueJQ + ‘”;’ +
‘if(me.e){‘ +
‘me.e.value=me.VALUE;’ +
‘};’;
end;

if FOthersModified then begin
FOthersModified := False;
AJavascript := AJavascript +
‘var me=this;’ +
‘me.CHANGEMONTH=’ + IfThen(FChangeMonth, ‘1’, ‘0’) + ‘;’ +
‘me.CHANGEYEAR=’ + IfThen(FChangeYear, ‘1’, ‘0’) + ‘;’ +
‘me.SHOWWEEK=’ + IfThen(FShowWeek, ‘1’, ‘0’) + ‘;’ +
‘me.SHOWBUTTONPANEL=’ + IfThen(FShowButtonPanel, ‘1’, ‘0’) + ‘;’ ;
end;

end;

procedure TRxLEOmemo.RaRouteExtend(AData: String);
VAR SE:Tstringlist; i:integer;
begin
// showmessage(adata);
// FValue := AData;//DecodeDateJQ(AData);
FValueJQ :=adata;// EncodeDateJQ(FValue);

se:=tstringlist.Create;
se.Text:= adata;
// showmessage(inttostr(se.Count));
for i := 0 to se.Count – 1 do
begin

if i< se.Count – 1 then se[i]:=se[i]+'<br />’;

end;
snfvalue:=se.Text;

freeandnil(se);
//DoOnSelect;
end;

procedure Register;
begin
RegisterComponents(‘Rx LEOX’, [TRxLEOmemo]);
end;

end.

[kqdelphiParticipant]

thank your share,can you help me solve problem

I use 94-RxJqCalculator in the computer and Android phones are normal, but in the Apple phone can not get the focus, but the native RaEdit in all the platform can get the focus. How to modify can achieve the same effect as RaEdit

[leo_kacharkovParticipant]

ohh sorry, I can not help you for now because I barely understand Javascript

[Author]

Posts