ionic3修改系统组件ion-datetime

最终效果：

image.png

调用方式：

<ion-datetime cancelText="取 消" doneText="确 定" [pickerOptions]="{cssClass:'exx-datetime',enableBackdropDismiss:false}" 
pickerFormat="YYYY-MM-DD TIME" displayFormat="YYYY-MM-DD TIME" min="1999-01-01" max="2039-12-31" 
(ionChange)="gettime($event)" [placeholder]="qjtime"></ion-datetime>

涉及修改代码：

css代码:

//选择日期组件
.exx-datetime{}
.exx-datetime ion-backdrop{ background-color: #000; opacity: 0.7;}
.exx-datetime .picker-wrapper{ height: 300px; padding: 20px 0; bottom: 50%; margin-bottom:-150px; position: absolute;border:none; border-top: 1px solid #c8c7cc;border-bottom: 1px solid #c8c7cc;}
.exx-datetime .picker-wrapper .picker-toolbar{ position: absolute;bottom: 20px; border-bottom: none;flex-direction:row-reverse}
.exx-datetime .picker-wrapper .picker-toolbar .picker-toolbar-button{text-align: center}
.exx-datetime .picker-wrapper .picker-toolbar .picker-toolbar-button .picker-button{background-color: #387ef7; color: #fff; min-width: 70%}
.exx-datetime .picker-wrapper .picker-toolbar .picker-toolbar-button.picker-toolbar-cancel .picker-button{ background-color: #f8f8f8; color: #000; border:1px solid #eee;}
.exx-datetime .picker-wrapper .picker-columns{ background-color: #e2e6e9; }
.exx-datetime .picker-wrapper .picker-columns .picker-above-highlight{}
.exx-datetime .picker-wrapper .picker-columns .picker-below-highlight{}
.exx-datetime .picker-header{ position:absolute; left:0; top:0; right:0; height:44px; line-height: 44px; background-color:#488aff; padding-left: 10px; z-index: 9;}
.exx-datetime .picker-header span{ font-size: 1.7rem; color: #fff; font-weight: bold;}

系统组件datetime.js源码

路径：node_modules\ionic-angular\components\datetime\datetime.js

    /**
     * @hidden
     */
    DateTime.prototype.generate = function () {
        var _this = this;
        var picker = this._picker;
        // if a picker format wasn't provided, then fallback
        // to use the display format
        var template = this.pickerFormat || this.displayFormat || DEFAULT_FORMAT;
        if (isPresent(template)) {
            // make sure we've got up to date sizing information
            this.calcMinMax();
            // does not support selecting by day name
            // automaticallly remove any day name formats
            template = template.replace('DDDD', '{~}').replace('DDD', '{~}');
            if (template.indexOf('D') === -1) {
                // there is not a day in the template
                // replace the day name with a numeric one if it exists
                template = template.replace('{~}', 'D');
            }
            // make sure no day name replacer is left in the string
            template = template.replace(/{~}/g, '');
            // console.log(template);
            // parse apart the given template into an array of "formats"
            parseTemplate(template).forEach(function (format) {
                // loop through each format in the template
                // create a new picker column to build up with data
                var key = convertFormatToKey(format);
                var values;
                // first see if they have exact values to use for this input
                if (isPresent(_this[key + 'Values'])) {
                    // user provide exact values for this date part
                    values = convertToArrayOfNumbers(_this[key + 'Values'], key);
                    // console.log(1);
                }
                else {
                    // use the default date part values
                    values = dateValueRange(format, _this._min, _this._max);
                    // console.log(2);
                }
                var column = {
                    name: key,
                    selectedIndex: 0,
                    options: values.map(function (val) {
                        return {
                            value: val,
                            text: renderTextFormat(format, val, null, _this._locale),
                        };
                    })
                };
                // cool, we've loaded up the columns with options
                // preselect the option for this column
                var optValue = getValueFromFormat(_this.getValueOrDefault(), format);
                var selectedIndex = column.options.findIndex(function (opt) { return opt.value === optValue; });
                if (selectedIndex >= 0) {
                    // set the select index for this column's options
                    column.selectedIndex = selectedIndex;
                }
                // console.log("format:"+format,"key:"+key,"values:"+values);
                // console.log("optValue:",optValue);
                // console.log("selectedIndex:",selectedIndex);
                // console.log("column:",column);
                // console.log("getValueOrDefault:",_this.getValueOrDefault());
                // console.log("\n");
                // add our newly created column to the picker

                picker.addColumn(column);
            });
            // Normalize min/max
            var min_1 = this._min;
            var max_1 = this._max;
            var columns_1 = this._picker.getColumns();
            ['month', 'day', 'hour', 'minute']
                .filter(function (name) { return !columns_1.find(function (column) { return column.name === name; }); })
                .forEach(function (name) {
                min_1[name] = 0;
                max_1[name] = 0;
            });
            this.divyColumns();
        }
    };
    DateTime.prototype.getValueOrDefault = function () {
        if (this.hasValue()) {
            return this._value;
        }
        var initialDateString = this.getDefaultValueDateString();
        var _default = {};
        updateDate(_default, initialDateString);
        _default.time=twoDigit((new Date()).getHours())+":00";//添加行
        return _default;
    };

系统组件datetime-util.js源码

路径：node_modules\ionic-angular\util\datetime-util.js

image.png

export function dateValueRange(format, min, max) {
    var opts = [];
    var i,k;
... ...
    else if (format === FORMAT_TIME) {
        // time 08:00 08:15
        for (i = 0; i <= 23; i++) {
            for (k = 0; k <= 3; k++) {
                opts.push(twoDigit(i)+":"+twoDigit(k*15));
            }
        }
    }
    return opts;
}

系统组件picker-transitions.js源码

路径：node_modules\ionic-angular\components\picker\picker-transitions.js

var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import { Animation } from '../../animations/animation';
import { Transition } from '../../transitions/transition';
/**
 * Animations for pickers
 */
var PickerSlideIn = (function (_super) {
    __extends(PickerSlideIn, _super);
    function PickerSlideIn() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    PickerSlideIn.prototype.init = function () {
        var ele = this.enteringView.pageRef().nativeElement;
        var backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
        var wrapper = new Animation(this.plt, ele.querySelector('.picker-wrapper'));
        backdrop.fromTo('opacity', 0.01, 0.26);
        wrapper.fromTo('translateY', '100%', '0%');
        this.easing('cubic-bezier(.36,.66,.04,1)').duration(400).add(backdrop).add(wrapper);
    };
    return PickerSlideIn;
}(Transition));
export { PickerSlideIn };
var PickerSlideOut = (function (_super) {
    __extends(PickerSlideOut, _super);
    function PickerSlideOut() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    PickerSlideOut.prototype.init = function () {
        var ele = this.leavingView.pageRef().nativeElement;
        var frame = new Animation(this.plt, ele);
        frame.fromTo('opacity', 1, 0);
        this.easing('cubic-bezier(.36,.66,.04,1)').duration(450).add(frame);
    };
    return PickerSlideOut;
}(Transition));
export { PickerSlideOut };
//# sourceMappingURL=picker-transitions.js.map