Lightweight Beauitiful Date Picker – Calendarify

Preview:

Description:

Calendarify.js is a simple, lightweight, multilingual, pretty clean date picker written in Vanilla JavaScript.

How to use it:

1. Install and import the Calendarify.

# NPM
$ npm i calendarify

// ES6+
import Calendarify from "calendarify"
// Browser
<link rel="stylesheet" href="/path/to/dist/calendarify.min.css" />
<script src="/path/to/dist/calendarify.iife.js"></script>

2. Create a date input on the page.

<input type="text" class="example" id="date-input" />

3. Initialize the Calendarify on the date input. That’s it.

const calendarify = new Calendarify('.example', {
      // options here
})
calendarify.init();

4. Customize the date picker.

const calendarify = new Calendarify('.example', {
      // accent color in hex
      accentColor: '#0090FC',
      // enable dark mode
      isDark: true,
      // z-index property
      zIndex: 9999, 
      // append additional CSS classes to the date picker
      customClass: ['font-poppins'], 
      // localize the date picker here
      locale: {
        format: "DD-MM-YYYY", // date format
        lang: {
          code: 'id', // language id
          months: [/* month names */], 
          weekdays: [/* weekdays*/],
        }
      }
      
})

5. Get details of the selected date.

const calendarify = new Calendarify('.example', {
      onChange: (calendarify) => console.log(calendarify)
})

Changelog:

v2.0.3 (04/08/2023)

• update placement