mirror of
https://github.com/HackPlan/angular-datepicker.git
synced 2026-04-25 20:35:47 +08:00
178 lines
4.2 KiB
HTML
178 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<title></title>
|
|
<meta name="description" content="">
|
|
<meta name="viewport" content="width=device-width">
|
|
<!-- build:css styles/main.css -->
|
|
<!-- <link rel="stylesheet" href="styles/bootstrap.css"> -->
|
|
<link rel="stylesheet" href="styles/style.css"/>
|
|
<!-- endbuild -->
|
|
<link rel="stylesheet" href="../dist/index.css"/>
|
|
</head>
|
|
<body ng-app="sample">
|
|
<div class="row-fluid">
|
|
<div class="span6">
|
|
<h2>Calendar</h2>
|
|
|
|
<div>
|
|
<h3>default views</h3>
|
|
|
|
<h5>year</h5>
|
|
|
|
<div date-picker="start" view="year"></div>
|
|
|
|
<h5>month</h5>
|
|
|
|
<div date-picker="start" view="month"></div>
|
|
|
|
<h5>date</h5>
|
|
|
|
<div date-picker="start" view="date"></div>
|
|
|
|
<h5>hours</h5>
|
|
|
|
<div date-picker="start" view="hours"></div>
|
|
|
|
<h5>minutes</h5>
|
|
|
|
<div date-picker="start" view="minutes"></div>
|
|
</div>
|
|
|
|
|
|
<div>
|
|
<h3>min views</h3>
|
|
|
|
<h5>year</h5>
|
|
|
|
<div date-picker="start" min-view="year"></div>
|
|
|
|
<h5>month</h5>
|
|
|
|
<div date-picker="start" min-view="month"></div>
|
|
|
|
<h5>date</h5>
|
|
|
|
<div date-picker="start" min-view="date"></div>
|
|
|
|
<h5>hours</h5>
|
|
|
|
<div date-picker="start" min-view="hours"></div>
|
|
|
|
<h5>minutes</h5>
|
|
|
|
<div date-picker="start" min-view="minutes"></div>
|
|
</div>
|
|
|
|
|
|
<div>
|
|
<h3>max views</h3>
|
|
|
|
<h5>year</h5>
|
|
|
|
<div date-picker="start" max-view="year"></div>
|
|
|
|
<h5>month</h5>
|
|
|
|
<div date-picker="start" max-view="month"></div>
|
|
|
|
<h5>date</h5>
|
|
|
|
<div date-picker="start" max-view="date"></div>
|
|
|
|
<h5>hours</h5>
|
|
|
|
<div date-picker="start" max-view="hours"></div>
|
|
|
|
<h5>maxutes</h5>
|
|
|
|
<div date-picker="start" max-view="minutes"></div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3>max & min views</h3>
|
|
|
|
<h5>time</h5>
|
|
|
|
<div date-picker="start" max-view="hours" min-view="minutes"></div>
|
|
|
|
<h5>date</h5>
|
|
|
|
<div date-picker="start" max-view="year" min-view="date"></div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="span6">
|
|
<h3>Input</h3>
|
|
<h5>default</h5>
|
|
<input type="text" date-time ng-model="start" required="true" view="hours" partial="true">
|
|
|
|
<h3>Input with append</h3>
|
|
<h5>default</h5>
|
|
|
|
<div class="input-append input-prepend" date-time-append>
|
|
<span class="add-on"><i class="icon-calendar"></i></span>
|
|
<input type="text" date-time ng-model="start" required="true" view="hours">
|
|
<span class="add-on"><i class="icon-calendar"></i></span>
|
|
</div>
|
|
<h3>Input with prepend</h3>
|
|
<h5>default</h5>
|
|
|
|
<div class="input-prepend" date-time-append>
|
|
<span class="add-on"><i class="icon-calendar"></i></span>
|
|
<input type="text" date-time ng-model="start" required="true" view="hours">
|
|
</div>
|
|
|
|
<h5>Input format</h5>
|
|
<!--<input type="datetime" date-time ng-model="end" hours format="short">-->
|
|
<h5>A button</h5>
|
|
|
|
<div class="dropdown">
|
|
<a class="dropdown-toggle btn btn-danger">
|
|
pick a date: {{(date|date)}}
|
|
</a>
|
|
|
|
<div class="dropdown-menu" ng-click="$event.preventDefault();$event.stopPropagation()">
|
|
<div date-picker="date"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h5>Date range</h5>
|
|
|
|
<div date-range start="a" end="b" style="position: relative; z-index:0"></div>
|
|
<h5>Date range button</h5>
|
|
|
|
<div class="dropdown">
|
|
<a class="dropdown-toggle btn btn-danger">
|
|
{{(a|date)||"pick start"}} - {{(b|date)||"pick end"}}
|
|
</a>
|
|
|
|
<div class="dropdown-menu" ng-click="$event.preventDefault();$event.stopPropagation()">
|
|
<div date-range start="a" end="b"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap-tpls.min.js"></script>
|
|
<script src="components/moment/moment.js"></script>
|
|
<!-- build:js module.min.js -->
|
|
<script src="scripts/datePicker.js"></script>
|
|
<script src="scripts/dateRange.js"></script>
|
|
<script src="scripts/input.js"></script>
|
|
<script src="scripts/moment.js"></script>
|
|
<!-- endbuild -->
|
|
<script>
|
|
angular.module('sample', ['datePicker', 'ui.bootstrap']);
|
|
</script>
|
|
</body>
|
|
</html>
|