search

alumuko / vanilla-datetimerange-picker

A JavaScript component that is a date & time range picker, no need to build, no dependencies except Moment.js, that is based on Dan Grossman's bootstrap-daterangepicker.
MIT License
148 stars 17 forks source link

Consider Replacing Moment with Dayjs #1

Open toshsan opened 3 years ago

toshsan commented 3 years ago

Why Day.js? 2kB

Less JavaScript to download, parse and execute, leaving more time for your code. Day.js is a minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compatible API.

alumuko commented 3 years ago

Thanks for your suggestion.

shaunroselt commented 2 years ago

I'm 100% in favor of dropping Moment.js

Either using built-in vanilla JavaScript or something like Day.js

Moment.js is very heavyweight.

JackEllis commented 2 years ago

Hey folks,

For anyone looking to do this, I've just been doing it inside of Laravel Mix. I started with a find/replace for moment() and moment, but then had to bring in the following plugins to fix it.

dayjs = require('dayjs') var LocalizedFormat = require( 'dayjs/plugin/localizedFormat') var localeData = require('dayjs/plugin/localeData') var arraySupport = require("dayjs/plugin/arraySupport"); var isoWeek = require('dayjs/plugin/isoWeek') dayjs.extend(LocalizedFormat) dayjs.extend(localeData) dayjs.extend(arraySupport); dayjs.extend(isoWeek)

Really great that we have an option here.

Thanks for the great work, @alumuko!

kopax-polyconseil commented 1 year ago

I have tried to follow your recommandation and did as follow:

1\ Add in <head /> the following:

    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.8/dayjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.8/plugin/localizedFormat.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.8/plugin/localeData.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.8/plugin/arraySupport.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.8/plugin/isoWeek.js"></script>
    <script>
        dayjs.extend(window.dayjs_plugin_localizedFormat)
        dayjs.extend(window.dayjs_plugin_localeData)
        dayjs.extend(window.dayjs_plugin_arraySupport)
        dayjs.extend(window.dayjs_plugin_isoWeek)
    </script>

2\ Remove momentjs from <head /> 3\ Replace in vanilla-datetimerange-picker.js all occurence of moment with dayjs 4\ Perform tests

During test, it work not well to change month of the calendar, unless I revert this.startDate to use moment:

-  this.startDate = dayjs().startOf('day');
+  this.startDate = moment().startOf('day');

Obviously this is not what I want :)

@JackEllis it would have been nice to share the whole migration process instead of just the plugin installation ^^, this could have been a good contributing PR.

Thanks @alumuko for great work and sharing !