Angularjs学习笔记3_datepicker

时间：2016-04-08 21:52:56 阅读：344 评论：0 收藏：0 [点我收藏+]

标签：

1.使用jquery-ui +angular

        app.directive(‘datepicker1‘, function() {
           return function(scope, element, attrs) {
               element.datepicker({
                   inline: true,
                   dateFormat: ‘dd.mm.yy‘,
                   onSelect: function(dateText) {
                       var modelPath = $(this).attr(‘ng-model‘);
                       //putObject(modelPath, scope, dateText);
                       scope.$apply();
                   }
               });
           }
       });
       app.directive(‘datepicker2‘, function() {
           return {
               restrict: ‘A‘,
               require : ‘ngModel‘,
               link : function (scope, element, attrs, ngModelCtrl) {
                   $(function(){
                       element.datepicker({
                           dateFormat:‘dd/mm/yy‘,
                           onSelect:function (date) {
                               scope.$apply(function () {
                                   ngModelCtrl.$setViewValue(date);
                               });
                           }
                       });
                   });
               }
           }
       });

2.使用 bootstrap + angular

    <div class="row">
       <section ng-controller="dateDemo" class="col-md-6" style="float:none; margin:5px auto; background:#fff; padding:5px;">
           //{{}} 双花括号为angular的取值表达式
           <pre class="">选定的日期是：<em>{{dt | date:‘fullDate‘}}</em></pre>
           <h4>在线：</h4>
           <section style="display:inline-block; min-height:240px;">
               <datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="wellwell-sm"></datepicker>
           </section>
           <br>//ng-model 绑定dt模块， min-date 最少日期 show-weeks= ture 显示周
           <h4>弹出：</h4>
           <div class="row">
               <div class="col-md-6">
                   <p class="input-group">
                       <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate"

                      max-date="‘2014-12-30‘" datepicker-options="dateOptions" date-disabled = "disabled(date,mode)" ng-required="true" close-text="Close">
                       <span class="input-group-btn">
                           <button type="button" class="btn btn-default" ng-click="open($event)">
                               <i class="glyphicon glyphicon-calendar"></i>
                           </button>
                       </span>
                   </p>
               </div>
           </div>
           <br>ng-options 循环添加option
           <div class="row">
               <div class="col-md-6">
                   <label for="">格式：</label>
                   <select name="" id="" class="form-control" ng-model="format" ng-options="f for f in formats"><option value=""></option></select>
               </div>
           </div>
           <hr>
           <div>
               <button type="button" class="btn btn-info btn-sm" ng-click="today()">今天</button> //一堆点击事件没什么好说的
               <button type="button" class="btn btn-sm btn-default" ng-click="dt = ‘2008-08-08‘">2008-08-08</button>
               <button type="button" class="btn btn-sm btn-danger" ng-click="clear()" >清除</button>
               <button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" tooltip="After today">闵日期</button>
           </div>
       </section>
   </div>

var app = angular.module(‘a8_8‘, [‘ui.bootstrap‘]) ;

        app.controller(‘dateDemo‘,function($scope){
           $scope.today = function(){ // 创建一个方法，
               $scope.dt = new Date(); // 定义一个属性来接收当天日期
           };
           $scope.today(); // 运行today方法
           $scope.clear = function(){ //当运行clear的时候将dt置为空
               $scope.dt = null;
           }
           $scope.open = function($event){ // 创建open方法。下面默认行为并将opened 设为true
               $event.preventDefault();
               $event.stopPropagation();
               $scope.opened = true;
           }
           $scope.disabled = function(date , mode){
               return (mode === ‘day‘ && (date.getDay() === 0 || date.getDay() === 6))
           }
           $scope.toggleMin = function(){
               $scope.minDate = $scope.minDate ? null : new Date(); //3元表达式，没啥好说的
           }
           $scope.toggleMin();
           $scope.dateOptions = {
               formatYear : ‘yy‘,
               startingDay : 1
           }
           $scope.formats = [‘dd-MMMM-yyyy‘,‘yyy/MM/dd‘,‘dd.MM.yyyy‘,‘shortDate‘]; //日期显示格式
           $scope.format = $scope.formats[0]; // 将formats的第0项设为默认显示格式
       });

Angularjs学习笔记3_datepicker

标签：

原文地址：http://www.cnblogs.com/dengzy/p/5361234.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行