DateTimepicker for Sencha Touch

[Sherzod]

Dear Friends,

 

A simple example of implementation DateTimepicker for Sencha Touch:

 

Source: https://github.com/tomalex0/senchatouch-datetimepickerv2

Demo: http://tomalex0.github.com/senchatouch-datetimepickerv2

 

How to use:

 

1. Download the following files and add these files to the directory "/files":

https://raw.githubusercontent.com/tomalex0/senchatouch-datetimepickerv2/master/ux/DateTime.js
https://raw.githubusercontent.com/tomalex0/senchatouch-datetimepickerv2/master/ux/DateTimePicker.js

2. and add these files to your project (CustomFiles...):

files/DateTime.js
files/DateTimePicker.js

3.

UnimDatePicker1.DateFormat := "dd/MM/yyyy H:i"

4. UnimDatePicker1 -> ClientEvents -> UniEvents .. beforeInit fn:

function beforeInit(sender, config)
{  
  config.picker = Ext.create('Ext.ux.picker.DateTime', {
                    useTitles: false,
                    doneButton: true,
                    cancelButton: true,
                    minuteInterval : 1,
                    //slotOrder: ['month', 'day', 'year','hour','minute'],
                    toolbar: {
                      //items : datetimepickettoolbaritems
                    }                        
                  });
}  

 

It can also be applied to UnimDBDatePicker (as in the screenshot)...

 

Try,

Best regards.

[billyChou]

Thanks

[stiaan]

Thanks! Good info!

[LordDelphi]

Thanks!

[Aar0n]

after setting date and time: How can I read the datetime information?

[Sherzod]

Hi,

 

Try this:

 

...

 

1. UnimDatePicker1 -> ClientEvents -> UniEvents .. beforeInit fn:

function beforeInit(sender, config)
{
    config.picker = Ext.create('Ext.ux.picker.DateTime', {
                    useTitles: false,
                    doneButton: true,
                    cancelButton: true,
                    minuteInterval : 1,
                    //slotOrder: ['month', 'day', 'year','hour','minute'],
                    toolbar: {
                      //items : datetimepickettoolbaritems
                    }                        
                  });
    Ext.Date.patterns={CustomFormat: "d/m/Y H:i"};  // <------------
}

2. UnimDatePicker1 -> ClientEvents -> ExtEvents -> function change:

function change(sender, newDate, oldDate, eOpts)
{
    ajaxRequest(sender, '_dateChange', ['val='+Ext.Date.format(newDate, Ext.Date.patterns.CustomFormat)])
}

3. UnimDatePicker1 -> OnAjaxEvent:

procedure TMainmForm.UnimDatePicker1AjaxEvent(Sender: TComponent;
  EventName: string; Params: TUniStrings);
var
  newDateTime : TDateTime;
  Fmt: TFormatSettings;
begin
  if EventName = '_dateChange' then
  begin
    Fmt.ShortDateFormat:='dd/mm/yyyy';
    Fmt.DateSeparator  :='/';
    Fmt.LongTimeFormat :='hh:mm';
    Fmt.TimeSeparator  :=':';
    
    newDateTime := StrToDateTime(Params.Values['val'], Fmt);
    //ShowMessage(DateTimeToStr(newDateTime));
  end;

end;

Best regards.

[Aar0n]

Hi,

 

Try this:

 

...

 

1. UnimDatePicker1 -> ClientEvents -> UniEvents .. beforeInit fn:

function beforeInit(sender, config)
{
    config.picker = Ext.create('Ext.ux.picker.DateTime', {
                    useTitles: false,
                    doneButton: true,
                    cancelButton: true,
                    minuteInterval : 1,
                    //slotOrder: ['month', 'day', 'year','hour','minute'],
                    toolbar: {
                      //items : datetimepickettoolbaritems
                    }                        
                  });
    Ext.Date.patterns={CustomFormat: "d/m/Y H:i"};  // <------------
}

2. UnimDatePicker1 -> ClientEvents -> ExtEvents -> function change:

function change(sender, newDate, oldDate, eOpts)
{
    ajaxRequest(sender, '_dateChange', ['val='+Ext.Date.format(newDate, Ext.Date.patterns.CustomFormat)])
}

3. UnimDatePicker1 -> OnAjaxEvent:

procedure TMainmForm.UnimDatePicker1AjaxEvent(Sender: TComponent;
  EventName: string; Params: TUniStrings);
var
  newDateTime : TDateTime;
  Fmt: TFormatSettings;
begin
  if EventName = '_dateChange' then
  begin
    Fmt.ShortDateFormat:='dd/mm/yyyy';
    Fmt.DateSeparator  :='/';
    Fmt.LongTimeFormat :='hh:mm';
    Fmt.TimeSeparator  :=':';
    
    newDateTime := StrToDateTime(Params.Values['val'], Fmt);
    //ShowMessage(DateTimeToStr(newDateTime));
  end;

end;

Best regards.

Thank you so much!

[KingOrmon]

Hi,

I am trying this workaround but in console I see an error:

GET http://localhost:8077/Ext/DateExtras.js?_dc=1655973546280 net::ERR_ABORTED 404 (Not Found)

I use last unigui

Thank you

 

[newsanti]

Project Error After Run.  
unigui 1580

Mobile Calendar.zip

[Sherzod]

Hello,

Well, this post was created 9 years ago, and some external links may not be available.

4 hours ago, newsanti said:

 

On 9/21/2015 at 2:41 PM, Sherzod said:

1. Download the following files and add these files to the directory "/files":

https://raw.githubusercontent.com/tomalex0/senchatouch-datetimepickerv2/master/ux/DateTime.js
https://raw.githubusercontent.com/tomalex0/senchatouch-datetimepickerv2/master/ux/DateTimePicker.js

2. and add these files to your project (CustomFiles...):

files/DateTime.js
files/DateTimePicker.js