UIB-DatePicker-popup自定义文本框

时间:2016-06-22 12:34:46

标签: angularjs datepicker angular-ui-bootstrap

我有一个uib-datepicker-popup控件,我想要正常运行,除了1个差异,我不确定是否/如何完成这1个更改。我的控件如下所示:

<input type="text"
       class="form-control"
       uib-datepicker-popup="MM/dd/yyyy"
       ng-model="vm.selectedDate"
       ng-click="vm.toggleCalendar()"
       is-open="vm.datepickerOpen"
       datepicker-template-url="{{vm.pickerHtmlSource}}"
       datepicker-popup-template-url="{{vm.popupHtmlSource}}"
       datepicker-options="vm.dateOptions"
       close-text="Close"
       change-month="vm.changeMonth($month, $year)"/>

我想要的是当选择日期时,它当前显示日期,即2016年6月26日。我希望能够做的是更改文本框中显示的内容。根据应用程序中的其他一些属性,我想要显示3种不同的内容。我想显示日期,就像现在一样,2016年6月22日。或者我想显示W / E 6/25/2016,这是周结束日期,通常是星期日,但有时可能是不同的一天(我知道基于我加载的其他一些数据)。我想要显示的最后一件事是自定义会计月份标签,我现在再次基于我已加载的其他数据,因此它类似于周结束。

我做了一些调查,并且有一个名为uibDateParser的服务控制文本框中显示的内容。它们有一个formatCodeToRegex方法的数组。如果我修改了这段代码,我可以控制打印出来的内容,但我不想更改该文件,因为我必须记得在我更新时随时更改它。那么我有没有办法在不影响主文件的情况下更新以下内容。

.service('uibDateParser', ['$log', '$locale', 'dateFilter', 'orderByFilter', function($log, $locale, dateFilter, orderByFilter) {
  // Pulled from https://github.com/mbostock/d3/blob/master/src/format/requote.js
  var SPECIAL_CHARACTERS_REGEXP = /[\\\^\$\*\+\?\|\[\]\(\)\.\{\}]/g;

  var localeId;
  var formatCodeToRegex;

  this.init = function() {
    localeId = $locale.id;

    this.parsers = {};
    this.formatters = {};

    formatCodeToRegex = [
      {
        key: 'yyyy',
        regex: '\\d{4}',
        apply: function(value) { this.year = +value; },
        formatter: function(date) {
          var _date = new Date();
          _date.setFullYear(Math.abs(date.getFullYear()));
          return dateFilter(_date, 'yyyy');
        }
      },
   ]
  };
...
}

我做了最小的改变是在init函数中我添加了以下行

this.formatCodeToRegex = formatCodeToRegex;

有了这一行,我可以在我的课程中使用以下内容(它是用TypeScript编写的,但你应该能够在不知道TypeScript的情况下得到这个想法)显然这只是现在硬编码再见,我会适应真实的代码。

    static $inject = ['$scope', '$q', '$location', 'uibDateParser'];
    constructor($scope: IOsdatepickerDirectiveControllerScope, $q: ng.IQService, $location: ng.ILocationService, uibDateParser: any) {
        super($scope, $q, $location);

        uibDateParser.formatCodeToRegex.push({
            key: 'WEND',
            regex: '.*',
            apply(value) {

            },
            formatter(date) {
                return 'Bye';
            }
        });

0 个答案:

没有答案