idsp-web-seed2-datepicker

idsp-web-seed2-datepicker

日期选择器

安装方法

1. 下载程序包

npm i idsp-web-seed2-datepicker --save

2. 配置文件依赖

找到 index.html 文件的systemjs配置,加入 idsp-web-seed2-datepicker 配置

SystemJS.config({
    transpiler: 'ts',
    typescriptOptions: {
        // ...
    },
    packages: {
        //...
       
        // 组件设置 
        'idsp-web-seed2-datepicker': {main: 'src/datepicker.ts'},
        'daterangepicker': {main: 'daterangepicker.js', format: 'cjs'},
        'moment': {main: 'moment.js'},
    
        "src": {
            //...
        }
    },
    meta: {
        '*.less': {loader: 'less'},
        '*.css': {loader: 'css'},
        // ...
    },
    
    map: {
        // ...
        'idsp-web-seed2-datepicker': 'node_modules/idsp-web-seed2-datepicker',
        'daterangepicker': 'node_modules/bootstrap-daterangepicker',
        'moment': 'node_modules/moment',
    }
});

3. 在项目src/common/directives/directives.ts中依赖组件

//...
import datepicker from "idsp-web-seed2-datepicker";

export const mod = module('directives', [...others, datepicker]);

4. 接下来就可以使用日期组件了

<datepicker 
  [ng-model="Ctrl.time"]
  [range-mode]
  [option="Ctrl.dateOption"]
  [start-date="Ctrl.startDate"]
  [end-date="Ctrl.endDate"]
  >
</datepicker>

@Route({
  ...
  controllerAs : 'Ctrl'
})
@Controller
exports class PageCtrl{
  public dateOption:DatepickerOption = {
     singleDatePicker : false,
     ...
     locale : {
       ...
     }
  };
  
  public time:string;
  public startDate:string;
  public endDate:string;
  
  constructor(){
     
  }
}

指令属性参数

DatepickerOption 参数