carlosarli

carlosarli

Configure datepicker-moment with Brunch

Hello everyone,
I’m trying to add the package datepicker-moment to my phoenix application but can’t seem to solve some configuration issues. I installed it via npm then went to brunch.config and in the npm section I whitelisted datepicker-moment. I would like to add the stylesheet too but when I add it to styles it throws an error as i already have another style there. So first question howdo you add multiple styles in the npm section of brunch config? Is that all I have to do to set up an npm package? I then went to app.js and wrote import datepicker from “datepicker-moment” but then in my views it says that .datepicker is not a function while jquery and everythin else works so I’m guessing I am not importing it right…

Thank you for your help
Carlo

Marked As Solved

peerreynders

peerreynders

If you have a look at the package.json you’ll find.

  "main": "Gruntfile.js",

https://docs.npmjs.com/files/package.json#main

The main field is a module ID that is the primary entry point to your program. That is, if your package is named foo, and a user installs it, and then does require(“foo”), then your main module’s exports object will be returned.

This should be a module ID relative to the root of your package folder.

For most modules, it makes the most sense to have a main script and often not much else.

Gruntfile.js is a taskrunner configuration file. As far as I can tell that package is not suitable for bundling by Brunch or any other bundler (FYI: Phoenix is moving to Webpack 4).

This problem happens frequently with older JavaScript libraries that are barely being maintained (another example).

Also Liked

peerreynders

peerreynders

Nope. But somebody else may know of one that can be properly required (or imported; which is the fundamental issue).

For some background you may be interested in Modern JavaScript Explained For Dinosaurs (no insult intended, I didn’t pick the title).

dokuzbir

dokuzbir

for font-awesome and glyphicons you need copy cat
npm install --save-dev copycat-brunch

This is for bootstrap sass you can configure if you dont use bootstrap-sass

plugins: {
    copycat: { 
    "fonts": [ "node_modules/bootstrap-sass/assets/fonts/bootstrap"]
              }
}
peerreynders

peerreynders

I ran into that - in my case Phoenix distribution didn’t include glyphicons-halflings-regular - i.e. bootstrap is incomplete.

There needs to be a static/fonts folder with:

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
glyphicons-halflings-regular.woff2

The app.css file has the bootstrap CSS baked in which references these fonts.

  1. “eonasdan-bootstrap-datetimepicker”: [‘build/bootstrap-datetimepicker.min.css’], doesn’t look like a path under node_modules (hence the name of the configuration: npm)

You’d have to look at modifying

stylesheets: {
  joinTo: "css/app.css"
},

instead.

The joinTo supports a variety of pattern matching styles.

Where Next?

Popular in Questions Top

myronmarston
The Elixir Typespec docs show the following syntax for keyword lists in typespecs: # ... | [key: type] # keyword lists...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
New
LegitStack
I’m trying to make a websocket server in Phoenix or raw Elixir. I heard about gun, I think I could use cowboy, but since I’m not that sma...
New
hariharasudhan94
lets say i have a sample like a = 20; b = 10; if (a > b) do {:ok, "a"} end if (a < b) do {:ok, b} end if (a == b) do {:ok, "equa...
New
jaysoifer
Is there a way to rollback a specific migration and only that one (“skipping” all the other ones)? Would mix ecto.rollback -v 200809061...
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
script
If I have a string “1000 cfu/ml” . I want to remove the characters and / and space . So the string is like this "1000" What is the ...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
New

Other popular topics Top

9mm
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
New
chrismccord
Phoenix 1.4.0 released Phoenix 1.4 is out! This release ships with exciting new features, most notably with HTTP2 support, improved deve...
688 30877 112
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? Ecto.Repo — Ecto v3.14.0 has exampl...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
grych
Hi folks, Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
639 52341 488
New
komlanvi
Hi everyone, I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the te...
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
marick
I had some trouble figuring out how to make many-to-many associations work. Once I got it working, I wrote a blog post. Because I’m a nov...
New

We're in Beta

About us Mission Statement