angular-quickdate/demo.html at master · alockwood05/angular-quickdate · 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
<!DOCTYPE html>
<html data-ng-app='ngQuickdateDemo'>
  <head>
    <title>ngQuickdate Demo</title>
    <link rel="stylesheet" type="text/css" href="dist/ng-quickdate-plus-default-theme.css" media="all" />
    <style type="text/css">
      form.ng-dirty .ng-invalid .quickdate-button {
        border: solid 1px red;
      }
    </style>
  </head>
  <body>
    <div ng-controller='DemoCtrl'>
      <form name='date_form' novalidate>
        <p>
          <label>My Date (original)</label>
          <quickdate name='myDate' ng-model='myDate'  disable-timepicker='false' disable-datepicker='false' required></quickdate>
        </p>
        <p>
          <label>Some other field</label>
          <input type='text' name='otherField' ng-model='otherField' required />
        </p>
        <p>
          <label>My Date 2</label>
          <quickdate name='myDate2' ng-model='myDate2'  required></quickdate>
        </p>
      </form>
      <br/>
      <br/>
      <a href='' ng-click='setToToday()'>Set Date to Today</a>
    </div>
    <script type="text/javascript" src="bower_components/angular/angular.js"></script>
    <!-- <script type='text/javascript' src='vendor/sugar.js' /> -->
    <!-- <script type='text/javascript' src='vendor/date.js' /> -->
    <!-- <script type='text/javascript' src='bower_components/jquery/jquery.js' /> -->
    <script type="text/javascript" src="dist/ng-quickdate.js"></script>
    <script type='text/javascript'>
      var app = angular.module("ngQuickdateDemo", ["ngQuickdate"]);
      app.config(function(ngQuickdateDefaultsProvider) {
        return ngQuickdateDefaultsProvider.set({
            disableTimepicker: true,
            disableDatepicker: true,
            disableClearButton: true,
            dayAbbreviations: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
            dateFilter: function(d) {
              var dayIndex = d.getDay();
              return (dayIndex !== 0) && (dayIndex != 6);
            }
        });
      });
      app.controller("DemoCtrl", function($scope) {
        $scope.myDate = null;
        $scope.setToToday = function() {
          $scope.myDate = new Date();
          $scope.myDate2 = new Date();
        };
      });
    </script>
  </body>
</html>