Bootstrap Style doesn't work

[jgamao]

The bootstrap style is not working..it looks like this when I use it:

I guess it should be like this:

[Rhadow]

Try importing the css manually: import 'react-bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css';

This works for me.

[stheobald]

I'm seeing the same issue.

<DateTimeField inputFormat="DD-MM-YYYY" viewMode="years" />:

I've had no luck importing the css manually and passing it into the DateTimeField component.

@Rhadow Is there any chance you can paste a working example of your import method somewhere for us?

[Rhadow]

@stheobald I am using webpack as my bundling tool and it allows me to import css just as I shown in the previous post. Your case might be different than mine and jgamao's since your calender is not formatted when the css is not applied. It's better if you can create a little example to duplicate the error and solve it from there.

[katrynmc]

I'm also using webpack and found that importing them from within my style files worked best. I'm using stylus (.styl) so I just put @import '../../node_modules/react-bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css' at the top of the associated component .styl file and then import that single file (with vendor and custom files) into my component jsx file.

[scheung38]

Hi I am also facing issues with picker not rendering properly, time not aligned below the arrow, AM/PM not toggling, and dates cannot be clicked. Can someone show to how use webpack to do the CSS installation thanks

or simply inside the file.jsx:

 import 'react-bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css';

But then this is returned: Cannot find the entry point "index.js" for the web

[jmauzy]

@scheung38 after adding the import statement, all that should be necessary is ensuring you have a CSS loader set up in webpack.

add something like: { test: /\.css$/, loader: "style-loader!css-loader" }

to your your loaders in your webpack config and make sure both loaders are installed. Worked fine for me using this method.

[scheung38]

Hi @jmauzy...But webpack is not supported according to Meteor Core Development ? Is the webpack conflicting with ecmascript??? Or can I only install the necessary webpack:css? Possible to do this without webpack ?

https://www.youtube.com/watch?v=hk0h_7-N9hA

Transmission - Episode 4: Why Meteor 1.3 won't use Webpack

From the core Developers..

[scheung38]

Hi @jmauzy so is it:

client/webpack.config.js:

{
                test: /\.css$/,
                // loader: "style-loader!css-loader" //which one?
                loader: 'style!css?modules!postcss' // ?
            }
]
    },
    postcss: [
        require('autoprefixer')
    ],

and then in that ParentComponent example:

// or import styles from '/node_module/.../../react-bootstrap-datetimepicker/css/bootstrap -datetimepicker.min.css';

import 'react-bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css';

export default class ParentComponent extends TrackerReact(React.Component) {
}

EDIT:

Did managed to get the css now, but the hours setting looking a bit squashed

,

but clicking on a calender date returns?

ParentComponent.jsx:22 Uncaught TypeError: this.setState is not a function

ParentComponent.jsx:

import React, {Component} from 'react';
import DateTimeField from 'react-bootstrap-datetimepicker';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
import moment from 'moment';

import '/node_modules/react-bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css';

export default class ParentComponent extends TrackerReact(React.Component) {
    constructor(props) {
        super(props);
        this.state = {
            date: moment().format('YYYY-MM-DD HH:mm:ss'),
            format: "YYYY-MM-DD HH:mm:ss",
            inputFormat: "YYYY-MM-DD HH:mm:ss",
            mode: "date"
        };
    }

    handleChange(newDate) {
         console.log("newDate", newDate);
        return this.setState({date: newDate});
    }

    render() {
        const {date, format, mode, inputFormat} = this.state;
        return (

            <DateTimeField
                dateTime={date}
                format={format}
                inputFormat={inputFormat}
                onChange={this.handleChange}
                viewMode={mode}
            />);

    }
}

[majide001]

i have problem with styling , that the table view is going left , its not showing even and to edit it i have to go to DateTimeField.js and edit the style , but my problem is after giving my Clint he maybe will be able to update datetimepicker and thats mean the change that i did gone , does anyone have any idea what i have to do to keep this change ?