Jump to content

DateTimepicker for Sencha Touch


Sherzod

Recommended Posts

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
                    }                        
                  });
}  

post-906-0-92608000-1442828302_thumb.png

 

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

 

Try,

Best regards.

  • Upvote 1
Link to comment
Share on other sites

  • 1 year later...
  • 1 month later...

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • 5 years later...

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...