Wijmo 5 InpuDate & Calendar

by Troy Taylor

HTML

<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
<div ng-app="app" ng-controller="appCtrl">
  <div>
    <label>Bound InputDate with min &amp; max</label>
    <wj-input-date
      control="date"
      value="today"
      min="{{ minDate | date:'yyyy-MM-dd' }}" 
      max="{{ maxDate | date:'yyyy-MM-dd' }}">
    </wj-input-date>
  </div>
  <div>
    <label>Bound Calendar with min &amp; max</label>
    <wj-calendar
      style="width:300px;"
      value="today"
      min="{{ minDate | date:'yyyy-MM-dd' }}"
      max="{{ maxDate | date:'yyyy-MM-dd' }}"
      format-item="formatItem(s,e)">
    </wj-calendar>
  </div>
  <p>
    <b>Selected Date: {{ today | date }}</b>
  </p>
  <p>
    <b>Valid Range: {{ minDate | date }} to {{ maxDate | date }}</b>
  </p>
</div>

CSS

.wj-calendar .date-holiday {
    /* holidays in calendar */
    color: #008f22;
    outline: 2px solid #008f22;
}
.wj-calendar .date-weekend:not(.wj-state-selected) {
    /* weekends in calendar */
    background-color: #d8ffa6;
}

JavaScript

// declare app module
var app = angular.module('app', ['wj']);

// app controller provides data
app.controller('appCtrl', function appCtrl($scope) {

    // apply special styles to weekends and holidays
    var today = new Date();
    $scope.today = today;
    $scope.minDate = new Date(today.getFullYear(), 0, 1);
    $scope.maxDate = new Date(today.getFullYear(), 11, 31);

    // apply special styles to weekends and holidays
    $scope.formatItem = function (s, e) {
        var weekday = e.data.getDay(),
            holiday = getHoliday(e.data);
        wijmo.toggleClass(e.item, 'date-weekend', weekday == 0 || weekday == 6);
        wijmo.toggleClass(e.item, 'date-holiday', holiday);
        e.item.title = holiday;
    }

    // gets the holiday for a given date
    function getHoliday(date) {
        var day = date.getDate(),
            month = date.getMonth() + 1;
        switch (month + '/' + day) { // simple holidays (fixed dates)
            case '1/1':   return 'New Year\'s Day';
            case '6/14':  return 'Flag Day';
            case '7/4':   return 'Independence Day';
            case '11/11': return 'Veteran\'s Day';
            case '12/25': return 'Christmas Day';
        }
        var weekDay = date.getDay(),
            weekNum = Math.floor((day - 1) / 7) + 1;
        switch (month + '/' + weekNum + '/' + weekDay) {
            case '1/3/1':  return 'Martin Luther King\'s Birthday'; // third Monday in January
            case '2/3/1':  return 'Washington\'s Birthday'; // third Monday in February
            case '5/3/6':  return 'Armed Forces Day'; // third Saturday in May
            case '9/1/1':  return 'Labor Day'; // first Monday in September
            case '10/2/1': return 'Columbus Day'; // second Monday in October
            case '11/4/4': return 'Thanksgiving Day'; // fourth Thursday in November
        }
        return ''; // no holiday today
    }
});