js/crm.datepicker.js

   1 (function($, CRM, _) {
   2   "use strict";
   3
   4   /**
   5    * @see http://wiki.civicrm.org/confluence/display/CRMDOC/crmDatepicker
   6    */
   7   $.fn.crmDatepicker = function(options) {
   8     return $(this).each(function() {
   9       if ($(this).is('.crm-form-date-wrapper .crm-hidden-date')) {
  10         // Already initialized - destroy
  11         $(this)
  12           .off('.crmDatepicker')
  13           .css('display', '')
  14           .removeClass('crm-hidden-date')
  15           .siblings().remove();
  16         $(this).unwrap();
  17       }
  18       if (options === 'destroy') {
  19         return;
  20       }
  21       var
  22         $dataField = $(this).wrap('<span class="crm-form-date-wrapper" />'),
  23         settings = _.cloneDeep(options || {}),
  24         $dateField = $(),
  25         $timeField = $(),
  26         $clearLink = $(),
  27         hasDatepicker = settings.date !== false && settings.date !== 'yy',
  28         type = hasDatepicker ? 'text' : 'number';
  29
  30       if (settings.allowClear !== undefined ? settings.allowClear : !$dataField.is('.required, [required]')) {
  31         $clearLink = $('<a class="crm-hover-button crm-clear-link" title="'+ _.escape(ts('Clear')) +'"><i class="crm-i fa-times"></i></a>')
  32           .insertAfter($dataField);
  33       }
  34       if (settings.time !== false) {
  35         $timeField = $('<input>').insertAfter($dataField);
  36         CRM.utils.copyAttributes($dataField, $timeField, ['class', 'disabled']);
  37         $timeField
  38           .addClass('crm-form-text crm-form-time')
  39           .attr('placeholder', $dataField.attr('time-placeholder') === undefined ? ts('Time') : $dataField.attr('time-placeholder'))
  40           .attr('aria-label', $dataField.attr('time-placeholder') === undefined ? ts('Time') : $dataField.attr('time-placeholder'))
  41           .change(updateDataField)
  42           .timeEntry({
  43             spinnerImage: '',
  44             show24Hours: settings.time === true || settings.time === undefined ? CRM.config.timeIs24Hr : settings.time == '24'
  45           });
  46       }
  47       if (settings.date !== false) {
  48         // Render "number" field for year-only format, calendar popup for all other formats
  49         $dateField = $('<input type="' + type + '">').insertAfter($dataField);
  50         CRM.utils.copyAttributes($dataField, $dateField, ['placeholder', 'style', 'class', 'disabled', 'aria-label']);
  51         $dateField.addClass('crm-form-' + type);
  52         if (hasDatepicker) {
  53           settings.minDate = settings.minDate ? CRM.utils.makeDate(settings.minDate) : null;
  54           settings.maxDate = settings.maxDate ? CRM.utils.makeDate(settings.maxDate) : null;
  55           settings.dateFormat = typeof settings.date === 'string' ? settings.date : CRM.config.dateInputFormat;
  56           settings.changeMonth = _.includes(settings.dateFormat, 'm');
  57           settings.changeYear = _.includes(settings.dateFormat, 'y');
  58           if (!settings.yearRange && settings.minDate !== null && settings.maxDate !== null) {
  59             settings.yearRange = '' + CRM.utils.formatDate(settings.minDate, 'yy') + ':' + CRM.utils.formatDate(settings.maxDate, 'yy');
  60           }
  61           $dateField.addClass('crm-form-date').datepicker(settings);
  62         } else {
  63           $dateField.attr('min', settings.minDate ? CRM.utils.formatDate(settings.minDate, 'yy') : '1000');
  64           $dateField.attr('max', settings.maxDate ? CRM.utils.formatDate(settings.maxDate, 'yy') : '4000');
  65         }
  66         $dateField.change(updateDataField);
  67       }
  68       // Rudimentary validation. TODO: Roll into use of jQUery validate and ui.datepicker.validation
  69       function isValidDate() {
  70         // FIXME: parseDate doesn't work with incomplete date formats; skip validation if no month, day or year in format
  71         var lowerFormat = settings.dateFormat.toLowerCase();
  72         if (lowerFormat.indexOf('y') < 0 || lowerFormat.indexOf('m') < 0 || !dateHasDay()) {
  73           return true;
  74         }
  75         try {
  76           $.datepicker.parseDate(settings.dateFormat, $dateField.val());
  77           return true;
  78         } catch (e) {
  79           return false;
  80         }
  81       }
  82
  83       /**
  84        * Does the date format contain the day.
  85        *
  86        * @returns {boolean}
  87        */
  88       function dateHasDay() {
  89         var lowerFormat = settings.dateFormat.toLowerCase();
  90         if (lowerFormat.indexOf('d') < 0) {
  91           return false;
  92         }
  93         return true;
  94       }
  95       function updateInputFields(e, context) {
  96         var val = $dataField.val(),
  97           time = null;
  98         if (context !== 'userInput' && context !== 'crmClear') {
  99           if (hasDatepicker) {
 100             $dateField.datepicker('setDate', _.includes(val, '-') ? $.datepicker.parseDate('yy-mm-dd', val) : null);
 101           } else if ($dateField.length) {
 102             $dateField.val(val.slice(0, 4));
 103           }
 104           if ($timeField.length) {
 105             if (val.length === 8) {
 106               time = val;
 107             } else if (val.length === 19) {
 108               time = val.split(' ')[1];
 109             }
 110             $timeField.timeEntry('setTime', time);
 111           }
 112         }
 113         $clearLink.css('visibility', val ? 'visible' : 'hidden');
 114       }
 115       function updateDataField(e, context) {
 116         // The crmClear event wipes all the field values anyway, so no need to respond
 117         if (context !== 'crmClear') {
 118           var val = '';
 119           if ($dateField.val()) {
 120             if (hasDatepicker && isValidDate() && dateHasDay()) {
 121               val = $.datepicker.formatDate('yy-mm-dd', $dateField.datepicker('getDate'));
 122               $dateField.removeClass('crm-error');
 123             } else if (!hasDatepicker) {
 124               val = $dateField.val() + '-01-01';
 125             }
 126             else if (!dateHasDay()) {
 127               // This would be a Year-month date (yyyy-mm)
 128               // it could be argued it should not use a datepicker....
 129               val = $dateField.val() + '-01';
 130             } else {
 131               $dateField.addClass('crm-error');
 132             }
 133           }
 134           if ($timeField.val()) {
 135             val += (val ? ' ' : '') + $timeField.timeEntry('getTime').toTimeString().substr(0, 8);
 136           }
 137           $dataField.val(val).trigger('change', ['userInput']);
 138         }
 139       }
 140       $dataField.hide().addClass('crm-hidden-date').on('change.crmDatepicker', updateInputFields);
 141       updateInputFields();
 142     });
 143   };
 144 })(jQuery, CRM, CRM._);