ldx-widgets/dist/components/date_picker.js

widgets

(function() {
  var DatePicker, Input, React, ReactDatepicker, SelectInput, div, moment, ref, span;

  React = require('react');

  require('classlist-polyfill');

  ReactDatepicker = React.createFactory(require('react-datepicker'));

  Input = React.createFactory(require('./input_placeholder'));

  SelectInput = React.createFactory(require('./select_input_2'));

  moment = require('moment');

  ref = React.DOM, div = ref.div, span = ref.span;

  DatePicker = React.createClass({
    displayName: 'DatePicker',
    propTypes: {
      placeholderText: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
      dateFormat: React.PropTypes.string,
      className: React.PropTypes.string,
      minDate: React.PropTypes.object,
      maxDate: React.PropTypes.object,
      onChange: React.PropTypes.func.isRequired,
      tabIndex: React.PropTypes.number,
      selected: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.object])
    },
    getDefaultProps: function() {
      return {
        placeholderText: 'Select a date',
        dateFormat: 'MM/DD/YYYY',
        className: null,
        includeTime: false,
        returnDateString: null
      };
    },
    getInitialState: function() {
      var selected;
      selected = this.props.selected;
      return this.getDateState(selected);
    },
    getDateState: function(selected) {
      if (selected == null) {
        selected = moment();
      }
      return {
        selected: moment(selected.format('YYYYMMDD'), 'YYYYMMDD'),
        inputDate: '',
        hours: selected.format('h'),
        minutes: selected.format('mm'),
        ampm: selected.format('a')
      };
    },
    componentWillMount: function() {
      var hour, i, includeTime, j, minute;
      includeTime = this.props.includeTime;
      if (!includeTime) {
        return;
      }
      this.hoursOptions = [
        {
          label: '12',
          value: '12'
        }
      ];
      for (hour = i = 1; i <= 11; hour = ++i) {
        this.hoursOptions.push({
          label: hour,
          value: hour
        });
      }
      this.minuteOptions = [];
      for (minute = j = 0; j <= 59; minute = ++j) {
        if (minute < 10) {
          minute = "0" + minute;
        }
        this.minuteOptions.push({
          label: minute,
          value: minute
        });
      }
      return this.ampmOptions = [
        {
          label: 'am',
          value: 'am'
        }, {
          label: 'pm',
          value: 'pm'
        }
      ];
    },
    componentWillReceiveProps: function(nextProps) {
      var ref1, selected;
      selected = this.props.selected;
      if ((selected != null ? selected.format('YYYYMMDDhmma') : void 0) !== ((ref1 = nextProps.selected) != null ? ref1.format('YYYYMMDDhmma') : void 0)) {
        return this.setState(this.getDateState(nextProps.selected));
      }
    },
    render: function() {
      var ampm, className, dateFormat, hours, includeTime, inputDate, mainClass, maxDate, minDate, minutes, onChange, placeholderText, ref1, ref2, selected, tabIndex, value;
      ref1 = this.props, placeholderText = ref1.placeholderText, className = ref1.className, dateFormat = ref1.dateFormat, minDate = ref1.minDate, maxDate = ref1.maxDate, onChange = ref1.onChange, tabIndex = ref1.tabIndex, includeTime = ref1.includeTime;
      ref2 = this.state, selected = ref2.selected, inputDate = ref2.inputDate, hours = ref2.hours, minutes = ref2.minutes, ampm = ref2.ampm;
      if (selected) {
        switch (typeof selected) {
          case 'string':
            value = moment(selected).format(dateFormat);
            selected = moment(selected, dateFormat);
            break;
          case 'object':
            value = selected.format(dateFormat);
        }
      }
      mainClass = 'datepicker-wrapper';
      if (includeTime) {
        mainClass += ' include-time';
      }
      if (className != null) {
        mainClass += " " + className;
      }
      return div({
        className: mainClass
      }, [
        Input({
          key: 'input',
          ref: 'input',
          placeholder: placeholderText,
          value: inputDate || value,
          onChange: this.handleChange,
          onKeyDown: this.handleKeyDown,
          onBlur: this.handleBlur,
          onFocus: this.handleFocus,
          tabIndex: tabIndex
        }), ReactDatepicker({
          key: 'datepicker',
          ref: 'datepicker',
          selected: selected,
          onChange: this.handleDateChange,
          dateFormat: dateFormat,
          minDate: minDate,
          maxDate: maxDate
        }), includeTime ? div({
          key: 'time',
          className: 'time-wrapper'
        }, [
          SelectInput({
            key: 'hours',
            ref: 'hours',
            value: hours,
            className: 'time-sel',
            options: this.hoursOptions,
            onChange: this.handleChange
          }), span({
            key: 'colon',
            className: 'colon'
          }, ':'), SelectInput({
            key: 'minutes',
            ref: 'minutes',
            value: minutes,
            className: 'time-sel',
            options: this.minuteOptions,
            onChange: this.handleChange
          }), SelectInput({
            key: 'ampm',
            ref: 'ampm',
            value: ampm,
            className: 'time-sel ampm',
            options: this.ampmOptions,
            onChange: this.handleChange
          })
        ]) : void 0
      ]);
    },
    hideCalendar: function() {
      return this.refs.datepicker.setOpen(false);
    },
    handleFocus: function() {
      return this.refs.datepicker.handleFocus();
    },
    handleChange: function(cb, blur) {
      var includeTime, onChange, ref1, setData;
      ref1 = this.props, includeTime = ref1.includeTime, onChange = ref1.onChange;
      setData = {
        inputDate: this.refs.input.getValue()
      };
      if (includeTime) {
        setData.hours = this.refs.hours.getValue();
        setData.minutes = this.refs.minutes.getValue();
        setData.ampm = this.refs.ampm.getValue();
      }
      return this.setState(setData, function() {
        if (typeof cb === "function") {
          cb(null, blur);
        }
        return typeof onChange === "function" ? onChange() : void 0;
      });
    },
    handleBlur: function() {
      return this.handleChange(this.handleKeyDown, true);
    },
    handleKeyDown: function(e, blur) {
      var dateFormat, inputAdjusted, inputDate, maxDate, minDate, ref1, ref2, state, unixInputDate, value;
      value = this.refs.input.getValue();
      ref1 = this.props, minDate = ref1.minDate, maxDate = ref1.maxDate, dateFormat = ref1.dateFormat;
      inputDate = moment(value, dateFormat);
      unixInputDate = inputDate.unix();
      state = {};
      if (inputDate.isValid() && (((ref2 = e != null ? e.key : void 0) === 'Enter' || ref2 === 'Tab') || (e == null))) {
        if ((minDate != null) && unixInputDate <= minDate.unix()) {
          inputAdjusted = true;
          inputDate = minDate;
        }
        if ((maxDate != null) && unixInputDate >= maxDate.unix()) {
          inputAdjusted = true;
          inputDate = maxDate;
        }
        if (inputAdjusted) {
          state.inputDate = inputDate.format(dateFormat);
        }
        state.selected = inputDate;
        return this.setState(state, function() {
          var base;
          if (typeof (base = this.props).onChange === "function") {
            base.onChange();
          }
          if (!blur) {
            return this.hideCalendar();
          }
        });
      }
    },
    handleDateChange: function(date) {
      return this.setState({
        selected: date,
        inputDate: ''
      }, function() {
        var base;
        return typeof (base = this.props).onChange === "function" ? base.onChange() : void 0;
      });
    },
    getValue: function() {
      var ampm, dateString, hours, includeTime, minutes, ref1, ref2, returnDateString, selected;
      ref1 = this.props, returnDateString = ref1.returnDateString, includeTime = ref1.includeTime;
      selected = this.state.selected;
      if (includeTime) {
        ref2 = this.state, hours = ref2.hours, minutes = ref2.minutes, ampm = ref2.ampm;
        dateString = selected.format('YYYYMMDD');
        dateString += hours + ":" + minutes + ampm;
        selected = moment(dateString, 'YYYYMMDDh:mma');
      }
      if (returnDateString != null) {
        return selected.format(returnDateString);
      } else {
        return selected;
      }
    }
  });

  module.exports = DatePicker;

}).call(this);