Ext JS框架中日期函数的用法及日期选择控件的实现

Ext JS框架中提供了丰富的日期函数和日期选择控件，可以用于方便地处理日期相关的逻辑和交互。下面将分别详细介绍它们的用法和实现方式。

日期函数的用法

获取当前日期和时间

获取当前日期和时间可以使用 Ext.Date.now() 函数。它返回当前的时间戳，即距离1970年1月1日0时0分0秒的毫秒数。如果要将当前时间以指定格式显示，可以使用 Ext.Date.format() 函数。

下面是一个示例代码：

var now = Ext.Date.now();
console.log(now);
// 输出：1630087976830

var nowStr = Ext.Date.format(now, 'Y-m-d H:i:s');
console.log(nowStr);
// 输出：2021-08-27 09:19:36

解析日期字符串

如果需要将用户输入的日期字符串解析为 Javascript 的 Date 对象，可以使用 Ext.Date.parse() 函数。该函数支持多种日期格式，其中 format 参数用于指定输入字符串的格式。

下面是一个示例代码：

var dateStr = '2021-08-27 09:19:36';
var dateObj = Ext.Date.parse(dateStr, 'Y-m-d H:i:s');
console.log(dateObj);
// 输出：Fri Aug 27 2021 09:19:36 GMT+0800 (中国标准时间)

操作日期

如果需要对日期进行加减操作，可以使用 Ext.Date.add() 函数。该函数需要传入一个 Date 对象和一个对象，指定要添加的年、月、日、小时、分钟、秒等数值。

下面是一个示例代码：

var dateObj = new Date();
console.log(dateObj);

var addDate = Ext.Date.add(dateObj, Ext.Date.DAY, 7);
console.log(addDate);

日期格式化

如果需要将 Date 对象格式化为字符串，可以使用 Ext.Date.format() 函数。该函数需要传入一个 Date 对象和一个格式化字符串，指定输出的格式。

下面是一个示例代码：

var dateObj = new Date();
console.log(dateObj);

var dateFormat = Ext.Date.format(dateObj, 'Y-m-d H:i:s');
console.log(dateFormat);

日期选择控件的实现

Ext JS框架中提供了多种日期选择控件，可以用于方便地选择或显示日期。下面将分别介绍不同类型的日期选择控件和它们的实现方式。

Ext.form.field.Date 类型

Ext JS框架中的 Ext.form.field.Date 类型是一个简单的日期选择控件。它可以通过设置 format 属性指定日期显示的格式，并提供了多种事件和方法用于相应用户的交互。

下面是一个示例代码：

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'datefield',
        fieldLabel: '选择日期',
        name: 'date',
        format: 'Y-m-d',
        value: new Date()
    }]
});

Ext.picker.Date 类型

Ext JS框架中的 Ext.picker.Date 类型是一个高级的日期选择控件。它提供了丰富的交互方式，支持通过悬浮框、弹出框等方式呈现日期选择器，并可以通过设置 minDate、maxDate、disabledDates 等属性限制可选的日期范围和禁用日期。

下面是一个示例代码：

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'button',
        text: '选择日期',
        handler: function() {
            Ext.create('Ext.picker.Date', {
                renderTo: Ext.getBody(),
                value: new Date(),
                minDate: new Date(),
                listeners: {
                    select: function(picker, date) {
                        var dateStr = Ext.Date.format(date, 'Y-m-d');
                        console.log(dateStr);
                        picker.destroy();
                    }
                }
            });
        }
    }]
});

以上就是 Ext JS 框架中日期函数和日期选择控件的详细介绍和实现方式，希望能对你有所帮助。