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

指令属性参数

参数	类型	描述
option (可选)	DatepickerOption	用来设置日期组件
ng-model (可选)	String	绑定日期组件的值
range-mode (可选)		启用范围选择器模式
start-date (可选)	String	绑定开始时间的值
end-date (可选)	String	绑定结束时间的值

DatepickerOption 参数

参数	类型	描述
singleDatePicker (可选)	Boolean	是否启用单日期选择器模式默认 true,设置为false时和使用 `range-mode` 一样效果
autoApply (可选)	Boolean	是否自动应用选择 default : true
showDropdowns (可选)	Boolean	是否显示下拉框来选择年和月 default : true
startDate (可选)	String | Date | Moment	设置开始日期
endDate (可选)	String | Date | Moment	设置结束日期
minDate (可选)	String | Date | Moment	设置可选择最小日期
maxDate (可选)	String | Date | Moment	设置可选择最大日期
dateLimit.days (可选)	Number	设置日期范围最大间隔天数
timePicker (可选)	Boolean	是否显示时间选择(时分秒选择)
timePickerIncrement (可选)	Number	time 选择递增数
timePicker24Hour (可选)	Boolean	时间选择模式为24小时模式
opens (可选)	'left'|'right'|'center'	设置日期组件打开方向 default : left
parentEl (可选)	String | Element | JQuery	渲染模板到目标 default : 'body'
locale.format (可选)	String	时间格式化模板 default : 'YYYY-MM-DD'
locale.separator (可选)	String	开始时间和结束时间的拼接字符串 default : ' - '