sched-datepicker.html

<link rel="import" href="../polymer/polymer.html">

<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">

<script src="../moment/min/moment.min.js"></script>

<link rel="import" href="sched-month-view.html">
<!--
`sched-datepicker`
yet another datepicker (a prototype for sched.site)

features:
  - today button 
  - min & max dates 
  - select from an array of available dates
  - multi date picker (select multiple days)
  - date range picker (select two dates: start & end)

note: 
  - multidate & rangedate can't be used together! 


### Styling

`<sched-datepicker>` provides the following custom properties for styling:

Custom property | Description | Default
----------------|-------------|----------
`--primary-bg-color` | Primary background color (buttons) | `--paper-red-500`
`--hover-bg-color` | Hover background color (buttons) | `--paper-grey-200`
`--hover-color` | Text color when hovering (buttons) | `white`
`--today-bg-color` | Background color of today (buttons) | `#eceff1`

@demo demo/index.html 
-->

<dom-module id="sched-datepicker">
  <template>
    <style is="custom-style">
      :host {
        display: block;
        width: 100%;
        --primary-bg-color: var(--paper-red-500);
        --hover-bg-color: var(--paper-grey-200);
        --hover-color: white;
        --today-bg-color: #eceff1;
      }

      paper-icon-button {
        border-radius: 999px;
      }
      paper-icon-button:hover {
        background-color: var(--hover-bg-color);
      }

      .flex-horizontal {
        @apply(--layout-horizontal);
        @apply(--layout-center);
      }
      .date-heading {
        @apply(--layout-flex);
        text-align: left;
        padding-left: 1em;
        font-size: 1.5em;
      }

      .selected-date {
        display: inline-block;
      }
    </style>


    <!-- header -->
    <div class="container flex-horizontal">
      
      <div class="date-heading">
        [[dateHeading]]
      </div>
      <div>
        <paper-icon-button disabled="[[prevMonthDisabled]]" icon="chevron-left" on-tap="_prevMonth"></paper-icon-button>
      </div>
      <div>
        <paper-icon-button hidden="[[todayHidden]]" icon="today" on-tap="_today" title="Today"></paper-icon-button>
      </div>
      <div>
        <paper-icon-button disabled="[[nextMonthDisabled]]" icon="chevron-right" on-tap="_nextMonth"></paper-icon-button>
      </div>
    </div>

    <sched-month-view date="{{date}}" m-date="{{mDate}}" date-format="{{dateFormat}}" m-date-trigger="{{mDateTrigger}}" is-selected="{{isSelected}}" min-date="{{minDate}}" max-date="{{maxDate}}" available-dates="{{availableDates}}" multidate="[[multidate]]" selected-dates="{{selectedDates}}" rangedate="[[rangedate]]", selected-range="{{selectedRange}}"></sched-month-view>

    <template is="dom-if" if="[[multidate]]">
      <template is="dom-repeat" items="[[selectedDates]]">
        <div class="selected-date">
          [[item]] <paper-icon-button icon="close" on-tap="_multidateRemove"></paper-icon-button>
        </div>
      </template>
    </template>
  </template>

  <script>
    Polymer({

      is: 'sched-datepicker',

      properties: {
        dateFormat: {
          type: String,
          value: 'YYYY-MM-DD'
        },
        headingSelectedFormat: {
          type: String,
          value: 'ddd, MMM D, YYYY'
        },
        headingNotSelectedFormat: {
          type: String,
          value: 'MMMM YYYY'
        },
        mDate: {
          type: Object,
          value: moment()
        },
        mDateTrigger: {
          type: Number,
          value: 0,
          observer: '_mDateTriggerObserver'
        },
        date: {
          type: String,
          notify: true,
          computed: '_computeDate(mDateTrigger)'
        },
        selectedDate: {
          type: String,
          notify: true
        },
        multidate: {
          type: Boolean,
          value: false
        },
        selectedDates: {
          type: Array,
          notify: true,
          value: []
        },
        rangedate: {
          type: Boolean,
          value: false
        },
        selectedRange: {
          type: Object,
          notify: true,
          value: {start: '', end: ''}
        },
        _nonCompatPropz: {
          type: String,
          computed: '_computeNonCompatPropz(multidate, rangedate)'
        },
        dateHeading: {
          type: String, 
          computed: '_computeDateHeading(mDateTrigger)'
        },
        todayHidden: {
          type: Boolean,
          computed: '_todayHidden(minDate, maxDate)'
        },
        prevMonthDisabled: {
          type: Boolean,
          computed: '_prevMonthDisabled(minDate, mDateTrigger)'
        },
        nextMonthDisabled: {
          type: Boolean,
          computed: '_nextMonthDisabled(maxDate, mDateTrigger)'
        },
        isSelected: {
          type: Boolean,
          notify: true,
          value: false
        },
        availableDates: {
          type: Array,
          observer: '_availableDatesObserver'
        },
        minDate: {
          type: String,
          value: '',
          observer: '_minDateObserver'
        },
        maxDate: {
          type: String,
          value: ''
        }
      },
      _computeDate: function(mDateTrigger){
        return this.mDate.format(this.dateFormat);
      },
      _computeDateHeading: function(mDateTrigger){
        if(this.isSelected){
          return this.mDate.format(this.headingSelectedFormat);
        }else{
          return this.mDate.format(this.headingNotSelectedFormat);
        }
      },
      _computeNonCompatPropz: function(_multidate, _rangedate){
        if(_multidate && _rangedate){
          console.log('non compatiable properties set! marking property rangedate false...');
          this.set('rangedate', false);
        }
      },
      _mDateTriggerObserver: function(_mDate){
        //console.log('_mDateTriggerObserver this.isSelected:',this.isSelected,' this.date:',this.date);
        if(this.isSelected){
          this.set('selectedDate', this.date);
        }else{
          this.set('selectedDate', undefined);
        }
      },

      _availableDatesObserver: function(_availableDates){
        //console.log('_availableDatesObserver');
        this.async(function(){
          var node = this.$$('sched-month-view');
          // if(node){}
          node.createMonthView();
        }, 50);
      },

      _minDateObserver: function(_minDate){
        if( _minDate 
            && _minDate != '' 
            && moment(_minDate, this.dateFormat) > moment() ){
          this.set('mDate', moment(_minDate, this.dateFormat));
          this.set('mDateTrigger', this.mDateTrigger + 1);
          this.async(function(){
            var node = this.$$('sched-month-view');
            // if(node){}
            node.createMonthView();
          }, 100);
        }
      },

      _today: function(e){
        this.set('isSelected', false);
        this.set('mDate', moment());
        this.set('mDateTrigger', this.mDateTrigger + 1);
        var node = this.$$('sched-month-view');
        node.createMonthView();
      },
      _todayHidden: function(){
        if(this.minDate && this.minDate != '' && moment() < moment(this.minDate, this.dateFormat)){
          return true;
        }
        if(this.maxDate && this.maxDate != '' && moment() > moment(this.maxDate, this.dateFormat)){
          return true;
        }
        return false;
      },

      _prevMonth: function(e){
        this.set('isSelected', false);
        var node = this.$$('sched-month-view');
        node.prevMonth();
        this.set('mDateTrigger', this.mDateTrigger + 1);
      },
      _prevMonthDisabled: function(_minDate){
        if(this.minDate && this.minDate != ''){
          //is the last day of the previous month < minDate? 
          return moment(this.mDate.format('YYYY-MM-01'), 'YYYY-MM-DD').subtract(1,'days') < moment(this.minDate, this.dateFormat);
        }else{
          return false;
        }
      },

      _nextMonth: function(e){
        this.set('isSelected', false);
        var node = this.$$('sched-month-view');
        node.nextMonth();
        this.set('mDateTrigger', this.mDateTrigger + 1);
      },
      _nextMonthDisabled: function(_maxDate){
        if(this.maxDate && this.maxDate != ''){
          return moment(this.mDate.format("YYYY-MM-") + this.mDate.clone().daysInMonth(), 'YYYY-MM-DD') > moment(this.maxDate, this.dateFormat);
        }else{
          return false;
        }
      }, 

      _multidateRemove: function(e){
        this.splice('selectedDates', this.selectedDates.indexOf(e.model.item), 1);
        //if the date is in the month view currently displayed, redraw to clear selection...
        if(this.mDate.format('YYYY-MM') == moment(e.model.item, this.dateFormat).format('YYYY-MM')){
          var node = this.$$('sched-month-view');
          node.createMonthView();
        }
        
      }

    });
  </script>
</dom-module>