四、时间控件datepicker

2017-04-18 本文已影响522人幸福幸福幸福

我下面这个例子的需求是这样：

需要一个开始时间，一个结束时间；
初始化状态要求两个时间都为空；
开始时间不能大于结束时间，两者都不大于当前时间

中文
引的cdn资源，可以直接复制测试看效果

<!DOCTYPE html>
  <html lang="en" ng-app="myApp">
  <head>
      <meta charset="UTF-8">
      <title>datepicker</title>
      <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body ng-controller="myCtrl">
  
  <p class="input-group">
      <input type="text" class="form-control" uib-datepicker-popup readonly ng-model="dateOption.startTime" ng-change="updateMin()" is-open="startPopupOpened"
             datepicker-options="startDateOptions" ng-required="true" close-text="关闭" current-text="今天"/>
      <span class="input-group-btn">
                      <button type="button" class="btn btn-default" ng-click="startOpen()"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
  </p>
  
  <p class="input-group">
      <input type="text" class="form-control" uib-datepicker-popup readonly ng-model="dateOption.endTime" ng-change="updateMax()" is-open="endPopupOpened"
             datepicker-options="endDateOptions" ng-required="true" close-text="关闭" current-text="今天"/>
      <span class="input-group-btn">
                      <button type="button" class="btn btn-default" ng-click="endOpen()"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
  </p>
  <button class="btn btn-default" ng-click="sear()">button</button>
  <script src="https://cdn.bootcss.com/angular.js/1.5.5/angular.min.js"></script>
  <script src="https://cdn.bootcss.com/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
  <script src="//cdn.bootcss.com/angular.js/1.5.5/i18n/angular-locale_zh-cn.js"></script>
  <script>
      angular.module('myApp', ['ui.bootstrap']).controller('myCtrl', function ($scope)
      {
          //初始化查询条件
          $scope.dateOption = {
              startTime: '',
              endTime: '',
          };
     
          //时间选择器配置
          $scope.startDateOptions = {
              formatYear: 'yy',
              maxDate: new Date(),//设置可选时间范围
              startingDay: 1
          };
          $scope.endDateOptions = {
              formatYear: 'yy',
              maxDate: new Date(),
              startingDay: 1
          };
          //当有一个表单选择时间改变时，重置另一个的时间范围
          $scope.updateMin = function(){
              $scope.endDateOptions.minDate = $scope.dateOption.startTime;
          };
          $scope.updateMax = function(){
              $scope.startDateOptions.maxDate = $scope.dateOption.endTime;
          };
          
          //展开隐藏设置
          $scope.startOpen = function() {
                  $scope.startPopupOpened = true;
          };
          $scope.endOpen = function() {
                  $scope.endPopupOpened = true;
          };
          $scope.startPopupOpened = false;
          $scope.endPopupOpened = false;
          
  //        $scope.sear = function(){
  //            console.log(new Date($scope.dateOption.startTime).getTime());
  //            console.log(new Date($scope.dateOption.endTime).getTime());
  //        }
      });
  </script>
  </body>
  </html>

必须引入中文插件angular-locale_zh_cn.js，
uib-datepicker-popup控件可以使用的属性有：

属性	默认值	备注
alt-input-formats	[]	手动输入日期时可接受的格式
clear-text	clear	清楚按钮的文本
close-on-date-selection	true	选择一个日期后是否关闭面板
close-text	close	关闭按钮的文本
current-text	today	今天按钮的文本
datepicker-append-to-body	false	是否将日期面板放在body元素内
datepicker-options		配置datepicker控件，在控制器里定义这个对象（后面会详细列出这个对象的参数）
datepicker-popup-template-url	uib/template/datepickerPopup/popup.html	模板链接，用-tpl的话使用默认即可
is-open	false	是否显示日期面板
on-open-focus	true	打开日期面板是否获取焦点
show-button-bar	true	是否在日期面板下方显示今天、关闭等按钮
type	true	可以改为date/datetime-local/month，这样会改变日期面板的日期格式化。
popup-placement	true	在位置前加一个auto,表示日期面板会定位在它最近一个可以滚动的父元素中.可以设置的位置有:top top-left top-right bottom bottom-left bottom-right left left-top left-bottom right right-top right-bottom
uib-datepicker-popup	true	显示日期的格式。可使用的格式见上面的列表。

datepicker-options参数

属性	默认值	备注
customClass		一个可选的函数，设置日期面板中每个日期的样式。传入参数为一个json对象{date: obj1, mode: obj2}，返回值为类的名字
dateDisabled		一个可选的函数，设置日期面板中每个日期是否可选。传入参数为一个json对象{date: obj1, mode: obj2}，返回值为bool类型
datepickerMode	day	可设置为day,month,year。表示控件的选择模式
formatDay	dd	天数的格式化形式
formatMonth	MMMM	月份的格式化形式
formatYear	yyyy	年份的格式化形式
formatDayHeader	EEE	星期的格式化形式
formatDayTitle	MMMM yyyy	按天数选择日期时，面板中当前月份和年份的格式化形式（显示为：六月 2016 的地方）
formatMonthTitle	yyyy	按月份选择日期时，面板中当前年份的格式化形式
initDate	null	初始化日期
maxDate	null	可选择的最大日期（必须是Javascript日期类型）
maxMode	year	可选择的最大日期模式
minDate	null	可选择的最小日期（必须是Javascript日期类型）
minMode	day	可选择的最小日期模式
shortcutPropagation	false	是否禁用键盘事件传播
showWeeks	true	是否显示面板中的日期是当年的第几周
startingDay	$locale.DATETIME_FORMATS.FIRSTDAYOFWEEK	一个星期从周几开始。可设置为0到6的数字，0表示周日，6表示周六
yearRows	4	选择年份时显示多少行
yearColumns	5	选择年份时显示多少列

http://www.cnblogs.com/pilixiami/p/5611346.html
http://www.cnblogs.com/echo2016/p/5416572.html

四、时间控件datepicker

猜你喜欢

热点阅读