2017-07-15 73 views
2

我想添加這些datepickers:https://eonasdan.github.io/bootstrap-datetimepicker/Installing/但這裏不是一個如何將它添加到Angular 4項目的說明。我怎樣才能做到這一點?如何添加Bootstrap 3 datepicker到Angular 4項目

+0

用[** ngBootstrap **](https://ng-bootstrap.github.io/#/components/datepicker/)日期picker – Aravind

+1

是的,但我現在使用bootstrap 3,如果我添加ngBootstrap,我所有的樣式都會崩潰。 – user

+0

1)你使用npm嗎?如果是的話,它非常容易,2)修改system.js 3)直接添加js,css文件到index.html,你更喜歡哪一個? – nivas

回答

2

通過NPM安裝:

  • 自舉
  • eonasdan的自舉-的DateTimePicker-NPM

添加在 '角cli.json' 配置:

 "styles": [ 
     "../node_modules/bootstrap/dist/css/bootstrap.min.css"   
     "../node_modules/eonasdan-bootstrap-datetimepicker-npm/build/css/bootstrap-datetimepicker.min.css", 
     ], 
     "scripts": [ 
     "../node_modules/jquery/dist/jquery.min.js", 
     "../node_modules/moment/min/moment.min.js", 
     "../node_modules/bootstrap/dist/js/bootstrap.min.js", 
     "../node_modules/eonasdan-bootstrap-datetimepicker-npm/build/js/bootstrap-datetimepicker.min.js" 
     ], 

然後根據文檔https://eonasdan.github.io/bootstrap-datetimepicker/使用它。

請注意,您的日曆容器必須具有位置相對位置,且不能有隱藏的溢出位置,否則當您嘗試選擇值時無法看到日曆對話框。