自定义开发ionic自带的日历插件ionic-datePicker

一、首先说一下如何将ionic-datePicker插件引入到项目中：

1. 在项目根目录中：bower install ionic-datepicker --save

2. 下载完成后，在lib文件夹中就会出现ionic-datepicker文件夹

3. 在index.html中引入这个dist中的ionic-datepicker.bundle.min.js文件

4. 在app.js中注入依赖ionic-datepicker,如下：

5. 相应的页面的index.html中写如下：

扫描二维码关注公众号，回复： 5530669 查看本文章

<div on-tap="openDatePicker()">
        <span style="color:#f75a0e" ng-bind="validedTime | date:'yyyy-MM-dd'"></span>
</div>

6. 在对应的controller.js中写如下：

/* 获取相隔天数 */
$scope.GetDateDiff = function(startDate,endDate)
{
        var startTime = new Date(Date.parse(startDate)).getTime();
        var endTime = new Date(Date.parse(endDate)).getTime();
        var dates = Math.abs((startTime - endTime))/(1000*60*60*24);
        return  dates;
}

$scope.validedTime = $scope.startDate;
$scope.validedNormalTime = $scope.validedTime;                   
 /* 测试数据 */
$scope.validedTime = $scope.startDate;   //当天开始天
$scope.validedEndTime =  $scope.endDate;  //日历结束日

var datePickerObj = {
//选择日期后的回掉
callback: function (val) {
    if (typeof (val) === 'undefined') {

} else {

	$scope.validedTime = $filter('date')(new Date(val), 'yyyy-MM-dd');
        datePickerObj.inputDate = new Date(val); //更新日期弹框上的日期  
},
   disabledDates: [
           new Date(2016, 2, 16),
           new Date(2015, 3, 16),
           new Date(2015, 4, 16),
           new Date(2015, 5, 16),
           new Date('Wednesday, August 12, 2015'),
           new Date("2016-08-16"),
           new Date(1439676000000)
],
    from: $scope.validedTime,   
    to: $scope.validedEndTime, 
    inputDate: new Date($scope.validedTime),
    mondayFirst: true,
    disableWeekdays: [], //设置不能选中
    closeOnSelect: false,
    dateFormat: 'yyyy-MM-dd',
    templateType: 'popup'
};

//打开日期选择框
$scope.openDatePicker = function () {
    ionicDatePicker.openDatePicker(datePickerObj);
};

$scope.navigate = function (state) {
       nav.navigate(state);
};

二、如上的步骤完成后，会得到以下的效果图：

重新整改插件的css和js，得到如下：

三、经验教训：

1. 更改ionic-datepicker-modal.html没有任何效果，颜色及边距是在ionic-datepicker.styles.css中修改；

2. 原图插件中的是确认设置在左，取消设置在右。由于用户习惯及项目中存在的所有的popup弹框都是取消在左，确认在右。更改ionic-datepicker-modal.html的button顺序，或者是添加类名，增加行内样式都没有任何作用。最后更改了ionic-datepicker.provider.js中的文件，如下：

buttons.push({
    text: $scope.mainObj.closeLabel,
    type: 'button_close',
    onTap: function (e) {
     console.log('ionic-datepicker popup closed.');
}
});

    if (!$scope.mainObj.closeOnSelect) {
    buttons.push({
         text: $scope.mainObj.setLabel,
         style: {color:'white'},
         type: 'button_set',
         cssClass:'whiteText',
         onTap: function (e) {              $scope.mainObj.callback($scope.selctedDateEpoch);
}
});
}

3. from和to是让日历中的某个范围高亮，可点击选择设置；而其余范围是暗灰，不可点击。

4. 对于点击确认后的需要添加的回调函数，写在了datePickerObj中的callback函数中。可以自由发挥！

终于改好了，好开心，好有成就感！嘻嘻☺️

==========================================================================================================

迭代版本新增加了签到的日历，我也同样使用了这个ionic-datePicker组件。

需要做的是：

1.改造成签到组件，只能显示当前年月的签到；不可查看上个月或者下个月；日期不可点击选择；需要添加已签到标识icon；

2. 需要对项目中的已有的ionic-datePicker插件进行兼容，需要改造这个签到组件，不影响其原来原有的选择日期的日历插件功能。

经过长途跋涉，万水千山只等闲，改造成功！很简单的！

看效果图：

对此，我专门开了一个github网址，写了一个demo和核心代码，可移步去github网址浏览具体代码：

https://github.com/spicyboiledfish/ionic-datepicker

自定义开发ionic自带的日历插件ionic-datePicker

猜你喜欢