Error: Attempting to use Moment with Bootstrap Date Time Picker results in TypeError, as Object(...) is not recognized as

Let me show you the code for my picker in a simple way:

import {moment} from 'moment';

const datePicker = () => {
  $('.datetimepicker').datetimepicker({
    format: 'LT',
    locale: 'PT-BR',
    icons: {
      up: "fa fa-chevron-up",
      down: "fa fa-chevron-down",
    },
    stepping: 15,
    disabledTimeIntervals: [[moment({ h: 0 }), moment({ h: 8 })], [moment({ h: 18 }), moment({ h: 24 })]]
  });
};

export {datePicker};

The part that is causing trouble,

disabledTimeIntervals: [[moment({ h: 0 }), moment({ h: 8 })], [moment({ h: 18 }), moment({ h: 24 })]]
, is directly from the official documentation.

However, including it leads to an error:

dtPicker.js:24 Uncaught TypeError: Object(...) is not a function

Answer №1

You've been using the wrong approach to import moment library.

import moment from "moment"; // the right method

Even though this response is from last year, it could still benefit others.

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

Ways to retrieve the checkbox value using PHP in conjunction with XML

I am currently in the process of learning PHP, XML, AJAX, and other related technologies. I have a form that is working fine for the most part, but I am facing an issue with passing the value/state of a checkbox to my PHP script. It's worth mentionin ...

Ways to resolve the error message "Type 'Promise<{}>' is missing certain properties from type 'Observable<any>'" in Angular

Check out this code snippet: const reportModules = [ { url: '', params: { to: format(TODAY, DATE_FORMAT).toString(), from: format(TODAY, DATE_FORMAT).toString() } }, { url: 'application1', params: { to: for ...

Convert a function into another function when the button is clicked

Hey there, I have an array containing years in my controller: public function getNextYear() { $years = $this->getYears(); foreach ($years as $key => $value) { $y[] = $value + 1; } return $y; } I am displaying this on my ind ...

Using JSON object as an argument in React functional component

Currently, I'm trying to assign a JSON object to a const variable. I've been successful with using vars in the past, like so: {this.props.user.map(function(user){... However, when it comes to stateless consts, I'm encountering some confusi ...

Create a new array containing the keys from an array of objects

My task involves extracting the key puppies from an array of objects and returning it in a new array: The input is an array of dogs structured like this: [ {breed: 'Labrador', puppies: ['Fluffy', 'Doggo', 'Floof&ap ...

Safari on iOS9 is inaccurately calculating the total sum

My code involves calculating the sum of key/value pairs in a hash within a loop. I have noticed that there is a discrepancy in how the sum is calculated on ios9 Safari compared to other platforms. While I can address this issue for this specific scenario, ...

Execute JavaScript after authentication instead of forwarding the user to another page

Short version: How can we efficiently handle a second AJAX call after an ASP.NET Membership Authentication response? Long version: Let's say we have a web-based Paint program created using ASP.NET MVC. A user is painting a picture when suddenly their ...

Creating a distinctive vue form component from scratch

I have a requirement to develop a Vue component that enables users to create or edit a mailing address. The existing component structure is as follows: <template> <v-container> <v-form ref="form" lazy-validation> <v-text-field ...

Even after unsubscribing with mqtt.js, the old listener continues to receive messages

Currently, I am utilizing mqtt.js to receive websocket data from an MQTT server. The subscription process is functioning properly, but the challenge lies in changing the topic dynamically by modifying the websocket configuration. The issue arises when, eve ...

The integration of Raphaeljs library with SmartPhones opens up a world of

I recently incorporated the incredible JavaScript library, RaphaelJS, into my website to create maps, animations, and interactive features. Interestingly, I have observed that the scripts utilizing this library function seamlessly on iPhones but encounter ...

Experiencing issues with a modal component in my React project that utilizes Bootstrap

Bootstrap modal implementation issue: {/* Here is the code snippet for the Bootstrap modal */} <div id="small_modal" className="modal fade" role="dialog" aria-labelledby="mySmal ...

Creating a function to update data in a Node.js/MongoDB environment

Hey there! I'm new to working with nodejs and mongodb, and I'm trying to create a function that updates the win, lose, and draw record in my UserSchema. Here's my Schema: UserSchema = new mongoose.Schema({ username:'string', ...

How can an array of objects be sent as a query string to the endpoint URL in React?

I'm currently developing a react application and facing the challenge of dynamically constructing and appending query strings to URLs. This is necessary because I have a shared base endpoint for all links, but each link may require different parameter ...

REACT Issue: Unable to Select Dropdown Option with OnChange Function

I have a component that includes a select element. Upon clicking an option, the OnProductChange function returns the value. However, my e.target.value shows as [Object Object]. Yet, {console.log(product)} displays: {id: 1, name: "VAM"} Clicking on Add L ...

Encountering a "TypeError: Cannot access the 'state' property of undefined" error while using React's "Map" function

It's clear from the examples below that the first photo functions perfectly when this.state.blabal is NOT located within the map(a, b){blabla} However, as seen in photo2, when I move the functioning block inside the map(a, b){`here!!`} {Object.k ...

What could be causing this minimal Angular - WebTorrent configuration to fail?

The setup appears to be quite straightforward. Check out the Webtorrent usage reference here This is how I have my setup: import WebTorrent from 'webtorrent'; @Component({ selector: 'app-root', standalone: true, template: `bla` ...

Implementing Facebook Javascript SDK to enable login and trigger re-authentication using React Web and Typescript within a component

As a newcomer to stack overflow, I welcome any suggestions on how I can improve my question. I'm in need of guidance concerning logging a user into facebook and requiring them to authenticate their profile or select another profile manually, rather t ...

The local server for handling HTTP requests has ceased to operate

Recently, I set up the NPM package along with the http server within the "server" directory. Initially, everything was functioning smoothly; however, the server abruptly ceased operating. Upon attempting to launch the local http server, an error message a ...

Strapi: Enhancing User Experience with Unique Passwordless Customization Services

I have been attempting to modify the "passwordless" strapi plugin in order to generate verification codes consisting exclusively of digits. To achieve this, I need to override the createToken function within the plugin's service. Following the instru ...

Can anyone suggest a way to detect if a website visitor has previously visited the site using jQuery?

Looking to add a special message for new visitors on my website in a div container. Once they read it, they have the option to click a 'Hide' button to remove it permanently. Any suggestions on how I can achieve this? ...