ionic 日期时间控件

最新推荐文章于 2019-08-18 16:21:45 发布

原创最新推荐文章于 2019-08-18 16:21:45 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ionic #ion-datetime-picker #日期时间控件

ionic 专栏收录该内容

2 篇文章

订阅专栏

第一步

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