angular-js-bootstrap-datetimepicker/index.html at master · eveyeti/angular-js-bootstrap-datetimepicker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!doctype html>
<html ng-app="plunker">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.0.js"></script>
    <script src="example.js"></script>
    <script src="datetimepicker.js"></script>
    <link href="datetimepicker.css" type="text/css" rel="stylesheet">
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- script src="https://cdn.rawgit.com/zhaber/datetimepicker/master/datetimepicker.js"></script -->
    <!-- link href="https://cdn.rawgit.com/zhaber/datetimepicker/master/datetimepicker.css" type="text/css" rel="stylesheet" -->
</head>
<body>

<div ng-controller="DateTimePickerDemoCtrl" class="container">

    <br>
    <form name="demo">
        <pre>Selected time and date is: <em>{{date | date:'shortTime' }}, {{date | date:'fullDate' }}</em></pre>

        <datetimepicker min-date="minDate" hour-step="hourStep"
                        minute-step="minuteStep" ng-model="date" show-meridian="showMeridian"
                        date-format="dd-MMM-yyyy" date-options="dateOptions"
                        date-disabled="disabled(date, mode)"
                        datepicker-append-to-body="false"
                        readonly-date="false"
                        hidden-time="false"
                        hidden-date="false"
                        name="datetimepicker"
                        show-spinners="true"
                        readonly-time="false"
                        date-opened="dateOpened"
        >
            <!-- Use date-ng-click="open($event, opened)" to override date ng-click -->
        </datetimepicker>
    </form>
    <hr>
    <div class="form-group">
        <button class="btn btn-default btn-sm" ng-click="dateTimeNow()" tooltip="Set date and time to now">Now</button>
        <button class="btn btn-default btn-sm" ng-click="toggleMinDate()" tooltip="After today restriction">Min date
        </button>
        <button class="btn btn-default btn-sm" ng-click="timeToggleMode()">12H / 24H</button>
        <button class="btn btn-default btn-sm" ng-click="resetHours()">Reset hours</button>
        <button class="btn btn-default btn-sm" ng-click="reset()">Reset</button>
    </div>
    <div class="row">
        <div class="col-xs-2 col-sm-2">Hours step</div>
        <div class="col-xs-3">
            <select ng-model="hourStep" class="form-control" ng-options="opt for opt in timeOptions.hourStep"></select>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-2 col-sm-2">Minutes step</div>
        <div class="col-xs-3">
            <select ng-model="minuteStep" class="form-control"
                    ng-options="opt for opt in timeOptions.minuteStep"></select>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-xs-12">
            <pre>Model: {{demo | json}}</pre>
        </div>
    </div>
</div>
</body>
</html>