AirDatepicker

This section will guide you through the steps to integrate the AirDatepicker library into your project using Yarn. You will learn how to install, configure, and use the AirDatepicker in your web application.

Install AirDatepicker from Yarn

To install the AirDatepicker JS library, run the following command from the root directory of your project:

yarn add air-datepicker --save

This command installs the AirDatepicker package and saves it as a dependency in your project.

Import AirDatepicker

Once the package is installed, you need to import both the CSS and JavaScript files into your HTML file or project:

                    <link rel="stylesheet" href="assets/libs/air-datepicker/air-datepicker.css">
<script src="assets/libs/air-datepicker/air-datepicker.js">
                

The paths above assume you are using a module bundler like Webpack. If you are not using a bundler, you can include these files directly from the node_modules folder.

HTML Markup for AirDatepicker

Now, add an input field in your HTML that will trigger the AirDatepicker:

                    <div class="card-body">
    <input type="text" class="form-control" id="publishing-date" placeholder="Pick date & time">
</div>
                

Here, we create a text input field with the ID of publishing-date where the date picker will appear.

JavaScript Configuration for AirDatepicker

Next, initialize the AirDatepicker in your JavaScript file:

                    const publishingDate = document.getElementById('publishing-date');
if (publishingDate) {
    new AirDatepicker(publishingDate);
}
    

In the above code, we select the publishing-date input field using its ID and initialize a new instance of AirDatepicker on it.

Test the Datepicker

Once you’ve added the HTML and JavaScript, open your page in the browser. You should now be able to interact with the date picker in the input field, allowing the user to select a date.

Optional Features of AirDatepicker

AirDatepicker comes with several features like time selection, date range selection, and more. You can configure these options by passing settings when initializing the date picker:

                    new AirDatepicker(publishingDate, {
    timepicker: true,
    inline: true,
    dateFormat: 'yyyy-mm-dd',
    minDate: new Date()
});
                

In the above code, the date picker is configured with a time picker, inline mode, a custom date format, and a minimum date restriction.