https://news.playtika.com/js/wd_wai_calendar_button.js

1/*
2*   This content is licensed according to the W3C Software License at
3*   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
4*
5*   File:   calendar-button.js
6*/
7
8var DatePicker = DatePicker || {};
9
10var CalendarButtonInput = function (inputNode, buttonNode, datepicker) {
11  this.inputNode    = inputNode;
12  this.buttonNode   = buttonNode;
13  this.imageNode    = false;
14
15  this.datepicker = datepicker;
16
17  this.defaultLabel = 'Choose Date';
18
19  this.keyCode = Object.freeze({
20    'ENTER': 13,
21    'SPACE': 32
22  });
23};
24
25CalendarButtonInput.prototype.init = function () {
26  this.buttonNode.addEventListener('click', this.handleClick.bind(this));
27  this.buttonNode.addEventListener('keydown', this.handleKeyDown.bind(this));
28  this.buttonNode.addEventListener('focus', this.handleFocus.bind(this));
29};
30
31CalendarButtonInput.prototype.handleKeyDown = function (event) {
32  var flag = false;
33
34  switch (event.keyCode) {
35
36    case this.keyCode.SPACE:
37    case this.keyCode.ENTER:
38      this.datepicker.show();
39      this.datepicker.setFocus();
40      flag = true;
41      break;
42
43    default:
44      break;
45  }
46
47  if (flag) {
48    event.stopPropagation();
49    event.preventDefault();
50  }
51};
52
53CalendarButtonInput.prototype.handleClick = function () {
54  if (!this.datepicker.isOpen()) {
55    this.datepicker.show();
56    this.datepicker.setFocusDay();
57  }
58  else {
59    this.datepicker.hide();
60  }
61
62  event.stopPropagation();
63  event.preventDefault();
64
65};
66
67CalendarButtonInput.prototype.setLabel = function (str) {
68  if (typeof str === 'string' && str.length) {
69    str = ', ' + str;
70  }
71  this.buttonNode.setAttribute('aria-label', this.defaultLabel + str);
72};
73
74CalendarButtonInput.prototype.setFocus = function () {
75  this.buttonNode.focus();
76};
77
78CalendarButtonInput.prototype.setDate = function (day) {
79  this.inputNode.value = day.getFullYear() + '-' + (((day.getMonth() + 1) < 10) ? "0" : "") + (day.getMonth() + 1) + "-" + ((day.getDate() < 10) ? "0" : "") + day.getDate();
80};
81
82CalendarButtonInput.prototype.getDate = function () {
83  return this.inputNode.value;
84};
85
86CalendarButtonInput.prototype.getDateLabel = function () {
87  var label = '';
88
89  var parts = this.inputNode.value.split('/');
90
91  if ((parts.length === 3) &&
92      Number.isInteger(parseInt(parts[0])) &&
93      Number.isInteger(parseInt(parts[1])) &&
94      Number.isInteger(parseInt(parts[2]))) {
95    var month = parseInt(parts[0]) - 1;
96    var day = parseInt(parts[1]);
97    var year = parseInt(parts[2]);
98
99    label = this.datepicker.getDateForButtonLabel(year, month, day);
100  }
101
102  return label;
103};
104
105CalendarButtonInput.prototype.handleFocus = function () {
106  var dateLabel = this.getDateLabel();
107
108  if (dateLabel) {
109    this.setLabel('selected date is ' + dateLabel);
110  }
111  else {
112    this.setLabel('');
113  }
114};
115
116// Initialize menu button date picker
117/*
118window.addEventListener('load' , function () {
119
120  var datePickers = document.querySelectorAll('.datepicker');
121
122  datePickers.forEach(function (dp) {
123    var inputNode   = dp.querySelector('input');
124    var buttonNode  = dp.querySelector('button');
125    var dialogNode  = dp.querySelector('[role=dialog]');
126
127    var datePicker = new DatePicker(inputNode, buttonNode, dialogNode);
128    datePicker.init();
129  });
130
131}); */
132
133