Meteor npm install https://github.com/T00rk/bootstrap-material-datetimepicker problem


#1

In Win tried to use

with

meteor npm install --save bootstrap-material-datetimepicker

But returns:

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Users\\SEC11\\AppData\\Local\\.meteor\\packages\\meteor-tool\\1.3.2_4\\mt-os.windows.x86_32\\dev_bundle\\bin\\\\node.exe" "C:\\User
s\\SEC11\\AppData\\Local\\.meteor\\packages\\meteor-tool\\1.3.2_4\\mt-os.windows.x86_32\\dev_bundle\\lib\\node_modules\\npm\\bin\\npm-cli.js" "install
" "--save" "bootstrap-material-datetimepicker"
npm ERR! node v0.10.43
npm ERR! npm  v2.14.22
npm ERR! code E404

npm ERR! 404 Registry returned 404 for GET on https://registry.npmjs.org/bootstrap-material-datetimepicker
npm ERR! 404
npm ERR! 404 'bootstrap-material-datetimepicker' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of 'spark2acs'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\SEC11\PycharmProjects\spark2acs\npm-debug.log

But it uses:

bower

bower install bootstrap-material-datetimepicker

So I need to install bower in order to install this package?

EDIT: http://stackoverflow.com/questions/27360710/bower-is-not-recognised-as-an-internal-or-external-command

Tried

meteor npm install -g bower

didn’t worked

But

npm install -g bower

worked

But now taking very long time to build…before getting:

meteor npm install --save markdown-it btoa npm-shrinkwrap load-grunt-tasks time-grunt jshint-stylish

Then afterward with meteor:

   While processing files with ecmascript (for target web.browser):
   bower_components/jquery/src/intro.js:45: Unexpected token (45:0)
   bower_components/jquery/src/outro.js:1: Unexpected token (1:0)
   bower_components/momentjs/templates/locale-header.js:6: Unexpected token (6:0)
   bower_components/momentjs/templates/test-header.js:6: Unexpected token (6:0)

   While processing files with templating (for target web.browser):
   bower_components/bootstrap-material-design/dist/test.html:1: Expected one of: <body>, <head>, <template>
   bower_components/bootstrap-material-datetimepicker/index.html:1: Expected one of: <body>, <head>, <template>
   bower_components/bootstrap-material-design/bootstrap-elements.html:1: Can't set DOCTYPE here.  (Meteor sets <!DOCTYPE html> for you)

   While processing files with ecmascript (for target os.windows.x86_32):
   bower_components/jquery/src/intro.js:45: Unexpected token (45:0)
   bower_components/jquery/src/outro.js:1: Unexpected token (1:0)
   bower_components/momentjs/templates/locale-header.js:6: Unexpected token (6:0)
   bower_components/momentjs/templates/test-header.js:6: Unexpected token (6:0)

But could anyone show how to convert this jQuery into a React component, specifically the Event example, with Start and End Date.Is it trivial ? If not then any good examples of how to use jQuery in React ? Or jQuery in Blaze is still ok, I just like to use this widget in Meteor that’s all.

import React, {Component} from 'react';

export default class BootstrapMaterialDateTimePicker extends React.Component {

    componentDidMount() {
        const { calendar }= this.refs;
        
        $(datetimepicker).fullCalendar();

    }
    
    render() {
        return (

            <div className="datetimepicker">
                <div class="row">
                    <div class="col-md-6">
                        <h2>Events</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-control-wrapper">
                                    <input type="text" id="date-start" class="form-control floating-label"
                                           placeholder="Start Date"></input>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-control-wrapper">
                                    <input type="text" id="date-end" class="form-control floating-label"
                                           placeholder="End Date"></input>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
};

But not sure how to connect/convert to jQuery react-bootstrap-datetimepicker component to React component

This article talks about converting jQuery to React component

http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/