ionic 时间选择说明_ionic 选择时间按钮-CSDN博客

本文链接：https://blog.csdn.net/union89/article/details/50808762

ionic 时间选择控件先贴代码，后期再累加说明。

index.html 调用js

官网说需要使用 bower命令，没看懂，这步跳过了。

In your project repository install the ionic-datepicker using bower

bower install ionic-datepicker --save

引用插件,（咳咳，注意本地地址）

<script src="lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script>

在相应需要插件的模块中加注入，如下：

angular.module('mainModuleName', ['ionic', 'ionic-datepicker']){
//
}

在html中加这段（建议将蓝色部分去掉，那是是按钮占整行的样式），实际效果相当于按钮：

<ionic-datepicker input-obj="datepickerObjectEnd">
  <button class="button button-block button-positive"> {{datepickerObjectEnd.inputDate | date:datepickerObjectEnd.dateFormat}}</button>
</ionic-datepicker>

在controller中加如下部分（是有点多）：

//说是用于格式禁用，还没试过，你也可以置空。

var disabledDates = [
new Date(1437719836326),
new Date(),
new Date(2015, 7, 10), //months are 0-based, this is August, 10th!
new Date('Wednesday, August 12, 2015'), //Works with any valid Date formats like long format
new Date("08-14-2015"), //Short format
new Date(1439676000000) //UNIX format
];

//方便的年月日设置方式，正和我意，可以随便改了。
var weekDaysList = ["日", "一", "二", "三", "四", "五", "六"];
//默认值：["S", "M", "T", "W", "T", "F", "S"];
var monthList = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
//默认值：["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

//日期选择后的回调函数
var datePickerCallbacks = function (val) {
if (typeof (val) === 'undefined') {
} else {
console.log('Selected date is : ', val);
$scope.datepickerObjectEnd.inputDate = val; //这行官网没有，不设置的话，选中日期不能回填到页面。
}
};
//主体对象
$scope.datepickerObjectEnd = {
titleLabel: '选择日期', //可选
todayLabel: '今天', //可选
closeLabel: '关闭', //可选
setLabel: '设置', //可选
setButtonType: 'button-assertive', //可选
todayButtonType: 'button-assertive', //可选
closeButtonType: 'button-assertive', //可选
inputDate: new Date(), //可选，输入值
mondayFirst: true, //可选,星期一开头
disabledDates: disabledDates, //可选
weekDaysList: weekDaysList, //可选
monthList: monthList, //可选
templateType: 'popup', //可选i.e.的模式 modal or popup(兼容模式？)
showTodayButton: 'true', //可选
modalHeaderColor: 'bar-positive', //可选
modalFooterColor: 'bar-positive', //可选
from: new Date(2008, 8, 2), //可选
to: new Date(2030, 8, 25), //可选
callback: function (val) { //Mandatory
datePickerCallbacke(val);
},
dateFormat: 'yyyy-MM-dd', //可选
closeOnSelect: true, //可选,设置选择日期后是否要关掉界面。呵呵，原本是false。
};