Is there a way to implement a method on AirDatepicker within my custom JavaScript file?

I am currently working with AirDatepicker v3.3.5 in my app.js file:

window.dateRangePicker = new AirDatepicker('.date-range', {
    range: true,
    maxDate: new Date(),
    multipleDatesSeparator: ' - '
});

After referring to the documentation at , I realized that in my custom form.js, I need to apply onSelect and update methods like so:

dpMin = new AirDatepicker('#el1', {
    onSelect({date}) {
        dpMax.update({
            minDate: date
        })
    }
})

Unfortunately, my initial attempt failed. I tried the following syntax:

window.dateRangePicker.onSelect({date}) {
    ...

};

However, I encountered an error:

Expecting new line or semicolon

I am wondering which syntax is actually valid in this case.

Answer №1

After reviewing the comments, it appears that the Document indicates we can include the onSelect method in the options when initializing, although the created object itself does not have an onSelect method.

Upon further investigation of the assigned object, it was discovered that we can utilize the functions exposed within the created object. It is possible to assign the method after initialization as demonstrated below.

To implement this, you can follow these steps:

window.dateRangePicker.opts.onSelect = ({date}) => {
  console.log(date);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The timestamp is currently displaying as 2014-11-02T05:00:00.000Z rather than the expected 2014-11-02 00:00:00

Issue: The SELECT * query is returning dates in the wrong format. I am using the mysql2 module to run connection.query() and pass data to a server-side variable, then accessing it on the client-side with AJAX. router.post('/applicants', functi ...

When attempting to update a task with the Microsoft Graph API, the server returned a 400 error code

Attempting to update a Task using the Graph API from an angular2 typescript app. Here is an example of my request - Request URL:https://graph.microsoft.com/beta/tasks/_1EKXXuN1UGInJ9yVHAjIpYAKuC2 Request Method:PATCH Request Body: { "createdBy":"f16 ...

Create a standard chart with a colored map using Three.js

Recently, I dove into the world of Three.js and found myself on a mission to convert a color map into a normal map. My goal is to create a normal map similar to [image 2], based on the color map shown in [image 1]. Instead of simply uploading files, I wa ...

Tips for resizing the MUI-card on a smaller screen

Is there a way to adjust the width of the card on small screen sizes? It appears too small. You can view my recreation on codesandbox here: https://codesandbox.io/s/nameless-darkness-d8tsq9?file=/demo.js The width seems inadequate for this particular scr ...

Refreshing a single HTML element in ASP.NET MVC - the simple way!

Recently, I put together an image gallery using the unite gallery jquery plugin and now I want to change up the images it displays. My plan is to have a button labeled "art" that, when clicked, triggers a function to update the directory path and load ne ...

What is the best way to refresh a page with AngularJS?

I have a link that, when clicked by the user, triggers a page reload. I accomplished this using the method below...... HTML <div data-ng-hide="backHide" class="offset6 pull-right"> <a href="" data-ng-click="backLinkClick()"><< Back ...

Method for testing with Jest

I'm relatively new to Jest and I've been having trouble testing this particular JavaScript method: const parseData = (items) => { const data = []; const itemsCount = items.length; for (let i = 0; i < itemsCount; i += 1) { const el ...

The input data from the MySQL database requires two page refreshes in order to be retrieved

Every time I input new values into the form fields and submit them, the page needs to be reloaded twice to display the updated values. For example, consider the $balance_2 in the 7th line. This line calculates the sum of all row values and updates the Bal ...

Invoke the function functionA within the ClassComponentA class in the file fileA, located within the functionComponentA file of a REACT 17 application

My dilemma involves working with two components: a class component and a function component. I am trying to find a way to call a method from functionComponentA, which is located in classComponentA. Currently, I am achieving this by passing the method as pr ...

When a d3 event is triggered by clicking, the value should be saved in a textbox

After clicking the checkbox, I would like to have all the checked client IP values automatically populate a textbox within the div called "ip." Here is my code snippet: <html> <body> <div id="ipDiv"> Client_ip :<input ty ...

Exploring the functionality differences between mouse wheel tilt and scroll in JavaScript with scrollTop

Did you know that some computer mice come equipped with a scroll wheel that can tilt both left and right? This feature allows users to navigate through Google's piano roll app, which can be accessed here (source code available here). I am working to ...

Utilizing db.system.js Function within the $where Clause

Here is an illustration of a basic function that I have saved: db.system.js.save({_id: "sum", value: function (x, y) { return x + y; }}); However, when attempting to call it within the $where clause, a Reference not exist error occurs. <?php $collec ...

Interactive Dropdown Menus for 3 Separate Database Tables

Having trouble creating a dependent drop-down list and would appreciate some help. The error "Undefined variable: input" keeps showing up in my code. https://i.sstatic.net/mBurS.pngFor the initial drop-down, I have 3 fixed options. <option value="busin ...

Having trouble getting CSS Animation to work in a React project?

I am currently developing a Next.js application using React. const partyButton = useRef(null) const handleParty = () => { setTimeout(() => { partyButton.current.classList.add('party-time'); console.log(party ...

The server gets blocked by numerous AJAX GET requests happening at the same time until the data gets returned

In my Rails application, I am using the gridList library to display charts. The chart data is fetched asynchronously from a controller method in JSON format via AJAX. Upon initial page load, each gridlist item displays a loading icon while simultaneously m ...

Angular - Ensuring service completion before proceeding with navigation

I'm currently facing an issue where I need to populate data in a service before navigating, but the navigation is happening before the data is ready. Here's the code in my service: addToken(token) { this.cookieService.set( 'token', ...

AngularJS Data Binding Issue - Watch cycle fails to trigger

View the JSFiddle example here: https://jsfiddle.net/pmgq00fm/1/ I am trying to achieve real-time updating of my NVD3 chart by utilizing the setInterval() function on line 39, which updates the data bound to the directive. Here is a brief overview of the ...

Substitute the comma with a space

Here is my input code snippet: (((text(text here))) AND (test3) Near (test4) NOT (test5) NOT (Test6)),((tttt,tttt)),((and,lol)),((hbhbhbhbhbh)) This is the output I get: (((text(text here))) AND (test3) Near (test4) NOT (test5) NOT (Test6) (tttt,tttt) (an ...

"Encountered an undefined error with the title property of this.state.project in the Wordpress API

I'm currently working on a project that involves a Backend Wordpress and a front-end React setup. However, I've encountered an issue when attempting to retrieve the title.rendered from the JSON Data. This error is displayed: TypeError: this.sta ...

How to use Laravel to show a graph sourced from a separate database connection

Is it possible to create a pie or doughnut chart in Laravel using data from a separate database connection ('mysql2' in the .env file)? I have successfully generated charts from the main database, but this time I didn't migrate the second da ...