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...
  • 2 years later...

Hello,

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

4 hours ago, newsanti said:

image.png.97724311542ebe84846cfd7c4a290a5f.png

 

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

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...