最终效果：
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
网友评论