第一步
bower install ion-datetime-picker --save
npm install ion-datetime-picker --save
第二步
在index.html页面引入
<script src="lib/ion-datetime-picker/release/ion-datetime-picker.min.js"></script>
<link href="lib/ion-datetime-picker/release/ion-datetime-picker.min.css" rel="stylesheet">
第三步
app.js中注入
angular.module("myApp", ["ionic", "ion-datetime-picker"]);
第四步(这步骤可跳过不做)
在app.config.js中(或者是在app.js中)注入 $ionicPickerI18n
$ionicPickerI18n.weekdays = ["日", "一", "二", "三", "四", "五", "六"];
$ionicPickerI18n.months = ["1月", "2月", "3月", "4月","5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
$ionicPickerI18n.ok = "确定";
$ionicPickerI18n.cancel = "取消";
$ionicPickerI18n.okClass = "button-positive";
$ionicPickerI18n.cancelClass = "button-stable";
$ionicPickerI18n.arrowButtonClass = "button-positive";
第五步
在html中
<ion-list>
<div class="item" ion-datetime-picker ng-model="vm.condition.datetimeValue" ng-change="vm.addRemindTime()" title="'请选择日期和时间'">
{{vm.condition.datetimeValue| date: 'yyyy-MM-dd HH:mm:ss'}}
<input type="text" placeholder="请选择时间" ng-model="vm.inputDate" >
</div>
</ion-list>
<button ng-click="vm.get()">获取</button>
第六步
在controller.js中
var vm=this;
vm.condition={};
vm.addRemindTime=addRemindTime;
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
};
function addRemindTime(){
// console.log(vm.condition.datetimeValue);
// console.log( vm.condition.datetimeValue.Format("yyyy-MM-dd hh:mm"))
vm.inputDate=vm.condition.datetimeValue.Format("yyyy-MM-dd hh:mm")
}
vm.get=function(){
console.log("输入框的内容是:",vm.inputDate)
}