ionic常用插件——日期选择2

效果图如下:
222

需要用到的JS文件:onezone-datepicker

1、在index引入

<script src="lib/util/onezone-datepicker.js"></script>

2、在app.js中注入

onezone-datepicker

3、HTML代码

<div class="padding">
  <onezone-datepicker datepicker-object="onezoneDatepicker">
    <button class="button button-block button-outline button-positive show-onezone-datepicker">
      {{onezoneDatepicker.date | date:'dd MMMM yyyy'}}
    </button>
  </onezone-datepicker>
</div>
<div class="padding">
  <button class="button button-block button-outline button-positive" ng-click="showDatepicker()">
    Show datepicker
  </button>
</div>

4、control中js代码

//日历测试
var currentDate = new Date();
var date = new Date(currentDate.getFullYear(), currentDate.getMonth(), 23);
$scope.date = date;
$scope.myFunction = function (date) {
  alert(date);
};

$scope.onezoneDatepicker = {
  date: date,
  mondayFirst: false,
  months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
  daysOfTheWeek: ["日", "一", "二", "三", "四", "五", "六"],
  startDate: new Date(1989, 1, 26),
  endDate: new Date(2024, 1, 26),
  disablePastDays: false,
  disableSwipe: false,
  disableWeekend: false,
  disableDates: [new Date(date.getFullYear(), date.getMonth(), 15), new Date(date.getFullYear(), date.getMonth(), 16), new Date(date.getFullYear(), date.getMonth(), 17)],
  showDatepicker: false,
  showTodayButton: true,
  calendarMode: false,
  hideCancelButton: false,
  hideSetButton: true,
  callback: $scope.myFunction
};

$scope.showDatepicker = function () {
  $scope.onezoneDatepicker.showDatepicker = true;
};
This entry was posted in ionic(cordova)插件. Bookmark the permalink.

4 Responses to ionic常用插件——日期选择2

  1. 许健 says:

    我想问下23 JUly 2016这个,怎么把July改成中文啊,是不是得去改onezone-datepicke.js文件里的东西?

发表评论

电子邮件地址不会被公开。 必填项已用*标注