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         placeholder,
  28         hasDatepicker = settings.date !== false && settings.date !== 'yy',
  29         type = hasDatepicker ? 'text' : 'number';
  30
  31       if (settings.allowClear !== undefined ? settings.allowClear : !$dataField.is('.required, [required]')) {
  32         $clearLink = $('<a class="crm-hover-button crm-clear-link" title="'+ _.escape(ts('Clear')) +'"><i class="crm-i fa-times"></i></a>')
  33           .insertAfter($dataField);
  34       }
  35       if (settings.time !== false) {
  36         $timeField = $('<input>').insertAfter($dataField);
  37         placeholder = settings.timePlaceholder || $dataField.attr('time-placeholder');
  38         CRM.utils.copyAttributes($dataField, $timeField, ['class', 'disabled']);
  39         $timeField
  40           .addClass('crm-form-text crm-form-time')
  41           // Set default placeholder as clock icon (`fa-clock` is Unicode f017)
  42           .attr('placeholder', placeholder === undefined ? '\uf017' : placeholder)
  43           .attr('aria-label', placeholder === undefined ? ts('Time') : placeholder)
  44           .change(updateDataField)
  45           .timeEntry({
  46             spinnerImage: '',
  47             show24Hours: settings.time === true || settings.time === undefined ? CRM.config.timeIs24Hr : settings.time == '24'
  48           });
  49         if (!placeholder) {
  50           $timeField.addClass('crm-placeholder-icon');
  51         }
  52       }
  53       if (settings.date !== false) {
  54         // Render "number" field for year-only format, calendar popup for all other formats
  55         $dateField = $('<input type="' + type + '">').insertAfter($dataField);
  56         CRM.utils.copyAttributes($dataField, $dateField, ['style', 'class', 'disabled', 'aria-label']);
  57         placeholder = settings.placeholder || $dataField.attr('placeholder');
  58         $dateField.addClass('crm-form-' + type);
  59         if (!settings.minDate && !_.isUndefined(settings.start_date_years)) {
  60           settings.minDate = '' + (new Date().getFullYear() - settings.start_date_years) + '-01-01';
  61         }
  62         if (!settings.maxDate && !_.isUndefined(settings.end_date_years)) {
  63           settings.maxDate = '' + (new Date().getFullYear() + settings.end_date_years) + '-12-31';
  64         }
  65         if (hasDatepicker) {
  66           settings.minDate = settings.minDate ? CRM.utils.makeDate(settings.minDate) : null;
  67           settings.maxDate = settings.maxDate ? CRM.utils.makeDate(settings.maxDate) : null;
  68           settings.dateFormat = typeof settings.date === 'string' ? settings.date : CRM.config.dateInputFormat;
  69           settings.changeMonth = _.includes(settings.dateFormat, 'm');
  70           settings.changeYear = _.includes(settings.dateFormat, 'y');
  71           if (!settings.yearRange && settings.minDate !== null && settings.maxDate !== null) {
  72             settings.yearRange = '' + CRM.utils.formatDate(settings.minDate, 'yy') + ':' + CRM.utils.formatDate(settings.maxDate, 'yy');
  73           }
  74           $dateField.addClass('crm-form-date').datepicker(settings);
  75         } else {
  76           $dateField.attr('min', settings.minDate ? CRM.utils.formatDate(settings.minDate, 'yy') : '1000');
  77           $dateField.attr('max', settings.maxDate ? CRM.utils.formatDate(settings.maxDate, 'yy') : '4000');
  78         }
  79         // Set placeholder as calendar icon (`fa-calendar` is Unicode f073)
  80         $dateField.attr({placeholder: placeholder === undefined ? '\uF073' : placeholder}).change(updateDataField);
  81         if (!placeholder) {
  82           $dateField.addClass('crm-placeholder-icon');
  83         }
  84       }
  85       // Rudimentary validation. TODO: Roll into use of jQUery validate and ui.datepicker.validation
  86       function isValidDate() {
  87         // FIXME: parseDate doesn't work with incomplete date formats; skip validation if no month, day or year in format
  88         var lowerFormat = settings.dateFormat.toLowerCase();
  89         if (lowerFormat.indexOf('y') < 0 || lowerFormat.indexOf('m') < 0 || !dateHasDay()) {
  90           return true;
  91         }
  92         try {
  93           $.datepicker.parseDate(settings.dateFormat, $dateField.val());
  94           return true;
  95         } catch (e) {
  96           return false;
  97         }
  98       }
  99
 100       /**
 101        * Does the date format contain the day.
 102        *
 103        * @returns {boolean}
 104        */
 105       function dateHasDay() {
 106         var lowerFormat = settings.dateFormat.toLowerCase();
 107         if (lowerFormat.indexOf('d') < 0) {
 108           return false;
 109         }
 110         return true;
 111       }
 112       function updateInputFields(e, context) {
 113         var val = $dataField.val(),
 114           time = null;
 115         if (context !== 'userInput' && context !== 'crmClear') {
 116           if (hasDatepicker) {
 117             $dateField.datepicker('setDate', _.includes(val, '-') ? $.datepicker.parseDate('yy-mm-dd', val) : null);
 118           } else if ($dateField.length) {
 119             $dateField.val(val.slice(0, 4));
 120           }
 121           if ($timeField.length) {
 122             if (val.length === 8) {
 123               time = val;
 124             } else if (val.length === 19) {
 125               time = val.split(' ')[1];
 126             }
 127             $timeField.timeEntry('setTime', time);
 128           }
 129         }
 130         $clearLink.css('visibility', val ? 'visible' : 'hidden');
 131       }
 132       function updateDataField(e, context) {
 133         // The crmClear event wipes all the field values anyway, so no need to respond
 134         if (context !== 'crmClear') {
 135           var val = '';
 136           if ($dateField.val()) {
 137             if (hasDatepicker && isValidDate() && dateHasDay()) {
 138               val = $.datepicker.formatDate('yy-mm-dd', $dateField.datepicker('getDate'));
 139               $dateField.removeClass('crm-error');
 140             } else if (!hasDatepicker) {
 141               val = $dateField.val() + '-01-01';
 142             }
 143             else if (!dateHasDay()) {
 144               // This would be a Year-month date (yyyy-mm)
 145               // it could be argued it should not use a datepicker....
 146               val = $dateField.val() + '-01';
 147             } else {
 148               $dateField.addClass('crm-error');
 149             }
 150           }
 151           if ($timeField.val()) {
 152             val += (val ? ' ' : '') + $timeField.timeEntry('getTime').toTimeString().substr(0, 8);
 153           }
 154           $dataField.val(val).trigger('change', ['userInput']);
 155         }
 156       }
 157       $dataField.hide().addClass('crm-hidden-date').on('change.crmDatepicker', updateInputFields);
 158       updateInputFields();
 159     });
 160   };
 161 })(jQuery, CRM, CRM._);