Source: components/sl-date-picker.js

  1. import Ember from 'ember';
  2. import TooltipEnabled from '../mixins/sl-tooltip-enabled';
  3. import layout from '../templates/components/sl-date-picker';
  5. /**
  6.  * @module
  7.  * @augments ember/Component
  8.  * @augments module:mixins/sl-tooltip-enabled
  9.  */
  10. export default Ember.Component.extend( TooltipEnabled, {
  12.     // -------------------------------------------------------------------------
  13.     // Dependencies
  15.     // -------------------------------------------------------------------------
  16.     // Attributes
  18.     /** @type {String[]} */
  19.     classNames: [
  20.         'form-group',
  21.         'sl-date-picker'
  22.     ],
  24.     /** @type {Object} */
  25.     layout,
  27.     // -------------------------------------------------------------------------
  28.     // Actions
  30.     // -------------------------------------------------------------------------
  31.     // Events
  33.     // -------------------------------------------------------------------------
  34.     // Properties
  36.     /**
  37.      * Whether or not to close the datepicker immediately when a date
  38.      * is selected
  39.      *
  40.      * @type {Boolean}
  41.      */
  42.     autoclose: true,
  44.     /**
  45.      * Whether or not to show week numbers to the left of week rows
  46.      *
  47.      * @type {Boolean}
  48.      */
  49.     calendarWeeks: false,
  51.     /**
  52.      * When true, displays a "Clear" button at the bottom of the datepicker
  53.      *
  54.      * If "autoclose" is also set to true, this button will also close
  55.      * the datepicker.
  56.      *
  57.      * @type {Boolean}
  58.      */
  59.     clearBtn: false,
  61.     /**
  62.      * Days of the week that should be disabled
  63.      *
  64.      * Values are 0 (Sunday) to 6 (Saturday). Multiple values should be
  65.      * comma-separated.
  66.      *
  67.      * @type {Array|String}
  68.      */
  69.     daysOfWeekDisabled: [],
  71.     /**
  72.      * When true, the input field is disabled and the datepicker will never display
  73.      *
  74.      * @type {Boolean}
  75.      */
  76.     disabled: false,
  78.     /**
  79.      * The latest date that may be selected; all later dates will be disabled
  80.      *
  81.      * @type {?Date|String}
  82.      */
  83.     endDate: null,
  85.     /**
  86.      * Whether or not to force parsing of the input value when the picker is
  87.      * closed
  88.      *
  89.      * When an invalid date is left in the input field by the user, the picker
  90.      * will forcibly parse that value, and set the input's value to the new,
  91.      * valid date, conforming to the given _format_.
  92.      *
  93.      * @type {Boolean}
  94.      */
  95.     forceParse: true,
  97.     /**
  98.      * The date format
  99.      *
  100.      * Combination of the following:
  101.      * - d, dd: Numeric date, no leading zero and leading zero, respectively
  102.      * - D, DD: Abbreviated and full weekday names, respectively
  103.      * - m, mm: Numeric month, no leading zero and leading zero, respectively
  104.      * - M, MM: Abbreviated and full month names, respectively
  105.      * - yy, yyyy: 2- and 4-digit years, respectively
  106.      *
  107.      * @type {String}
  108.      */
  109.     format: 'mm/dd/yyyy',
  111.     /**
  112.      * The help text below the datepicker
  113.      *
  114.      * @type {String}
  115.      */
  116.     helpText: null,
  118.     /**
  119.      * The input field's id attribute
  120.      *
  121.      * Used to expose this value externally for use in this component and when
  122.      * composing this component into others.
  123.      *
  124.      * @type {?String}
  125.      */
  126.     inputElementId: null,
  128.     /**
  129.      * A list of inputs to be used in a range picker
  130.      *
  131.      * The inputs will be attached to the selected element. Allows for
  132.      * explicitly creating a range picker on a non-standard element.
  133.      *
  134.      * @type {?Array}
  135.      */
  136.     inputs: null,
  138.     /**
  139.      * Whether or not to allow date navigation by arrow keys
  140.      *
  141.      * @type {Boolean}
  142.      */
  143.     keyboardNavigation: true,
  145.     /**
  146.      * The label text above the datepicker's input field
  147.      *
  148.      * @type {String}
  149.      */
  150.     label: null,
  152.     /**
  153.      * The IETF code of the language to use for month and day names
  154.      *
  155.      * @type {String}
  156.      */
  157.     language: 'en',
  159.     /**
  160.      * Set a limit for the view mode; accepts "days", "months", or "years"
  161.      *
  162.      * @type {String}
  163.      */
  164.     minViewMode: 'days',
  166.     /**
  167.      * Enable multidate picking
  168.      *
  169.      * Each date in month view acts as a toggle button, keeping track of which
  170.      * dates the user has selected in order. If a number is given, the picker
  171.      * will limit how many dates can be selected to that number, dropping the
  172.      * oldest dates from the list when the number is exceeded. true equates to
  173.      * no limit. The input’s value (if present) is set to a string generated by
  174.      * joining the dates, formatted, with multidateSeparator.
  175.      *
  176.      * @type {Boolean|Number}
  177.      */
  178.     multidate: false,
  180.     /**
  181.      * A space-separated string for the popup's anchor position
  182.      *
  183.      * Consists of one or two of "left" or "right", "top" or "bottom",
  184.      * and "auto" (may be omitted).
  185.      *
  186.      * @type {String}
  187.      */
  188.     orientation: 'auto',
  190.     /**
  191.      * The placeholder text that the datepicker should show
  192.      *
  193.      * @type {?String}
  194.      */
  195.     placeholder: null,
  197.     /**
  198.      * The earliest date that may be selected; all earlier dates will
  199.      * be disabled
  200.      *
  201.      * @type {?Date|String}
  202.      */
  203.     startDate: null,
  205.     /**
  206.      * The view that the datepicker should show when it is opened; accepts
  207.      * "month", "year", or "decade"
  208.      *
  209.      * @type {String}
  210.      */
  211.     startView: 'month',
  213.     /**
  214.      * When true or "linked", displays a "Today" button at the bottom of the
  215.      * datepicker to select the current date
  216.      *
  217.      * If true, the "Today" button will only move the current date into view.
  218.      * If "linked", the current date will also be selected.
  219.      *
  220.      * @type {Boolean|String}
  221.      */
  222.     todayBtn: false,
  224.     /**
  225.      * Whether to highlight the current date or not
  226.      *
  227.      * @type {Boolean}
  228.      */
  229.     todayHighlight: false,
  231.     /**
  232.      * The date either selected by the datepicker or entered by the user
  233.      *
  234.      * @type {?String}
  235.      */
  236.     value: null,
  238.     /**
  239.      * Day of the week to start on; 0 (Sunday) to 6 (Saturday)
  240.      *
  241.      * @type {Number}
  242.      */
  243.     weekStart: 0,
  245.     // -------------------------------------------------------------------------
  246.     // Observers
  248.     /**
  249.      * Captures and sets the input field's id attribute.
  250.      *
  251.      * This is used to expose this value externally for use when composing this
  252.      * component into others.
  253.      *
  254.      * @function
  255.      * @returns {undefined}
  256.      */
  257.     setInputElementId: Ember.on(
  258.         'didInsertElement',
  259.         function() {
  260.             this.set(
  261.                 'inputElementId',
  262.                 this.$( 'input.date-picker' ).prop( 'id' )
  263.             );
  264.         }
  265.     ),
  267.     /**
  268.      * Setup the bootstrap-datepicker plugin and events
  269.      *
  270.      * @function
  271.      * @returns {undefined}
  272.      */
  273.     setupDatepicker: Ember.on(
  274.         'didInsertElement',
  275.         function() {
  276.             const datepicker = this.$( 'input.date-picker' )
  277.                 .datepicker( this.get( 'options' ) );
  279.             datepicker.on( 'changeDate', () => {
  280.                 this.sendAction();
  281.             });
  282.         }
  283.     ),
  285.     /**
  286.      * Remove events
  287.      *
  288.      * @function
  289.      * @returns {undefined}
  290.      */
  291.     unregisterEvents: Ember.on(
  292.         'willClearRender',
  293.         function() {
  294.             this.$( 'input.date-picker' ).off();
  295.         }
  296.     ),
  298.     /**
  299.      * Dynamically update the startDate and endDate values for the datepicker
  300.      *
  301.      * @function
  302.      * @returns {undefined}
  303.      */
  304.     updateDateRange: Ember.observer(
  305.         'endDate',
  306.         'startDate',
  307.         function() {
  308.             const input = this.$( 'input.date-picker' );
  309.             const datepicker = input.data( 'datepicker' );
  311.             datepicker.setStartDate( this.get( 'startDate' ) );
  312.             datepicker.setEndDate( this.get( 'endDate' ) );
  314.             if ( 'Invalid Date' === datepicker.getDate().toString() ) {
  315.                 input.datepicker().val( '' );
  316.                 input.attr( 'placeholder', this.get( 'placeholder' ) );
  317.             }
  318.         }
  319.     ),
  321.     // -------------------------------------------------------------------------
  322.     // Methods
  324.     /**
  325.      * Datepicker plugin options
  326.      *
  327.      * @function
  328.      * @returns {Object}
  329.      */
  330.     options: Ember.computed(
  331.         function() {
  332.             return {
  333.                 autoclose: this.get( 'autoclose' ),
  334.                 calendarWeeks: this.get( 'calendarWeeks' ),
  335.                 clearBtn: this.get( 'clearBtn' ),
  336.                 daysOfWeekDisabled: this.get( 'daysOfWeekDisabled' ),
  337.                 endDate: this.get( 'endDate' ),
  338.                 forceParse: this.get( 'forceParse' ),
  339.                 format: this.get( 'format' ),
  340.                 inputs: this.get( 'inputs' ),
  341.                 keyboardNavigation: this.get( 'keyboardNavigation' ),
  342.                 language: this.get( 'language' ),
  343.                 multidate: this.get( 'multidate' ),
  344.                 orientation: this.get( 'orientation' ),
  345.                 startDate: this.get( 'startDate' ),
  346.                 startView: this.get( 'startView' ),
  347.                 todayBtn: this.get( 'todayBtn' ),
  348.                 todayHighlight: this.get( 'todayHighlight' ),
  349.                 weekStart: this.get( 'weekStart' )
  350.             };
  351.         }
  352.     )
  354. });