Unable to import angular datepicker into my App


#1

I am trying to import the angular-ui-bootstrap datepicker into my app but I am not sure how to do so.

I am trying to follow this documentation: https://github.com/angular-ui/bootstrap

I am using ES6 and this is what I have got in place:

map/src/app.j

import angular from 'angular';

import timelineCtrl from './timeline.controller';
import timelineComp from '../../../components/angular-components/timeline.component.js';
import heatmapComp from '../../../components/angular-components/heatmap.component.js';
import heatmapHeaderDropdownComp from '../../../components/angular-components/heatmap-header-dropdown.component.js';
import heatmapHeaderComp from '../../../components/angular-components/heatmap-header.component.js';
import heatmapViewstate from '../../../components/angular-components/heatmap-viewstate.component.js';

import ppDatePicker from 'angular-ui-bootstrap/src/datepicker';

export default angular.module('peopleplannerHeatmap', [ppDatePicker])
  .component('ppHeatmapHeader', heatmapHeaderComp)
  .component('ppHeatmapHeaderDropdown', heatmapHeaderDropdownComp)
  .component('ppHeatmapViewstate', heatmapViewstate)
  .component('ppTimeline', timelineComp)
  .component('ppHeatmap', heatmapComp)
  .controller('app', timelineCtrl)

components/angular-components/heatmap-header.component.js

function headerCtrl () {
  const self = this;

  self.$onInit = () => {
    self.datePicker = {
      opened: false
    };

    console.log("## HEADER CONTROLLER ##");
    //console.log(ppDatePicker);

    self.targetDate = null;
    self.dateOptions = {
      showWeeks: 'false',
      formatYear: 'yyyy',
      startingDay: 1,
      altInputFormats : ['d!/M!/yyyy','dd/MM/yyyy']
    };

    self.openDatePicker = function() {
      self.datePicker.opened = true;
    };

    self.formats = ['dd, MMMM yyyy'];

    self.format = self.formats[0];

    self.uiConfig = {
      calendar:{
        firstDay: 1,
        timeFormat: 'HH:mm',
        dateFormat: 'ddmm',
        displayEventEnd: true
      }
    };

    self.changeDuration = () => {
      self.onDurationChange({
        duration: self.duration,
        zoom: self.zoom
      })
    };

    self.selections = ['option 1', 'option 2', 'option 3']; // TODO - create array of heatmap options for the dropdown
  }
}

export default {
  bindings: {
    duration: "<",
    zoom: "<",
    onDurationChange: "&"
  },
  controller: headerCtrl,
  template: `
      <div class="pp-header-container">
        <div class="pp-sch-header-item-input-label"><span class="pp-sch-label">Heatmap</span></div>
        <div class="heatmap-header pp-sch-header-item">
          <pp-heatmap-header-dropdown 
            selections="$ctrl.selections"
            on-selection-change="$ctrl.onSelectionChange()"></pp-heatmap-header-dropdown>
        </div>
        <div class="pp-sch-header-item-input-label"><span class="pp-sch-label">Date</span></div>
        <input type="text" 
               uib-datepicker="{{$ctrl.format}}" 
               ng-model="$ctrl.targetDate" 
               is-open="true" 
               datepicker-options="dateOptions" 
               class="heatmap-header pp-sch-header-item"
               ng-required="true" 
               close-text="Close" 
               alt-input-formats="altInputFormats"
               ng-change="$ctrl.gotoDate()"/>
        <div class="pp-sch-header-item-input-label"><span class="pp-sch-label">Zoom</span></div>
        <div class="heatmap-header pp-sch-header-item">
          <select ng-model="$ctrl.zoom" ng-change="$ctrl.changeDuration()">
              <option value="0">1</option>
              <option value="1">2</option>
              <option value="2">3</option>
              <option value="3">4</option>
              <option value="4">5</option>
              <option value="5">6</option>
              <option value="6">7</option>
          </select>
        </div>
        <div class="pp-sch-header-item-input-label"><span class="pp-sch-label">Duration</span></div>
        <div class="heatmap-header pp-sch-header-item">
          <select ng-model="$ctrl.duration" ng-change="$ctrl.changeDuration()">
            <option value="0">Day</option>
            <option value="1">1 week</option>
            <option value="2">2 week</option>
            <option value="3">3 week</option>
            <option value="4">4 week</option>
            <option value="5">5 week</option>
          </select>
        </div>
      </div>
  `
}

In the above code I would like to get the datepicker working or at list showing a calendar. So how do I get that to work?

This is my webpack.config:

const webpack = require('webpack');
const path = require('path');
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: ['whatwg-fetch', './heatmap/src/index.js'],
  output: {
    filename: 'heatmap.js',
    path: '/heatmap/dist',
    publicPath: '/dist/'
  },
  devtool: 'cheap-eval-source-map',
  resolve: {
    alias: {
      constants: resolve('config/constants-develop')
    }
  },
  module: {
    loaders: [
      {
        test: /\.js?$/,
        loader: 'babel-loader?cacheDirectory',
        include: [
          resolve( 'heatmap'),
          resolve( 'components'),
          resolve( 'node_modules/access-timeline-control')
        ]
      }, {
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader?sourceMaps',
        include: [
          resolve( 'heatmap'),
          resolve( 'components'),
          resolve( 'node_modules/access-timeline-control')
        ]
      }, {
        test: /\.js$/,
        loader: 'ng-annotate-loader',
        include: [
          resolve( 'heatmap'),
          resolve( 'components')
        ]
      }, {
        test: require.resolve('access-js-plumb'),
        loaders: [
          'imports-loader?this=>window',
          'script-loader'
        ]
      }, {
        test: /\.css$/,
        loaders: 'css-loader'
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      mangle: true
      // sourceMap: options.devtool && (options.devtool.indexOf("sourcemap") >= 0 || options.devtool.indexOf("source-map") >= 0)
    }),
    // new BundleAnalyzerPlugin()
  ]
};