ionic 日期时间控件

第一步

bower install ion-datetime-picker --save

npm install ion-datetime-picker --save

第二步

index.html页面引入

第三步

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

 


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部