[控件]unigui移动端下Unidatepicker时间显示解决方案

unigui搞移动端,需求上需要采用日期,但是默认是不支持时间选择的,怎么办?

只能改造了@~@。

1.下载以下JS文件放到程序files目录下。

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

2.在CustomFiles项目加入如下内容。

files/DateTime.js
files/DateTimePicker.js

3.调整时间格式,如下。

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

4.对控件添加以下事件。

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;

 

分享到: