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