Back to Datepicker-guidelines

JavaScriptThe latest version of this package is: 0.17.3, Opens in new window

JavaScript support functions for the Datepicker Component

This component is compatible with ESM (ES6 module) and IIFE. See documentation examples below.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-js/datepicker@0.17.3

This library has support functions only, and should be used accompanied with a framework or webcomponent.

Table of Contents

Usage

NOTE! This is not a full implementation to create a vanilla js datepicker, since the usage of datepickers are either from a framework or a webcomponent.

By script-tag
<script src="datepicker-webcomponent.iife.js"></script>
As an ES6 module
import * as datepicker from '@if-design-system/datepicker-js';

Api

datepicker.calendar.isLeapYear(year)

Returns true or false depending if the given year is a leap year or not.

Param Type Description
year Number The year to check

Returns:

Boolean

datepicker.calendar.getMonthDays(month, year)

Returns the current number of days for given month in given year.

Param Type Description
month Number The month to get days from
year Number The year to get days from

Returns:

Number

datepicker.calendar.generateDayArray(date, dayArray, adjacentMonthDaysArray)

Generates date arrays for the given date object's month.

One array for the current month, and an array for the days in the adjacent months.

Param Type Description
date Date The date objec to use
dayArray Array Current month's days
adjacentMonthDaysArray Array Adjacent month's days

datepicker.calendar.getDayNames(locale = 'en', format = 'short')

Returns the names of a week for the given locale and format. Default value for locale is en, and default format is short.

The locale is always in a IETF BCP 47 language tag format.

Param Type Description Defaults
locale String The locale to use en
format String Current month's days short

Returns:

Array, for example:

['man.', 'tir.', 'ons.', 'tor.', 'fre.', 'lør.', 'søn.'];

datepicker.calendar.getMonthNames(locale = 'en', format = 'long')

Returns the names of the months for the given locale and format. Default value for locale is en, and default format is long.

The locale is always in a IETF BCP 47 language tag format.

Param Type Description Defaults
locale String The locale to use en
format String Current month's days long

Returns:

Array, for example:

[
  'januar',
  'februar',
  'mars',
  'april',
  'mai',
  'juni',
  'juli',
  'august',
  'september',
  'oktober',
  'november',
  'desember',
];

datepicker.calendar.getDaysOfPreviousMonth(month, year)

Returns the current number of days in the previous month for given month in given year.

Param Type Description
month Number The month to get days from
year Number The year to get days from

Returns:

Number

datepicker.calendar.isWeekend(year, month, day)

Returns true or false depending if the given date is a weekend or not.

Param Type Description
year Number The year to check
month Number The month to check
day Number The day to check

Returns:

Boolean

datepicker.date.create(str)

Returns a date object if str is a valid date string.

Param Type Description
str String The date string to create a date object from

Returns:

Date

Throws:

When given str is not a valid date string.

Error('Invalid Date');

datepicker.date.isValid(day, month, year)

Returns true or false depending if the given date is a valid date.

Param Type Description
day Number The day to check
month Number The month to check
year Number The year to check

Returns:

Boolean

datepicker.date.getNewDateObject(year, month, day)

Returns a new date object based on the given date.

Param Type Description
year Number The year to check
month Number The month to check
day Number The day to check

Returns:

Date

datepicker.formats.list

A JavaScript Object containing the current date formats for our supported locales.

export const list = {
  no: {
    format: 'DD.MM.YYYY',
    example: '10.11.1983',
    regex: '(\\d{1,2})[.](\\d{1,2})[.](\\d{4})',
  },
  sv: {
    format: 'YYYY-MM-DD',
    example: '1983-11-10',
    regex: '(\\d{4})[-](\\d{1,2})[-](\\d{1,2})',
  },
  da: {
    format: 'DD.MM.YYYY',
    example: '10.11.1983',
    regex: '(\\d{1,2})[.](\\d{1,2})[.](\\d{4})',
  },
  fi: {
    format: 'DD.MM.YYYY',
    example: '10.11.1983',
    regex: '(\\d{1,2})[.](\\d{1,2})[.](\\d{4})',
  },
  et: {
    format: 'DD.MM.YYYY',
    example: '10.11.1983',
    regex: '(\\d{1,2})[.](\\d{1,2})[.](\\d{4})',
  },
  lv: {
    format: 'YYYY.MM.DD.',
    example: '1983.11.10.',
    regex: '(\\d{4})[.](\\d{1,2})[.](\\d{1,2})[.]',
  },
  lt: {
    format: 'YYYY-MM-DD',
    example: '1983-11-10',
    regex: '(\\d{4})[-](\\d{1,2})[-](\\d{1,2})',
  },
  ru: {
    format: 'DD.MM.YYYY',
    example: '10.11.1983',
    regex: '(\\d{1,2})[.](\\d{1,2})[.](\\d{4})',
  },
  kl: {
    format: 'YYYY-MM-DD',
    example: '1983-11-10',
    regex: '(\\d{4})[-](\\d{1,2})[-](\\d{1,2})',
  },
  en: {
    format: 'DD/MM/YYYY',
    example: '10/11/1983',
    regex: '(\\d{1,2})[/](\\d{1,2})[/](\\d{4})',
  },
};

datepicker.formats.getFormatByLocale(locale)

Returns the format by given locale. If no match is found, no is used as a locale.

The locale is always in a IETF BCP 47 language tag format.

Param Type Description
locale String The locale to use

Returns:

Object, for example:

{
  format: 'DD.MM.YYYY',
  example: '10.11.1983',
  regex: '(\\d{1,2})[.](\\d{1,2})[.](\\d{4})'
}

datepicker.initiator.position(input)

Positions the initiator button for the datepicker correctly over the given input element.

Param Type Description
input <input> The input element used to position the initiator button from

datepicker.initiator.onResize(input)

An resize event handler for the initiator

Param Type Description
input <input> The input element used to position the initiator button from

datepicker.initiator.onDOMContentLoaded(input)

An DOMContentLoaded event handler for the initiator

Param Type Description
input <input> The input element used to position the initiator button from

datepicker.initiator.init(input)

Initiates the event handlers for the initiator of the given input element.

Param Type Description
input <input> The input element used to position the initiator button from
Contact us, Opens in new window