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) 
  

    } 
  

ionic 日期时间控件

猜你喜欢