angular-material daterange-picker

作者:frank 发表日期:2015-08-20 16:30:45 更新日期:2016-08-15 20:03:28 分类:猿文色

摘要

基于angular material的日期段选择控件,也可以只选择日期。

正文

配置如下:

angular
  .module('demoWan', [
    'ngMaterial',
    'fc.dateRange',
    'fc.wanSelect'
  ]).controller('DemoCtrl', DemoCtrl);

function DemoCtrl($scope) {
  $scope.startDate = "2015-07-07";
  $scope.endDate = "2015-07-27";
  $scope.dateLength = 0;

  $scope.sourceData = ["中国", "日本", "蒙古", "北韩", "朝鲜", "韩国", "缅甸", "文莱", "柬埔寨", "东帝汶", "印度尼西亚", "寮国", "老挝", "马来西亚", "菲律宾", "新加坡", "泰国", "越南"];
  $scope.selectedData = [];

  $scope.selectChanged = function(){
    jQuery("#wan-selected-data").html($scope.selectedData.join(','));
  };
}

HTML文件如下:

<div class="wrapper" ng-controller="DemoCtrl">
  <daterange-picker date-lang="cn" 
                    date-type="range"
                    start-date="startDate" 
                    end-date="endDate" 
                    date-length="dateLength" 
                    max-date="2015-08-23" 
                    min-date="2010-07-09" 
                    date-label="选择日期段:">
  </daterange-picker>
</div>

Options:

所有日期格式均为 YYYY-MM-DD

date-lang: string,默认值en,设为cn即为中文
date-type: string,默认为日期选择,设为range即为日期段
start-date: 选中的开始日期
end-date: 选中的截止日期
date-length: 日期长度
max-date: 所能选的最大日期
min-date: 所能选的最小日期
date-label: label
shoule-refresh: 如果起始日期或者截止日期可能会在组件外部被更改,则可将此字段设为true,每次选择日期前都会自动刷新组件
confirm-event: 选择好时间后点击确认按钮的回调函数,会传入开始时间和结束时间两个参数

DEMO