ionic之时间&日期组件实例

落日映苍穹つ 2022-09-24 13:26 523阅读 0赞

## **ionic-datepick** ##

### **introduce** ###

[http://market.ionic.io/plugins/ionicdatepicker][http_market.ionic.io_plugins_ionicdatepicker]

### **download** ###

bower install ionic-datepicker#0.9.0 --save

### **load js** ###

### **use** ###

**app中注入**

angular.module('mainModuleName', ['ionic', 'ionic-datepicker']){
    //
    }

**controller里面配置**

**html中使用**

<h3>日期：</h3>
            <ionic-datepicker input-obj="datepickerObjectEnd">
              
              
              
              {
       {scheduleInfo.scheduleDate|date:'fullDate'}}
            </ionic-datepicker>

**效果**

![这里写图片描述][20160801175524960]

## **ionic-timepick** ##

### **introduce** ###

[https://github.com/rajeshwarpatlolla/ionic-timepicker][https_github.com_rajeshwarpatlolla_ionic-timepicker]

### **download** ###

bower install ionic-timepicker#0.4.0 --save

### **load js** ###

<script src="lib/ionic-timepicker/dist/ionic-timepicker.bundle.min.js"></script>

### **use** ###

**app中注入**

angular.module('mainModuleName', ['ionic', 'ionic-timepicker']){
    //
    }

**controller配置**

$scope.vipTimePickerObject = {
          inputEpochTime: ((new Date()).getHours() * 60 * 60),  //Optional
          step: 15,  //Optional
          format: 24,  //Optional
          titleLabel: '24-hour Format',  //Optional
          setLabel: 'Set',  //Optional
          closeLabel: 'Close',  //Optional
          setButtonType: 'button-positive',  //Optional
          closeButtonType: 'button-stable',  //Optional
          callback: function (val) {     //Mandatory
            timePickerCallback(val);
          }
        };
        function timePickerCallback(val) { 
          if (typeof (val) === 'undefined') {
            console.log('Time not selected');
          } else {
            $scope.vipTimePickerObject.inputEpochTime = val;
            $scope.scheduleInfo.scheduleTime = epochParser(val);
            console.log('选择的时间：' + epochParser(val));
          }
        }
    
        function prependZero(param) { 
          if (String(param).length < 2) {
            return "0" + String(param);
          }
          return param;
        }
    
        function epochParser(val) { 
          if (val === null) {
            return "00:00";
          } else {
            var hours = parseInt(val / 3600);
            var minutes = (val / 60) % 60;
            return (prependZero(hours) + ":" + prependZero(minutes));
          }
        }

**html里面调用**

<h3>时间：</h3> <ionic-timepicker input-obj="vipTimePickerObject">       { { scheduleInfo.scheduleTime}} </ionic-timepicker>

**效果**

![这里写图片描述][20160801175842912]

## **ion-datetime-picker** ##

### **introduce** ###

[https://github.com/katemihalikova/ion-datetime-picker][https_github.com_katemihalikova_ion-datetime-picker]

### **download** ###

bower install ion-datetime-picker --save

### **load js** ###

### **use** ###

**app中注入**

angular.module("myApp", ["ionic", "ion-datetime-picker"]);

**html中调用**

<ion-list>
        <ion-item ion-datetime-picker ng-model="datetimeValue">
            {
       {datetimeValue| date: "yyyy-MM-dd H:mm:ss"}}
        </ion-item>
    </ion-list>

**controller里面调用**

$scope.addRemindTime = function () { 
          console.log("增加提醒时间设置");
    
          $scope.tmp = {};
          $scope.tmp.newDate = new Date();
    
          var birthDatePopup = $ionicPopup.show({
            //template: '<datetimepicker ng-model="tmp.newDate"></datetimepicker>',
            template: '<div ion-datetime-picker="" seconds="" am-pm="" ng-model="tmp.newDate"></div>',
            title: "Remind Time",
            scope: $scope,
            buttons: [
              {text: 'Cancel'},
              {
                text: '<b>Save</b>',
                type: 'button-positive',
                onTap: function (e) { 
                  $scope.datetimeValue = $scope.tmp.newDate;
                }
              }
            ]
          });
        }

**效果**  
![这里写图片描述][20160801180002399]

### **优化的地方** ###

1.  很多配置信息应该放到app.config中进行配置
2.  国际化目前还没做
3.  响应效率还没测试

[http_market.ionic.io_plugins_ionicdatepicker]: http://market.ionic.io/plugins/ionicdatepicker
[20160801175524960]: /images/20220719/04ffb00f073c4182998d6f6a9d3b5766.png
[https_github.com_rajeshwarpatlolla_ionic-timepicker]: https://github.com/rajeshwarpatlolla/ionic-timepicker
[20160801175842912]: /images/20220719/cf8dbac60adc4de9a669387645b9918d.png
[https_github.com_katemihalikova_ion-datetime-picker]: https://github.com/katemihalikova/ion-datetime-picker
[20160801180002399]: /images/20220719/eb240ac6a65248778b5e429770cfc214.png