Day of Year mode and Milliseconds

[umer936]

Currently we use https://trentrichardson.com/examples/timepicker/#tp-examples . However, it is unmaintained and relies on jquery and jquery-ui, both of which I would like to drop.

In searching, I have been unable to find datetimepickers that support doy and/or millisecond support.

1. Day of Year
   trent richardson's timepicker supports doy through the flag 'DDD', like https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table , which this follows. trent richardson's parses the timestamp in and out of DOY when clicking the day in the selector. Optimal behavior would be an option that allows the selector to switch to a DOY view mode showing the doy number in the day boxes, but having it like this image is sufficient.
   

2. Millisecond support
   our various sensors can have pretty fine-grained data fidelity, so millisecond support is necessary for us (smaller would be even better). This same issue is holding back phpmyadmin Timepicker (jQuery-UI) phpmyadmin/phpmyadmin#17604 as well. This is also defined by the format 'HH:mm:ss.S+' from the unicode standard.

Thank you for the work on the project! 😃 It looks really nice.
I'd love to be able to use it. Based on what y'all think is best, I can definitely work on these (looks like datetimePicker.js is where to add? unless y'all would want it separated out).

[umer936]

I've also opened similar issues/discussions here: easepick/easepick#182 and here: Eonasdan/tempus-dominus#2588

[umer936]

Looking into this more, the Custom Buttons seems like a great way to handle the DMY <--> DOY toggle

[umer936]

I was able to add a DOY mode by adding this in the buttons object:

        {
          content(dp) {
            return dp.opts.doyOn ? 'YMD' : 'DOY';
          },
          onClick(dp) {
            dp.opts.doyOn = !dp.opts.doyOn;
            if (dp.opts.doyOn) {
              var cells = dp.update({
                onRenderCell({ date, cellType }) {
                  var dayOfYear = getDayOfYear(date);
                  return {
                    html: dayOfYear
                  };
                }
              });
            } else {
              var cells = dp.update({
                onRenderCell({ date, cellType }) {
                  var currDay = date.getDate();
                  return {
                    html: currDay
                  };
                }
              });
            }
          }
        }

I have this defined elsewhere:

function getDayOfYear(date) {
  if (!(date instanceof Date)) {
    date = new Date(date);
  }
  var startOfYear = new Date(date.getFullYear(), 0, 0);
  var diff = date - startOfYear;
  var oneDay = 1000 * 60 * 60 * 24;
  return Math.floor(diff / oneDay);
}

https://codepen.io/umer936-the-looper/pen/VwEjXRm

[t1m0n]

@umer936 it is better to use 'onRender' option once and inside of it check for condition to decide what to render. As for milliseconds, there is no proper way to control them now ( I don't now if I will ever add such feature, should think of it.