ionic 日期时间控件

第一步

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)
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值