你的位置:首页 > 软件开发 > Java > AngularJS datatimepicker

AngularJS datatimepicker

发布时间:2016-04-15 17:00:58
本文内容 项目结构 AngularJS datepicker AngularJS+jQueryUI datetimepicker Github Demo 项目结构 图 1 项目结构 AngularJS datepicker 图 2 Angular-ui-bo ...

AngularJS datatimepicker

本文内容

  • 项目结构
  • AngularJS datepicker
  • AngularJS+jQueryUI datetimepicker

Github Demo

项目结构


AngularJS datatimepicker

图 1 项目结构

AngularJS datepicker


AngularJS datatimepicker

图 2 Angular-ui-bootstrap datepicker

index.html

<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Angular Bootstrap - Date Picker Demo</title>
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.css">
</head>
<body ng-app="myApp">
  <div class="container" ng-controller="dateDemo">
    <div class="row">
      <div class="col-md-4">
        <div class="h2">Angular 日期控件</div>
      </div>
    </div>
    <div class="row">
      <h3>选择日期:{{myDate | date:'fullDate'}}</h3>
    </div>
    <div class="row">
      <div class="col-md-4" style="background: #fff;">
        <h4>內置日期</h4>
        <!-- angular datepicker -->
        <datepicker ng-model="myDate" min-date="minDate" show-weeks="false"
          class="wellwell-sm"></datepicker>
        <!-- 说明:ng-model 绑定dt模块 , min-date 最少日期,show-weeks= ture 显示周 -->
      </div>
      <div class="col-md-4">
        <div class="row">
          <h4>非內置日期</h4>
          <p class="input-group">
            <input type="text" class="form-control"
              datepicker-popup="{{myDefaultDateFormat}}" ng-model="myDate"
              is-open="opened" min-date="minDate" max-date="'2016-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 class="row">
          <label for="">日期格式</label> <select class="form-control"
            ng-model="myDefaultDateFormat"
            ng-options="f for f in myDateformats"><option value=""></option></select>
        </div>
      </div>
    </div>
    <hr>
    <div class="row">
      <div class="col-md-9">
        <button type="button" class="btn btn-info btn-sm" ng-click="today()">今天</button>
        <button type="button" class="btn btn-sm btn-default"
          ng-click="myDate='2008-08-08'" tooltip="Set date to 2008-08-08">设置</button>
        <button type="button" class="btn btn-sm btn-danger"
          ng-click="clear()" tooltip="Clear">清除</button>
        <button type="button" class="btn btn-sm btn-default"
          ng-click="toggleMin()" tooltip="After today restriction">限制</button>
      </div>
    </div>
  </div>
 
  <script src='/images/loading.gif' data-original="vendor/angular/angular.js"></script>
  <script
    src='/images/loading.gif' data-original="http://cdn.bootcss.com/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>
  <script src='/images/loading.gif' data-original="src/js/mydate.js"></script>
</body>
</html>

原标题:AngularJS datatimepicker

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。