angularjs如何使用时间插件

最新推荐文章于 2024-08-13 10:53:05 发布

达芬绿瓶小

最新推荐文章于 2024-08-13 10:53:05 发布

阅读量2.4k

点赞数

本文链接：https://blog.csdn.net/weixin_40690385/article/details/81509592

版权

1.背景介绍

日历在网页中的应用有很多，比如说后台的搜索功能，备忘录功能等等。要实现日历功能，有很多插件可以实现，利用angular实现相关的日历功能的插件也就只有几个，
比如说ui-jquery,angular-datepicker,ui-bootstrap等等，
这些都可以实现部分功能的日历插件；因为做任务的时候用的是ui-bootstrap的日历插件，所以今天主要讲ui-bootstrap的日历插件

2.知识剖析

引入库：ui-bootstrap-tpls.js

在ui-bootstrap这个日历插件中，有以下相关属性。

uib-datepicker-popup :显示日期格式
ng-model:绑定当前时间
is-open：控制日历插件是否打开
close-text：关闭按钮的文本
clear-text: 清空按钮的文本
current-text：返回当前日期的文本
alt-input-formats：手动输入日期时可接受的格式

3.常见问题

如何实现设置开始日期和结束日期

4.解决方案

https://v.qq.com/x/page/u06713a9hrz.html

5.代码实战

 <html ng-app="ui.bootstrap.demo">
    <head>
          <meta charset="UTF-8">
          <link rel="stylesheet" href="css/bootstrap.min.css">
          <script src="js/angular/angular.min.js"></script>
              <script src="js/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>
          <!-- <script src="js/angular-locale_zh-cn.js"></script> -->//中文插件
          <script>
            angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('Datepicker', function($scope) {
              //基础设置
              $scope.format = "yyyy/MM/dd";
              $scope.altInputFormats = ['yyyy/M!/d!'];
              //第一个日历
              $scope.dat1 = new Date();
              $scope.popup1 = {
                opened: false
              };
              $scope.open1 = function() {
                $scope.popup1.opened = true;
              };

            //第二个日历
              $scope.dat2 = new Date();
              $scope.popup2 = {
                opened: false
              };
              $scope.open2 = function() {
                $scope.popup2.opened = true;
              };
            });
          </script>
        </head>

        <body ng-controller="Datepicker">
          <div>
            <p class="form-group">
              <div class="input-group">
                <input type="text" class="form-control"
                uib-datepicker-popup="{{format}}"
                ng-model="dat1"
                is-open="popup1.opened"
                close-text="关闭" clear-text="清空"
                current-text="今天"
                alt-input-formats="altInputFormats" />
          <!--逐条分析
           uib-datepicker-popup yyyy-MM-dd 显示日期格式
           ng-model="dat1"  绑定今天时间
           is-open="popup1.opened" 控制时间控件开启和关闭
           close-text/clear-text/current-text  按钮组的文本
           alt-input-formats    手动输入日期时可接受的格式
           -->
                <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="open1()">
                  <i class="glyphicon glyphicon-calendar"></i></button>
                </span>
              </div>
            </p>
          </div>
          <!--第二个日历-->
          <div>
            <p class="form-group">
              <div class="input-group">
                <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dat2" is-open="popup2.opened" close-text="关闭" clear-text="清空" current-text="今天" alt-input-formats="altInputFormats" />
                <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
              </div>
            </p>
          </div>
        </body>
        </html>