ionic常用插件——时间选择

原则来说这个也不属于插件范畴

效果如下:

sj

1、先导入ionic-timepicker.bundle.min这个JS文件。

2、在app.js文件中启动模块注入’ionic-timepicker’

3、页面代码:

<label class="item item-input">
    <span class="input-label">服务时间:</span>
    <ionic-timepicker input-obj="vipTimePickerObject" class="item-button-right">
        <button class="button button-clear button-positive ">
            <standard-time-no-meridian
                    etime='vipTimePickerObject.inputEpochTime'></standard-time-no-meridian>
        </button>
    </ionic-timepicker>
</label>

4、js代码

//时间插件
$scope.vipTimePickerObject = {
    inputEpochTime: ((new Date()).getHours() * 60 * 60),  //Optional
    step: 10,  //Optional
    format: 24,  //Optional
    titleLabel: '时间选择',  //Optional
    setLabel: '确定',  //Optional
    closeLabel: '取消',  //Optional
    setButtonType: 'button-positive',  //Optional
    closeButtonType: 'button-stable',  //Optional
    callback: function (val) {    //Mandatory
        timePickerCallback(val);
    }
};
function timePickerCallback(val) {
    if (typeof (val) === 'undefined') {
        console.log('Time not selected');
    } else {
        $scope.vipTimePickerObject.inputEpochTime = val;
        $scope.selectedTime = epochParser(val);
        console.log('选择的时间:' + epochParser(val));
    }
}

function prependZero(param) {
    if (String(param).length < 2) {
        return "0" + String(param);
    }
    return param;
}

function epochParser(val) {
    if (val === null) {
        return "00:00";
    } else {
        var hours = parseInt(val / 3600);
        var minutes = (val / 60) % 60;
        return (prependZero(hours) + ":" + prependZero(minutes));
    }
}
This entry was posted in ionic(cordova)插件. Bookmark the permalink.

发表评论

电子邮件地址不会被公开。 必填项已用*标注