angular使用ngx-bootstrap的datepicker组件并实现本地化/国际化

datepicker组件官方api: http://ngx-bootstrap.com/#/datepicker

step1. 安装 ngx-bootstrap  :

npm install  ngx-bootstrap --save

step2 .引入相关文件:

在angular.json中的styles中引入相关的css文件,根据需要引入相应得文件

 "styles": [
              "node_modules/ngx-bootstrap/datepicker/bs-datepicker.scss"
            ],

在module文件中引入组件ts文件

import {BsDatepickerModule} from ‘ngx-bootstrap/datepicker‘;
import {defineLocale} from ‘ngx-bootstrap/chronos‘;
import {zhCnLocale} from ‘ngx-bootstrap/locale‘;

defineLocale(‘zh-cn‘, zhCnLocale);// 日历显示中文

@NgModule({
  imports: [
      ...
    BsDatepickerModule.forRoot()
  ],
  declarations: [...],
  providers: [...]
})

组件component中

import {BsLocaleService,BsDatepickerConfig} from ‘ngx-bootstrap/datepicker‘;

export class InsuranceBuyComponent implements OnInit {
 bsConfig: Partial<BsDatepickerConfig>;
 locale = ‘zh-cn‘;

  constructor(private fb: FormBuilder,
              private localeService: BsLocaleService) {
  }
 ngOnInit() {
//日期配置
  this.bsConfig = Object.assign({}, {dateInputFormat: ‘YYYY-MM-DD‘, showWeekNumbers: false});//日期使用中文
 this.localeService.use(this.locale);

}
}

在html中

<input type="text"
      placeholder="请选择生效日期"
      bsDatepicker
      formControlName="effectiveTime"
      placement="bottom"[minDate]="effectiveMinDate"
      [maxDate]="effectiveMaxDate"
      [bsConfig]="bsConfig">

原文地址:https://www.cnblogs.com/web-wangmeng/p/9267721.html

时间: 2024-11-13 14:40:28

angular使用ngx-bootstrap的datepicker组件并实现本地化/国际化的相关文章

Angular 中引入BootStrap

由于Bootstrap官方目前并没有发布Angular的相关类库进行支持,当前Angular只能引用使用Bootstrap相关的样式.无法使用Bootstrap自带的脚本逻辑.以下以Angular7和Bootsrap4.2为例进行demo验证. 环境搭建 首先执行以下两个命令创建angular项目和组件 ng new AngularDemo //创建项目 ng g c bootstrapdemo // 创建组件 然后执行 npm install bootstrap // 安装最新的bootstr

bootstrap轮播组件,大屏幕图片居中效果

在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中 视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中效果不同,大屏效果非常糟糕.比如 这样一张图片, 为了图片自适应设置width=100%,在宽1920px下显示效果是这样的 显然,因为图片设置了100%的宽度,其大部分内容被截去,显示非常糟糕. 后来想了想.有没有办法可以让图片真正的自适应呢并且居中呢,于是想到了css3背景图片属性backgro

bootstrap 之 列表组件使用

列表是几乎所有网站都会用到的一个组件,正好bootstrap也给我们提供了这个组件的样式,下面我给大家简单介绍一下bootstrap中的列表组件的用法! 首先,重提一下引用bootstrap的核心文件的问题,以免有些刚入手的朋友忘了这个. 在页面的开头,先引用bootstrap的核心文件(css,js)等. <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel='stylesheet' href='css/bootstrap.min.css' /> &l

Yii中单独为module加载Bootstrap或其他组件的4种方法

Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮.功能完备的网站.但是有时候我们网站前台并不需要Bootstrap,只要管理后台使用Bootstrap,那么该如何单独为一个module加载Bootstrap呢? 这里有4中方法来实现这个:1.在应用的配置文件中添加如下内容 (protected/config/main.php):     'modules'=>array(         'admin'=>array(             'preload'

BootStrap Accordion手风琴组件可以全部展开的方法

Bootstrap的手风琴组件是非常方便的一个js组件,但是具体在用到的时候可能会引起一些不要方便的地方,比如像同时展开多个标题. 官网给的代码如下: <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default">

ivew select组件 DatePicker组件的清空

<Form ref="formInline" :model="formInline" :rules="ruleInline" inline> <FormItem label="用户类型:" :label-width="80"> <Select clearable ref="oselect" v-model="formInline.original&

Angular中使用bootstrap样式

Angular中使用bootstrap样式 Angular中引入bootstrap的方法 ? 方法1:在Angular.json中的styles数组中添加bootstrap路径 如下所示: "styles": [ "src/styles.css", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ] 这里需要注意路径问题,不同Angular版本下,Angular.json的位置可能有所不

view组件 DatePicker---- 点击重置按钮,无法正常将DatePicker组件的时间范围清空

背景 使用iview组件 DatePicker,在浏览器上选择日期后,点击文本框的“x”是可以重置的,但是u3d那边重置无效,第一次选择日期点导出,成功后进行重置,再次选择日期时点击无效,这个时好时不好的. 解决方案:使用“ref”属性 这里的formDate就代表DatePicker组件 我将这句代码加在成功导出后,便可以重置了,第二次选择日期也可以正常选择了 参考网站:https://blog.csdn.net/qq_38233172/article/details/98491684 原文地

angular 使用 ui.bootstrap 弹窗

在下才疏学浅,不足之处,请各位指正. 接下来介绍使用angular的组件,将页面上input的数据显示出来,直接上代码 <!DOCTYPE html> <html lang="en" ng-app="indexApp"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="styleshe