Webpack

[jolic]

How can md-date-time-picker be used with Webpack? Any examples?

[jolic]

Got it:

import mdDateTimePicker from "md-date-time-picker";
...
var dateDialog = new mdDateTimePicker({
  type: 'date'
});

[puranjayjain]

@jolic also the new keyword will be like this in v2.0.0

var dialog = new mdDateTimePicker.default({
        type: 'date'
});

Feel free to close this issue if it is resolved 😄

[jolic]

I'm just inspecting the source and I think it would be better to provide callbacks on the constructor:

var dateDialog = new mdDateTimePicker({
  type: "date"
  ,past: moment().subtract(3, 'years')
  ,future: moment()
  ,onClick: function(date){
    console.log(date);
  }
  ,onOk: function(date){
    console.log(date);
  }
  ,onCancel: function(date){
    console.log(date);
  }
});
...

function mdDateTimePicker(_ref) {
...
                    _ref$onClick = _ref.onClick,
                onClick = _ref$onClick === undefined ? '' : _ref$onClick,
                    _ref$onOk = _ref.onOk,
                onOk = _ref$onOk === undefined ? '' : _ref$onOk,
                    _ref$onCancel = _ref.onCancel,
                onCancel = _ref$onCancel === undefined ? '' : _ref$onCancel;
...
            this._onClick = onClick;
            this._onOk = onOk;
            this._onCancel = onCancel;
...
            value: function _addCellClickEvent(el) {
...
                        // update temp date object with the date selected
                        me._sDialog.sDate = currentDate.clone();
                        if (me._onClick) {
                            me._onClick(me._sDialog.sDate);
                        }
                        me._fillText(subtitle, currentDate.year());
....

[jolic]

With this you didn't depend on an element and it's clearer for the user...
What do you think?

[jolic]

Maybe it would be nice to contribute the datepicker to https://github.com/tleunen/react-mdl

[puranjayjain]

@jolic i'll start a pr there in some time for the component (possibly two of them)

About the callbacks can you start a PR?

[puranjayjain]

@jolic also if possible can this callback solution be done in a way that we don't have any breaking changes?

Also, how does react mdl differ from material ui? Any ideas?

[PhilippeOberti]

hey guys, quick question: I'm using datetime picker in a project with Webpack. in my vendor.ts file I load moment and the datetime picker as follow

import 'moment';
import 'md-date-time-picker';

then in my angular2 component I'm using moment and the datetime picker like this

let moment = require('moment');
let mdDateTimePicker = require('md-date-time-picker');

From my angular2 component I can use moment no problem but as soon as I initialize the datetime picker

var dialog = new mdDateTimePicker.default({
    type: 'date'
});

it throws an exception

any idea?
thanks a lot!!

Philippe

[puranjayjain]

@filoucpp you need to configure webpack as done here:
https://webpack.github.io/docs/library-and-externals.html

or modify your require statements as

window.moment = require('moment');
const mdDateTimePicker = require('md-date-time-picker');

[PhilippeOberti]

thanks for the answer, the only way I got it working was to write this:

(<any> window).moment = require('moment');

once somewhere in the code, and then in every file that uses moment do this

declare var moment: any;

thanks for the help!!

[puranjayjain]

@filoucpp congrats it worked for you and thanks for posting the answer too! It would help a lot of people in the future 😄

[DenysVuika]

Could you please provide a clear example on using with code splitting and webpack? Tried numerous approaches and md-date-time-picker just does not work.

vendors.ts
css seems to be working:

import 'md-date-time-picker/dist/css/mdDateTimePicker.css';

not working

import 'md-date-time-picker';
import 'md-date-time-picker/dist/js/mdDateTimePicker.min.js';
require('md-date-time-picker');

Thanks in advance

[puranjayjain]

Hmm seems to be an issue

[DenysVuika]

Any updates on the issue?

[puranjayjain]

Cant say yet will try my best to release it asap.