Configure datepicker-moment with Brunch

Phoenix Forum Questions / Help
,
1

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

2

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).

1 Like
3

Oh I see… pity. Thanks for the help though :slight_smile: Do you happen to know a good brunch compatible timepicker by any chance?

4

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).

1 Like
5

Ahah thank you and don’t worry I am not that easy to insult :wink: I actually think it is a funny title especially as I have a form of rejection to learning js

6

Sorry to bother you again but 2 quick questions:

  1. Why can’t I use glyphicons in my app? they keep giving me error this is so frustrating…
  2. how do you add css files from npm packages? for instance i have fullcalendar and i added “fullcalendar”: [‘dist/fullcalendar.min.css’] to the npm in brunc-config and that works but “eonasdan-bootstrap-datetimepicker”: [‘build/bootstrap-datetimepicker.min.css’], does not even though in the node modules the css file is in the build folder…
    Thanks

EDIT

I managed to import the right css file just still no glypicons for some reason

7

I didnt test but i think these work for datepicker-moment

app.css
@import "~datepicker-moment/moment-datepicker/datepicker";

app.js
import "datepicker-moment"
8

Thank you! I’ll give that a go :slight_smile:

9

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"]
              }
}
1 Like
10

ok that is odd but thanks ahah

11

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.

1 Like