• 23-Jan-2023
Lightrun Team
Author Lightrun Team
Share
This article is about fixing Clicking on a date in the datepicker does not trigger the JS change event in t1m0n Air Datepicker

Clicking on a date in the datepicker does not trigger the JS change event in t1m0n Air Datepicker

Lightrun Team
Lightrun Team
23-Jan-2023

Explanation of the problem

An issue has been observed where an input element’s onchange event, which is being watched by some JavaScript code, is not getting triggered when a date is selected from a datepicker. This issue is likely related to the fact that the input value is being changed programmatically, rather than by user input.

$('input').on('change', function() {
    console.log('Input value changed.');
});

As shown in the example above, the change event is bound to the input element, but when a date is picked from the datepicker, it does not fire the event. This is because the val() method does not trigger the change event when the value of the input element is changed programmatically.

This issue is related to the following problem: http://stackoverflow.com/questions/3179385/val-doesnt-trigger-change-in-jquery.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

  • Instantly add logs to, set metrics in, and take snapshots of live applications
  • Insights delivered straight to your IDE or CLI
  • Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for Clicking on a date in the datepicker does not trigger the JS change event in t1m0n Air Datepicker

The issue at hand is that an input element’s onchange event is not getting triggered when a date is selected from a datepicker. This can happen because the datepicker library updates the value of the input element programmatically, and the val() method does not trigger the change event when the value of the input element is changed programmatically.

The solution proposed is to use the onSelect event provided by the datepicker library. This event is triggered when a date is selected, and it can be used to manually trigger the change event on the input element. The following code block shows an example of how to use the onSelect event to manually trigger the change event on the input element.

$('.air-datepicker').datepicker({
    onSelect: function(formattedDate, date, inst) {
        $(inst.el).trigger('change');
    }
});

In this example, the datepicker is initialized by calling the datepicker() method on the element with the class ‘air-datepicker’. The onSelect event is passed as an option, and it takes a function that receives three arguments: formattedDate, date and inst. The first argument is a string that represents the selected date in the format specified by the format option. The second argument is a JavaScript Date object that represents the selected date. The third argument is an object that represents the datepicker instance. In this function, the trigger method is used to manually trigger the change event on the input element.

It’s important to note that the onSelect event is only available for certain datepicker libraries, like the one in the example, the air-datepicker. If you are using a different datepicker library you should check if it has an equivalent event and how to use it. Also, this is a temporary fix, it’s better to wait for the feature request to be implemented, if you are the developer, or contact the developer if you are a user.

Other popular problems with Air Datepicker

Problem: Datepicker not working when used with Bootstrap 4

One common issue that users have reported when using the t1m0n Air Datepicker with Bootstrap 4 is that the datepicker is not working properly. This can happen because Bootstrap 4 has made some changes to the way that it styles forms and inputs, which can cause conflicts with the datepicker’s styles.

Solution:

To solve this problem, you can use the datepicker’s ‘no-wrap’ option, which prevents the datepicker from being wrapped in a Bootstrap 4 container.

<!--example of using 'no-wrap' option-->
<div class="form-group">
    <input type="text" class="form-control datepicker" data-wrap="false">
</div>

Problem: Datepicker not working with Angular

Another common issue that users have reported when using the t1m0n Air Datepicker with Angular is that the datepicker is not working properly. This can happen because Angular uses a different approach to handling events and data binding, which can cause conflicts with the datepicker’s event handling.

Solution:

To solve this problem, you can use the Angular wrapper for the t1m0n Air Datepicker, which is specifically designed to work with Angular.

//example of using the Angular wrapper
import { Component } from '@angular/core';
import { AirDatepicker } from 'ng-air-datepicker';

@Component({
    selector: 'my-app',
    template: `<air-datepicker [(ngModel)]="date"></air-datepicker>`
})
export class AppComponent {
    date = new Date();
}

Problem: Datepicker not working with Typescript

Another common issue that users have reported when using the t1m0n Air Datepicker with Typescript is that the datepicker is not working properly. This can happen because Typescript is a strict superset of JavaScript and requires explicit types for variables and function arguments, which can cause conflicts with the datepicker’s dynamic nature.

Solution:

To solve this problem, you can use the @types/air-datepicker package, which provides type definitions for the t1m0n Air Datepicker. This package allows you to use the datepicker with Typescript without any type errors.

//example of using @types/air-datepicker package
import { AirDatepicker } from 'air-datepicker';

class MyComponent {
    private datepicker: AirDatepicker;

    constructor() {
        this.datepicker = new AirDatepicker();
    }
}

In this example, the AirDatepicker is imported from the air-datepicker package and a private variable datepicker is defined with the type of AirDatepicker. This allows for the datepicker to work correctly in a Typescript environment without any type errors.

In summary, the first problem is solved by using the datepicker’s ‘no-wrap’ option, which prevents the datepicker from being wrapped in a Bootstrap 4 container. The second problem is solved by using the Angular wrapper for the t1m0n Air Datepicker, which is specifically designed to work with Angular. The third problem is solved by using the @types/air-datepicker package, which provides type definitions for the t1m0n Air Datepicker and allows you to use the datepicker with Typescript without any type errors. These solutions allow developers to effectively use t1m0n Air Datepicker in different environments without any compatibility issues.

A brief introduction to Air Datepicker

t1m0n Air Datepicker is a lightweight and highly customizable JavaScript datepicker library. It is based on the jQuery library, which makes it easy to use and integrates seamlessly with other jQuery-based libraries and frameworks. It provides a wide range of options and features such as date format, range selection, localization, and custom templates, which allows developers to easily customize the datepicker to their specific needs.

In terms of functionality, t1m0n Air Datepicker provides a range of features such as date validation, date formatting, and date range selection. It also supports various date formats, including date, time, and datetime, and it is also localized which means it can be used with different languages, calendars and date formats. The library also has the ability to work with different timezones and it supports both input fields and inline calendars. It also provides a range of events and callbacks which can be used to handle user interactions such as selecting a date, changing the view, etc.

Most popular use cases for Air Datepicker

  1. t1m0n Air Datepicker can be used to provide a user-friendly and customizable date picker for web applications. It can be easily integrated into forms, providing users with an intuitive way to select a date. The library offers a wide range of options and features, such as date format, range selection, localization, and custom templates, which allows developers to easily customize the datepicker to their specific needs.
<input type="text" class="form-control datepicker">
<script>
    $('.datepicker').datepicker({
        minDate: new Date(),
        onSelect: function(formattedDate, date, inst) {
            console.log(formattedDate, date, inst);
        }
    });
</script>
  1. t1m0n Air Datepicker can be used for date validation, date formatting, and date range selection. It supports various date formats, including date, time, and datetime, and it is also localized which means it can be used with different languages, calendars and date formats. This makes it an ideal choice for web applications that need to support multiple languages and cultures.
  2. t1m0n Air Datepicker can be used to handle date-related operations in a web application, such as calculating the difference between two dates, formatting dates, and validating dates. It can be used in combination with other libraries and frameworks, such as Angular and Typescript, to provide a comprehensive date handling solution for web applications.
Share

It’s Really not that Complicated.

You can actually understand what’s going on inside your live applications. It’s a registration form away.

Get Lightrun

Lets Talk!

Looking for more information about Lightrun and debugging?
We’d love to hear from you!
Drop us a line and we’ll get back to you shortly.

By submitting this form, I agree to Lightrun’s Privacy Policy and Terms of Use.