Question

我正在尝试将angular-ui-bootstrap datepicker导入我的应用程序，但我不知道该怎么做。

我正在使用ES6，这就是我所拥有的：

地图/ SRC / app.js

import angular from 'angular';
import timeCtrl from './time.controller';
import timeComp from '../../../components/angular-components/time.component.js';
import mapComp from '../../../components/angular-components/map.component.js';
import mapHeaderComp from '../../../components/angular-components/map-header.component.js';
import mapViewstate from '../../../components/angular-components/map-viewstate.component.js';

export default angular.module('mymap', [])
  .component('ppmapHeader', mapHeaderComp)
  .component('ppmapViewstate', mapViewstate)
  .component('pptime', timeComp)
  .component('ppmap', mapComp)
  .controller('app', timeCtrl)

组件/角部件/ map.component.js

  export default {
    bindings: {
      ctrl: "<"
    },
    template: `
    <div>
      <div style="position: relative; height: 750px">
          <pp-map-viewstate
             viewstate="$ctrl.ctrl.viewstate"
             on-viewstate-change="$ctrl.ctrl.onViewstateChange(type, args)">
          </pp-map-viewstate>
      </div>
    </div>
    `
   }

组件/角部件/地图viewstate.component.js＆＃39;

    function viewStateCtrl () {
      const self = this

        self.$onInit = () => {
          const viewstate = self.viewstate

          self.zoom = viewstate.zoom
          self.duration = viewstate.duration

          self.onDurationChange = (duration, zoom) => {
            self.onViewstateChange({
             type: "duration",
             args: {
              duration,
              zoom
             }
            });
          }
        }

     }

 export default {
   bindings: {
     viewstate: "<",
     onViewstateChange: "&"
   },
   controller: viewStateCtrl,
   template: `
     <pp-map-header
       zoom="$ctrl.zoom"
       duration="$ctrl.duration"
       on-duration-change="$ctrl.onDurationChange(duration, zoom)">
     </pp-map-header>
   `
 }

组件/角部件/地图header.component.js

function headerCtrl () {
  const self = this;

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

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

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">Date</span></div>
    <input class="map-header pp-sch-header-item"
         type="text"
         uib-datepicker-popup="{{$ctrl.format}}"
         ng-model="$ctrl.targetDate"
         ng-click="$ctrl.openDatePicker()"
         is-open="$ctrl.datePicker.opened"
         datepicker-options="$ctrl.dateOptions"
         show-button-bar="false"
         ng-required="false"
         close-text="Close" alt-input-formats="altInputFormats"
         ng-change="$ctrl.gotoDate()" readonly />
    <div class="pp-sch-header-item-input-label"><span class="pp-sch-label">Zoom</span></div>
    <div class="map-header pp-sch-header-item">
      <select ng-model="$ctrl.zoom" ng-change="$ctrl.changeDuration()">
          <option value="0">1</option>
          <option value="1">2</option>
      </select>
    </div>
    <div class="pp-sch-header-item-input-label"><span class="pp-sch-label">Duration</span></div>
    <div class="map-header pp-sch-header-item">
    <select class="pp-sch-filter-container-col-1"  ng-model="$ctrl.duration" ng-change="$ctrl.changeDuration()">
      <option value="0">Day</option>
      <option value="1">1 week</option>
    </select>
  </div>
  </div>
  `
}

在上面的代码中，我想让datepicker工作或在列表中显示日历。那么我该如何让它工作？ menu bar

我已经通过节点安装了bootstrap：

node modules

Answer 1

您需要从 node_modules / dist 文件夹中导入带有模板版本（ui-bootstrap-tpls-2.5.0.min.js）的ui-bootstrap。

然后您可以将其注入您的app模块

angular.module('mymap', [ui.bootstrap])

您可以获得full installation details on their website。

Answer 2

我设法最终解决了这个问题 - 我一点一点地设法让日历显示但是CSS丢失了所以我不得不安装： CSS-装载机网址装载机文件加载器。

我已将此导入添加到我的app.js

中

import Bootstrap from '../../../node_modules/bootstrap/dist/css/bootstrap.css'

然后还使用heatmap-header.component.js文件中的div更改了用于日历的输入元素，如下所示：

<div uib-datepicker 
         ng-model="$ctrl.targetDate" 
         is-open="$ctrl.datePicker.opened" 
         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>

除了上述内容之外，我还必须将新节点模块添加到webpack配置中，如下所示：

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: {
  ...
  },
  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: /\.css$/,
        loaders: 'style-loader!css-loader'
      },
      {
        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url-loader?limit=10000&mimetype=application/font-woff'
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file-loader'
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
      }
    ]
  },
  plugins: [
  ...
  ]
};

希望这可以帮助其他有类似问题的人 - 感谢所有人的帮助;）

无法将角度datepicker导入我的应用程序

2 个答案: