crossxcell99/dtsel

Simple datetime selector using pure javascript

dtsel's Issues

How to start week from Monday?

Is it possible to start week from Monday, instead of Sunday?

Issue with end of Daylight Saving Time

Hello,

In the current version, all months of November have an issue in its first Monday. It repeats the same day as the day before (Sunday).

Date selector corrupt each october

Nice tool :-) ..but each october every year the date selector shows twice a day number in the last row of the grid. e.g. 29, 29, 30 .. or 30, 30, 31 ..

Daylight Saving Time Fix

dtsel/dtsel.js

Line 391 in 502cae8

var start = new Date(this.year, this.month, 1);

The problems reported each October/November with duplicate days are due to a known feature wit Date() and Daylight Saving Time (see https://learn.microsoft.com/en-us/troubleshoot/developer/browsers/core-features/error-dst-time-zones). The fix is to replace:
var start = new Date(this.year, this.month, 1);
with
var start = new Date(this.year, this.month, 1, 12);
This sets the time to midday rather than midnight so the change by one hour doesn't change the day.

Time picker issue

Hello

I have issue with timepicker. After I click once on the circle of the timepicker input, without time change, the timer does not close when I try to click outside the timer window

Thank you

Auto close option

Many date pickers have an autoclose feature that hides the picker once you have chosen a date. I couldn't work out how to do this properly but the following seems to work:

In function DTS defaultConfig add:
autoClose: false

In DTBox.prototype.onDateSelected add this at the end:
if (this.settings.config.autoClose){
var blur = new Event('blur');
this.elem.dispatchEvent(blur);
}

There is probably a better way. Cheers

Date Format options

I have tried using other Date Format strings such as M/D/yyyy, but can only get mm/dd/yyyy to work.
Are there other options for single-digit month and day?

Making it work with Internet Explorer.

Here is how to deal with Internet Explorer:

1 . SCRIPT5007: Object.getPrototypeOf: 'this' is not an Object

Instead of 'input[name="date_field"]' use DOM element selector:

instance = new dtsel.DTS(document.getElementById("date_field"),  { // or document.getElementsByName("date_field")[0]
    direction: 'BOTTOM',
    dateFormat: "yyyy-mm-dd",
    showTime: false,
    timeFormat: "HH:MM:SS"
});

2. SCRIPT1014: Invalid character.

It doens't accept the character "`" on the lines 275, 277 and 280 Alternatively, rewrite those lines as shown:

 self.el.wrapper.style.left = left + "px";
 if (box.top > minTopSpace && config.direction != "BOTTOM") {
    self.el.wrapper.style.bottom = bottom + "px";
    self.el.wrapper.style.top = "";
 } else {
    self.el.wrapper.style.top = top + "px";
     self.el.wrapper.style.bottom = ''; 
}

3. SCRIPT438: Object doesn't support property or method 'assign'

The following "polyfill" is needed: Polyfill for assign() method . More info here
(Just add the code before dtsel.js).

//////////////////////////////////////////
// Polyfill
//////////////////////////////////////////

if (typeof Object.assign != 'function') {
  Object.assign = function(target) {
    'use strict';
    if (target == null) {
      throw new TypeError('Cannot convert undefined or null to object');
    }

    target = Object(target);
    for (var index = 1; index < arguments.length; index++) {
      var source = arguments[index];
      if (source != null) {
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }
    }
    return target;
  };
}

4. Formatting problems:

To fix several fomatting bugs you must split the commands to add and remove CSS classes into multiple lines, because aparently IE only considers the first parameter. So, for example, instead of
cell.classList.remove(classes[0], classes[1], classes[2]);
you need to write:

cell.classList.remove(classes[0]);
cell.classList.remove(classes[1]);
cell.classList.remove(classes[2]);

or instead of
cell.classList.add("cal-nav", classes[i]);
you need to write

cell.classList.add("cal-nav");
cell.classList.add(classes[i]);

etc.