如何将Bootstrap 3 datepicker添加到Angular 4项目中

时间:2017-07-15 19:48:39

标签: angular twitter-bootstrap-3

我想添加这些日期选择器:https://eonasdan.github.io/bootstrap-datetimepicker/Installing/但这里不是如何将它添加到Angular 4项目的说明。我怎么能这样做?

2 个答案:

答案 0 :(得分:3)

我发现这很有用;它是原始eonasdan-bootstrap-datetimepicker用于角度的日期选择器的包装器

https://github.com/atais/ng2-eonasdan-datetimepicker

答案 1 :(得分:2)

通过NPM安装:

  • 自举
  • eonasdan的自举-的DateTimePicker-NPM

添加' angular-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/使用它。

请注意,您的日历容器必须具有相对位置且不能隐藏溢出,或者当您尝试选择值时无法看到日历对话框。