AngularJS开发学习笔记:ionic 使用日期选择框ionic-datepicker插件

转载自:https://jingyan.baidu.com/article/92255446651ac3851648f438.html

1. 你可以使用bower工具去安装ionic-datepicker插件（对bower工具无感），我这里介绍在ionic项目里直接去安装插件。首先直接去github代码仓库下载js文件ionic-datepicker.bundle.min.js。

2. GitHub下载地址:https://github.com/rajeshwarpatlolla/ionic-datepicker

3. 

4. 找到下载的文件，在dist文件夹找到ionic-datepicker.bundle.min.js，然后一般放置到ionic项目的lib文件夹。

   

   

5. 然后在ionic项目的index.html中引入js文件，在app.js中注入“ionic-datepicker”模块

   

6.  

   然后在app.js的config中设置日期插件的基础配置，注入“ionicDatePickerProvider”。以下是代码块：

      

    //日期选择
   
       var datePickerObj = {
   
           inputDate: new Date(),
   
           titleLabel: '选择日期',
   
           setLabel: '确定',
   
           todayLabel: '今天',
   
           closeLabel: '关闭',
   
           mondayFirst: false,
   
           weeksList: ["日", "一", "二", "三", "四", "五", "六"],
   
           monthsList: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
   
           templateType: 'popup',
   
           from: new Date(1949, 10, 1),
   
           to: new Date(2050, 12, 31),
   
           showTodayButton: true,
   
           dateFormat: 'yyyy-MM-dd',
   
           closeOnSelect: false,
   
           disableWeekdays: []
   
       };
   
       ionicDatePickerProvider.configDatePicker(datePickerObj);

   

   

   END

使用

1. 在使用日期选择框的页面中添加如下代码，绑定DOM元素。

   

2. 然后在控制器代码里重写日期选择插件配置的回调函数（基础配置在app.js已经设置了，如果没有什么特殊需求便不需要再设置了）

   

3. 如果想修改插件的颜色，直接去ionic-datepicker.bundle.min.js修改源代码就好了，全局替换颜色即可。