Documentation

introduction

Usage

Installation

Before you start using NepaliDatePicker, make sure it's installed in your project. You can include it using npm or via a CDN, as described in the Installation section of the documentation.

Importing NepaliDatePicker

If you're using a bundler like webpack, you need to import NepaliDatePicker into your project. If you're using modules (especially for TypeScript), it's recommended to use the import syntax. Here are examples for both ES modules and CommonJS:

// ES modules (recommended, especially for TypeScript)
import NepaliDatePicker from '@anuz-pandey/nepali-date-picker';

// CommonJS
const NepaliDatePicker = require('@anuz-pandey/nepali-date-picker');

If you're not using a bundler, you can include NepaliDatePicker directly in your HTML.

<input type="text" id="date-picker-input">

<script src="path/to/nepali-date-picker.bundle.js"></script>

Initializing NepaliDatePicker

After including the necessary files, you can create instances of NepaliDatePicker in various ways. All the following examples are valid:

// Initialize NepaliDatePicker with a class selector
new NepaliDatePicker('.date-picker');

// Initialize NepaliDatePicker with an ID selector
new NepaliDatePicker('#date-of-birth');

// Initialize NepaliDatePicker with a selector and configuration options
new NepaliDatePicker('selector', config); // See Config Options below

Configuration Options

You can customize the behavior of NepaliDatePicker by passing configuration options when initializing an instance. Here are some common configuration options:

const config = {
    format: 'YYYY-MM-DD',
    disableAfterToday: false,
    disableBeforeToday: false,
    disableToday: false,
    closeOnDateSelect: true,
    markHolidays: true,
    holidays: ['Saturday'],
    indicateCurrentDate: true,
    setCurrentDate: false,
    position: 'left',
    daysFormat: 'dd',
    locale: 'np',
    theme: 'flat',
    darkMode: false,
};

// Initialize NepaliDatePicker with a selector and configuration options
new NepaliDatePicker('.date-picker', config);

Refer to the Options section of the documentation for a complete list of available configuration options.

Example

Here's a basic example of setting up NepaliDatePicker on an input field:


<input type="text" id="date-picker-input">

<script>
    // Import NepaliDatePicker and styles (if not already imported)
    import NepaliDatePicker from '@anuz-pandey/nepali-date-picker';

    // Initialize NepaliDatePicker on the input field
    new NepaliDatePicker('#date-picker-input');
</script>

This simple example demonstrates how to integrate NepaliDatePicker into your project. Explore the Options and Methods sections for more advanced usage and customization.

Now you're ready to use NepaliDatePicker in your project!

Next
Basics