Day.js | The lightest API to handle dates in JS
Tags: javascript, webdev
Published: 2021-09-14 15:24:18

Today I am writing again to bring you a library that will help us with the handling of dates in JavaScript, yes, as we all know the handling of dates in JavaScript is not very intuitive.

___ 

## 🤔 Why use dayjs?

Basically the justification for using ``dayjs`` is to simplify the handling of dates in JavaScript.

It is a fairly widespread library and which you have probably heard of already, it was presented a while ago as an alternative to ``Moment`` which is not recommended for use today, the main reason is the weight and the appearance of new alternatives that offer more modern and lighter solutions, ``dayjs`` is an example of this.

### Moment

see more [here] (https://bundlephobia.com/package/moment)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/skc2hpsocxezb5gjju72.png)
 
### Dayjs

see more [here] (https://bundlephobia.com/package/dayjs)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xj7s87379w6omqh4ob7t.png) 
 

It is very light because it takes advantage of the ``Treeshaking`` since the library is fully extensible through plugins that we will add depending on the needs that arise, in this way we will only import the things we need.

___

## 🧪 Some examples

Now we will go to see some examples where its use would be justified compared to the native API, either for simplicity, readability or also to prevent possible errors.

We are going to review some of the most interesting functionalities that ``dayjs`` offers us.

___

### 🧹 Without plugins
___


#### Get difference in days between two dates

[docs](https://day.js.org/docs/en/display/difference)

```js
import dayjs from "dayjs";

dayjs(new Date(2020, 5, 10)).diff(new Date(2020, 5, 1), "day"); // output:  9
```

___ 

#### Check if the given date is valid or not

[docs](https://day.js.org/docs/en/parse/is-valid)

```js
import dayjs from "dayjs";

dayjs("20").isValid(); // output:  false
dayjs("2021-09-13").isValid(); // output:  true
```

___

#### Get the number of days in the month

[docs](https://day.js.org/docs/en/display/days-in-month)

```js
import dayjs from "dayjs";

dayjs("2021-09-13").daysInMonth() // output: 30
```

___

#### Add days, months, years, hours, minutes, seconds etc.

[docs](https://day.js.org/docs/en/manipulate/add)

```js
import dayjs from "dayjs";

dayjs("2021-09-13 20:09:09").add(20, "minute").format() // output: 2021-09-13T20:29:09+02:00 
```

___

#### Subtract days, months, years, hours, minutes, seconds etc

[docs](https://day.js.org/docs/en/manipulate/subtract)

```js
import dayjs from "dayjs";

dayjs("2021-09-13 20:09:09").subtract(20, "minute").format() // output: 2021-09-13T19:49:09+02:00 
```
___

### ⚡ Extending the functionality through plugins

___

#### RelativeTime

[docs](https://day.js.org/docs/en/plugin/relative-time)

Get time difference in string format between current date and given date using Spanish locale

```js
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import "dayjs/locale/es";

dayjs.locale("es");
dayjs.extend(relativeTime);

dayjs("2021-09-14T13:28:55.979Z").fromNow(); // example output: en 3 horas
```

___

#### WeekOfYear

[docs](https://day.js.org/docs/en/plugin/week-of-year)

Get week of year

```js
import dayjs from "dayjs";
import weekOfYear from "dayjs/plugin/weekOfYear";

dayjs.extend(weekOfYear);
	
dayjs("2021-09-13T13:28:55.979Z").week(); // output: 38
```

___

### IsSameOrAfter

[docs](https://day.js.org/docs/en/plugin/is-same-or-after)

Check if one date is equal to or greater than another

```js
import dayjs from "dayjs";
import isSameOrAfter from "dayjs/plugin/isSameOrAfter";

dayjs.extend(isSameOrAfter);

// To use `year` granularity pass the second parameter
dayjs("2021-09-13").isSameOrAfter("2021-09-14", "year"); // output: true
```

___

### MinMax

[docs](https://day.js.org/docs/en/plugin/min-max)

Get the highest date or the lowest date among the dates of an array

```js
import dayjs from "dayjs";
import minMax from "dayjs/plugin/minMax";

dayjs.extend(minMax)

const maxDate = dayjs.max([
	dayjs("2021-09-13"), 
	dayjs("2021-09-16"), 
	dayjs("2021-09-20")
])

const minDate = dayjs.min([
	dayjs("2021-09-13"), 
	dayjs("2021-09-16"), 
	dayjs("2021-09-20")
])

maxDate.format() // output: 2021-09-20T00:00:00+02:00  
minDate.format() // output: 2021-09-13T00:00:00+02:00 
```

___

### IsBetween

[docs](https://day.js.org/docs/en/plugin/advanced-format)

Check if the given date is within the indicated date range


```js
import dayjs from "dayjs";
import isBetween from "dayjs/plugin/isBetween";

dayjs.extend(isBetween);

// To use `day` granularity pass the third parameter
dayjs("2010-10-21").isBetween(dayjs("2010-10-20"), dayjs("2010-10-25"), "day"); //output: true

// To use `year` granularity pass the third parameter
dayjs("2010-10-21").isBetween(dayjs("2010-10-20"), dayjs("2010-10-25"), "year"); //output: false
```

___

### AdvancedFormat

[docs](https://day.js.org/docs/en/plugin/advanced-format)

Vitamin default formatting options

```js
import dayjs from "dayjs";
import advancedFormat from "dayjs/plugin/advancedFormat";

dayjs.extend(advancedFormat);

dayjs("2021-09-14").format("Q Do k kk X x"); // output: 3 14th 24 24 1631570400 1631570400000
```

___

As can be seen in the examples above, the API is quite simple and readable, it seems to me without a doubt a great option if we need to solve some other complex function with dates in JavaScript.

For view more information go to official [dayjs docs](https://day.js.org/en/).

___

Thanks for reading me. 😊

![thanks](https://media.giphy.com/media/M9NbzZjAcxq9jS9LZJ/giphy.gif?cid=ecf05e475twtxtsnaz37d3iiuapb0azthe9eyhr6hwde115h&rid=giphy.gif&ct=g)