Lightweight Beauitiful Date Picker – Calendarify

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'], 
      // enable/disable quick action (Today, Tomorrow, In 2 Days) buttons
      quickActions: true, 
      // top | top-start | top-end | right | right-start | right-end | bottom | bottom-start | bottom-end | left | left-start | left-end
      position: "bottom",
      // localize the date picker here
      locale: {
        format: "DD-MM-YYYY", // Set Custom Format with Moment JS
        lang: {
          code: 'id', // Set country code (e.g. "en", "id", etc)
          months: ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'], // Or you can use locale moment.months instead
          weekdays: ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'], // Or you can use locale moment.weekdays instead
          ui: { // You can set locale text for quick action buttons
            quickActions: {
              today: "Hari Ini",
              tomorrow: "Besok",
              inTwoDays: "Lusa",
            }
          }
        }
      },
      onChange: (calendarify) => console.log(calendarify),
      
})

5. Get details of the selected date.

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

Changelog:

v2.0.4 (10/21/2023)

• Add position option