ionic常用插件——日期选择

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

效果图如下:

rq

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

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

3、页面代码:

<label class="item item-input">
    <span class="input-label">服务日期:</span>
    <ionic-datepicker input-obj="datepickerObject" class="item-button-right">
        <button class="button button-clear button-positive">
            {{datepickerObject.inputDate | date:'yyyy-MM-dd'}}
        </button>
    </ionic-datepicker>
</label>

4、js中的代码:

var weekDaysList = ["日", "一", "二", "三", "四", "五", "六"];
var monthList = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
var datePickerCallback = function (val) {
    if (typeof(val) === 'undefined') {
        console.log('No date selected');
    } else {
        console.log('Selected date is : ', val);
        $scope.datepickerObject.inputDate = val;
    }
};
$scope.datepickerObject = {
    titleLabel: '日期选择',  //Optional
    todayLabel: '今天',  //Optional
    closeLabel: '取消',  //Optional
    setLabel: '确定',  //Optional
    setButtonType: 'button-calm',  //Optional
    todayButtonType: 'button-calm',  //Optional
    closeButtonType: 'button-calm',  //Optional
    inputDate: new Date(),    //Optional
    mondayFirst: false,    //Optional
    //disabledDates: disabledDates, //Optional
    weekDaysList: weekDaysList,   //Optional
    monthList: monthList, //Optional
    templateType: 'modal', //Optional
    modalHeaderColor: 'bar-calm', //Optional
    modalFooterColor: 'bar-calm', //Optional
    from: new Date(),   //Optional
    to: new Date(2018, 12, 31), //Optional
    callback: function (val) {    //Mandatory
        datePickerCallback(val);
    }
};
This entry was posted in ionic(cordova)插件. Bookmark the permalink.

5 Responses to ionic常用插件——日期选择

  1. Sasha says:

    还有一个叫onezone-datepicker的日期控件,也是专门为ionic订制的,也很不错

  2. 小翠 says:

    请问选择之后的时间,怎么传入到后台,用$scope.datatime 接收??

发表评论

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