Fix typos

CHANGELOG.md

@@ -4,7 +4,7 @@
 
 ### Changes
 
-- Chnage `datepicer.show()` to move the focus to the input field if it's not focused
+- Change `datepicker.show()` to move the focus to the input field if it's not focused
   - Fix #52 — picker shown by calling show() doesn't hide by clicking outside
 
 ## 1.1.3

README.md

@@ -37,7 +37,7 @@ If you want to use the **Tailwind Date Range Picker** you have to import the `Da
 import DateRangePicker from 'flowbite-datepicker/DateRangePicker';
 ```
 
-Then in the same fashion you can initalize a date range picker component by using the `DateRangePicker` constructor:
+Then in the same fashion you can initialize a date range picker component by using the `DateRangePicker` constructor:
 
 ```javascript
 const dateRangePickerEl = document.getElementById('dateRangePickerId');

demo/index.html

@@ -554,15 +554,15 @@ <h4 class="subtitle">Text direction</h4>
     <script src="../dist/js/datepicker-full.js"></script>
     <script src="./live-demo.js"></script>
     <script>
-      /*global initialize onChangeType onChnageDirection onChangeInputOption onChangeInputOption onChangeTextareaOption onClickCheckboxOptions switchPicker */
+      /*global initialize onChangeType onChangeDirection onChangeInputOption onChangeInputOption onChangeTextareaOption onClickCheckboxOptions switchPicker */
       initialize();
 
       document.getElementById('types').querySelectorAll('input').forEach((el) => {
         el.addEventListener('change', onChangeType);
       });
 
       document.getElementById('direction').querySelectorAll('input').forEach((el) => {
-        el.addEventListener('change', onChnageDirection);
+        el.addEventListener('change', onChangeDirection);
       });
 
       const optsForm = document.getElementById('options');

demo/live-demo.js

@@ -386,7 +386,7 @@ function onChangeType(ev) {
   refreshOptionForm();
 }
 
-function onChnageDirection(ev) {
+function onChangeDirection(ev) {
   const defaultDir = window.getComputedStyle(document.body).direction;
   const dir = ev.target.value;
   const mainElem = document.querySelector('main');

docs/api.md

@@ -64,7 +64,7 @@ DOM object of picker element
 - Type: `DateRangePicker`
 
 DateRangePicker instance that the datepicker belongs to  
-Only avalable when the datepicker is a part of date range picker  
+Only available when the datepicker is a part of date range picker  
 (Read-only)
 
 

docs/options.md

@@ -169,7 +169,7 @@ Alternatively, object that contains custom parser and formatter functions can be
     - `format`: {`Object`} - format object itself
     - `locale`: {`Object`} - locale of the current language
   - Return:
-    - {`String`} - formated date
+    - {`String`} - formatted date
 
 ```javascript
 {

extras/twoDigitToFullYear/test/twoDigitToFullYear.js

@@ -23,7 +23,7 @@ describe('twoDigitToFullYear()', function () {
     clock.restore();
   });
 
-  it('uses sepecified future year range if it is given', function () {
+  it('uses specified future year range if it is given', function () {
     let clock = sinon.useFakeTimers({now: new Date().setFullYear(2020)});
 
     expect(twoDigitToFullYear(40, 20), 'to be', 2040);

js/DateRangePicker.js

@@ -96,7 +96,7 @@ export default class DateRangePicker  {
     setupDatepicker(this, changeDateListener, this.inputs[0], cleanOptions);
     setupDatepicker(this, changeDateListener, this.inputs[1], cleanOptions);
     Object.freeze(datepickers);
-    // normalize the range if inital dates are given
+    // normalize the range if initial dates are given
     if (datepickers[0].dates.length > 0) {
       onChangeDate(this, {target: this.inputs[0]});
     } else if (datepickers[1].dates.length > 0) {

js/Datepicker.js

@@ -170,7 +170,7 @@ export default class Datepicker {
       }
       // attach itaelf to the rangepicker here so that processInputDates() can
       // determine if this is the range-end picker of the rangepicker while
-      // setting inital values when pickLevel > 0
+      // setting initial values when pickLevel > 0
       datepickers[index] = this;
       // add getter for rangepicker
       Object.defineProperty(this, 'rangepicker', {
@@ -258,7 +258,7 @@ export default class Datepicker {
   }
 
   /**
-   * @type {Boolean} - Whether the picker element is shown. `true` whne shown
+   * @type {Boolean} - Whether the picker element is shown. `true` when shown
    */
   get active() {
     return !!(this.picker && this.picker.active);
@@ -385,7 +385,7 @@ export default class Datepicker {
    * objects, time values or mix of those for new selection
    * @param {Object} [options] - function options
    * - clear: {boolean} - Whether to clear the existing selection
-   *     defualt: false
+   *     default: false
    * - render: {boolean} - Whether to re-render the picker element
    *     default: true
    * - autohide: {boolean} - Whether to hide the picker element after re-render

js/events/inputFieldListeners.js

@@ -8,7 +8,7 @@ import {goToPrevOrNext, switchView, unfocus} from './functions.js';
 //   - args: time value, amount
 // increase: amount to pass to addFn
 // testFn: function to test the unavailablity of the date
-//   - args: time value; retun: true if unavailable
+//   - args: time value; return: true if unavailable
 function findNextAvailableOne(date, addFn, increase, testFn, min, max) {
   if (!isInRange(date, min, max)) {
     return;

js/lib/date-format.js

@@ -7,7 +7,7 @@ export const reFormatTokens = /dd?|DD?|mm?|MM?|yy?(?:yy)?/;
 export const reNonDateParts = /[\s!-/:-@[-`{-~年月日]+/;
 // cache for persed formats
 let knownFormats = {};
-// parse funtions for date parts
+// parse functions for date parts
 const parseFns = {
   y(date, year) {
     return new Date(date).setFullYear(parseInt(year, 10));
@@ -97,7 +97,7 @@ function parseFormatString(format) {
     return knownFormats[format];
   }
 
-  // sprit the format string into parts and seprators
+  // sprit the format string into parts and separators
   const separators = format.split(reFormatTokens);
   const parts = format.match(new RegExp(reFormatTokens, 'g'));
   if (separators.length === 0 || !parts) {
@@ -131,12 +131,12 @@ function parseFormatString(format) {
         return dtParts;
       }, {});
 
-      // iterate over partParserkeys so that the parsing is made in the oder
+      // iterate over partParserkeys so that the parsing is made in the order
       // of year, month and day to prevent the day parser from correcting last
       // day of month wrongly
       return partParserKeys.reduce((origDate, key) => {
         const newDate = parseFns[key](origDate, dateParts[key], locale);
-        // ingnore the part failed to parse
+        // ignore the part failed to parse
         return isNaN(newDate) ? origDate : newDate;
       }, today());
     },

js/lib/dom.js

@@ -5,7 +5,7 @@ export function parseHTML(html) {
   return range.createContextualFragment(html);
 }
 
-// equivalent to jQuery's :visble
+// equivalent to jQuery's :visible
 export function isVisible(el) {
   return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
 }
@@ -26,7 +26,7 @@ export function showElement(el) {
     return;
   }
   if (el.dataset.styleDisplay) {
-    // restore backed-up dispay property
+    // restore backed-up display property
     el.style.display = el.dataset.styleDisplay;
     delete el.dataset.styleDisplay;
   } else {

js/options/processOptions.js

@@ -56,7 +56,7 @@ export default function processOptions(options, datepicker) {
       if (locales[inOpts.language]) {
         lang = inOpts.language;
       } else {
-        // Check if langauge + region tag can fallback to the one without
+        // Check if language + region tag can fallback to the one without
         // region (e.g. fr-CA → fr)
         lang = inOpts.language.split('-')[0];
         if (locales[lang] === undefined) {

js/picker/Picker.js

@@ -67,7 +67,7 @@ function processPickerOptions(picker, options) {
 
 // Compute view date to reset, which will be...
 // - the last item of the selected dates or defaultViewDate if no selection
-// - limitted to minDate or maxDate if it exceeds the range
+// - limited to minDate or maxDate if it exceeds the range
 function computeResetViewDate(datepicker) {
   const {dates, config} = datepicker;
   const viewDate = dates.length > 0 ? lastItemOf(dates) : config.defaultViewDate;

test/DateRangePicker/DateRangePicker.js

@@ -61,7 +61,7 @@ describe('DateRangePicker', function () {
     drp.destroy();
   });
 
-  it('indicates the range with hilighting the start/end in the pickers', function () {
+  it('indicates the range with highlighting the start/end in the pickers', function () {
     input0.value = '04/20/2020';
     input1.value = '04/22/2020';
 

test/DateRangePicker/api-methods.js

@@ -38,7 +38,7 @@ describe('DateRangePicker - API methods', function () {
       input1.value = '';
     });
 
-    it('returns a formatted date stirngs of selected dates if the format is specified', function () {
+    it('returns a formatted date strings of selected dates if the format is specified', function () {
       input0.value = '04/20/2020';
       input1.value = '04/22/2020';
 

test/DateRangePicker/date-selection.js

@@ -220,7 +220,7 @@ describe('DateRangePicker - date selection', function () {
     drp.destroy();
   });
 
-  it('dates are swapped if a date later than the 2nd picker\'s selection is seleted on the 1st picker', function () {
+  it('dates are swapped if a date later than the 2nd picker\'s selection is selected on the 1st picker', function () {
     input0.value = '02/11/2020';
     input1.value = '02/11/2020';
 
@@ -251,7 +251,7 @@ describe('DateRangePicker - date selection', function () {
     input1.value = '';
   });
 
-  it('dates are swapped if a date earlier than the 1st picker\'s selection is seleted on the 2nd picker', function () {
+  it('dates are swapped if a date earlier than the 1st picker\'s selection is selected on the 2nd picker', function () {
     input0.value = '02/11/2020';
     input1.value = '02/11/2020';
 
@@ -386,7 +386,7 @@ describe('DateRangePicker - date selection', function () {
       input1.value = '';
     });
 
-    it('dates are swapped if a date later than the 2nd picker\'s selection is seleted on the 1st picker', function () {
+    it('dates are swapped if a date later than the 2nd picker\'s selection is selected on the 1st picker', function () {
       ({drp, picker0, picker1} = createDRP(elem));
       [viewSwitch0, nextBtn0] = getParts(picker0, ['.view-switch', '.next-btn']);
       viewSwitch1 = picker1.querySelector('.view-switch');
@@ -426,7 +426,7 @@ describe('DateRangePicker - date selection', function () {
       input1.value = '';
     });
 
-    it('dates are swapped if a date earlier than the 1st picker\'s selection is seleted on the 2nd picker', function () {
+    it('dates are swapped if a date earlier than the 1st picker\'s selection is selected on the 2nd picker', function () {
       let prevBtn1;
 
       ({drp, picker0, picker1} = createDRP(elem));

test/Datepicker/Datepicker-object.js

@@ -120,7 +120,7 @@ describe('Datepicker', function () {
   });
 
   describe('picker', function () {
-    it('displays current month with current date as focued date if no initial date is provided', function () {
+    it('displays current month with current date as focused date if no initial date is provided', function () {
       let clock = sinon.useFakeTimers({now: new Date(2020, 1, 14)});
 
       const {dp, picker} = createDP(input);
@@ -158,7 +158,7 @@ describe('Datepicker', function () {
       clock.restore();
     });
 
-    it('displays iniial date\'s month with the date as selected and focued date', function () {
+    it('displays iniial date\'s month with the date as selected and focused date', function () {
       input.value = '04/22/2020';
 
       const {dp, picker} = createDP(input);

test/Datepicker/api-methods.js

@@ -28,7 +28,7 @@ describe('Datepicker - API methods', function () {
       expect(date.getTime(), 'to be', dateValue(2020, 3, 22));
     });
 
-    it('returns a formatted date stirng of selected date if the format is specified', function () {
+    it('returns a formatted date string of selected date if the format is specified', function () {
       expect(dp.getDate('yyyy-mm-dd'), 'to be', '2020-04-22');
     });
 
@@ -44,8 +44,8 @@ describe('Datepicker - API methods', function () {
 
   describe('setDate()', function () {
     it('changes the selected date to given date', function () {
-      const spyChnageEvent = sinon.spy();
-      input.addEventListener('change', spyChnageEvent);
+      const spyChangeEvent = sinon.spy();
+      input.addEventListener('change', spyChangeEvent);
 
       const viewSwitdh = getViewSwitch(picker);
       const date = new Date(2019, 11, 23);
@@ -73,8 +73,8 @@ describe('Datepicker - API methods', function () {
 
       // change by api call should not be a trigger of change event
       // (issue #24)
-      expect(spyChnageEvent.called, 'to be false');
-      input.removeEventListener('change', spyChnageEvent);
+      expect(spyChangeEvent.called, 'to be false');
+      input.removeEventListener('change', spyChangeEvent);
 
       // change the view to the selected daye's days view
       // (issue #33)
@@ -111,8 +111,8 @@ describe('Datepicker - API methods', function () {
     });
 
     it('clears the selection if no dates + clear: true option are given', function () {
-      const spyChnageEvent = sinon.spy();
-      input.addEventListener('change', spyChnageEvent);
+      const spyChangeEvent = sinon.spy();
+      input.addEventListener('change', spyChangeEvent);
 
       const viewSwitdh = getViewSwitch(picker);
       const today = dateUtils.today();
@@ -131,8 +131,8 @@ describe('Datepicker - API methods', function () {
 
       // change by api call should not be a trigger of change event
       // (issue #24)
-      expect(spyChnageEvent.called, 'to be false');
-      input.removeEventListener('change', spyChnageEvent);
+      expect(spyChangeEvent.called, 'to be false');
+      input.removeEventListener('change', spyChangeEvent);
     });
 
     it('omits updating the picker UI if render option = false', function () {
@@ -201,7 +201,7 @@ describe('Datepicker - API methods', function () {
       expect(cells[19].textContent, 'to be', '14');
     });
 
-    it('notmalizes iput text\'s format', function () {
+    it('notmalizes input text\'s format', function () {
       const date = new Date(2020, 6, 4);
       input.value = '7 4 2020';
 
@@ -215,8 +215,8 @@ describe('Datepicker - API methods', function () {
 
   describe('refresh()', function () {
     it('refreshes the input element and picker UI to refrect the internal data', function () {
-      const spyChnageEvent = sinon.spy();
-      input.addEventListener('change', spyChnageEvent);
+      const spyChangeEvent = sinon.spy();
+      input.addEventListener('change', spyChangeEvent);
 
       dp.dates = [dateValue(2020, 1, 14)];
       dp.refresh();
@@ -231,8 +231,8 @@ describe('Datepicker - API methods', function () {
 
       // change by api call should not be a trigger of change event
       // (issue #24)
-      expect(spyChnageEvent.called, 'to be false');
-      input.removeEventListener('change', spyChnageEvent);
+      expect(spyChangeEvent.called, 'to be false');
+      input.removeEventListener('change', spyChangeEvent);
     });
 
     it('also changes the view back to the selected date\'s days view', function () {

test/_utils/dom.js

@@ -7,7 +7,7 @@ var domUtils = (function (exports) {
     return range.createContextualFragment(html);
   }
 
-  // equivalent to jQuery's :visble
+  // equivalent to jQuery's :visible
   function isVisible(el) {
     return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
   }
@@ -28,7 +28,7 @@ var domUtils = (function (exports) {
       return;
     }
     if (el.dataset.styleDisplay) {
-      // restore backed-up dispay property
+      // restore backed-up display property
       el.style.display = el.dataset.styleDisplay;
       delete el.dataset.styleDisplay;
     } else {

test/events.js

@@ -254,7 +254,7 @@ describe('events', function () {
       expect(spyChangeMonth.calledTwice, 'to be true');
     });
 
-    it('is triggered when a different month is seleced on months view', function () {
+    it('is triggered when a different month is selected on months view', function () {
       viewSwitch.click();
 
       getCells(picker)[1].click();
@@ -450,7 +450,7 @@ describe('events', function () {
       expect(spyChangeYear.calledTwice, 'to be true');
     });
 
-    it('is triggered when a different year/decade is seleced on years/decades view', function () {
+    it('is triggered when a different year/decade is selected on years/decades view', function () {
       viewSwitch.click();
       viewSwitch.click();
       viewSwitch.click();

test/mouse-operation.js

@@ -88,9 +88,9 @@ describe('mouse operation', function () {
     testContainer.removeChild(outsider);
   });
 
-  it('picker shows up if input field is clicked wheh picker is hidden', function () {
+  it('picker shows up if input field is clicked when picker is hidden', function () {
     const {dp, picker} = createDP(input);
-    // when input field is not focued
+    // when input field is not focused
     simulant.fire(input, 'mousedown');
     input.click();
     expect(isVisible(picker), 'to be true');
@@ -177,7 +177,7 @@ describe('mouse operation', function () {
   });
 
   describe('prev-btn', function () {
-    it('changes the month/year/decade/century of the view to the previouse one', function () {
+    it('changes the month/year/decade/century of the view to the previous one', function () {
       input.value = '04/22/2020';
 
       const {dp, picker} = createDP(input);