datepicker/demo/demo.html at master · gardiner/datepicker · 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 xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <meta content='text/html;charset=utf-8' http-equiv='Content-Type'>
    <meta content='width=device-width, initial-scale=1' name='viewport'>
    <link href='demo.css' rel='stylesheet' type='text/css'>
    <link href='../src/datepicker.css' rel='stylesheet' type='text/css'>
    <script src='../bower_components/jquery/dist/jquery.min.js' type='text/javascript'></script>
    <script src='../bower_components/moment/min/moment.min.js' type='text/javascript'></script>
    <script src='../bower_components/angularjs/angular.min.js' type='text/javascript'></script>
    <script src='../src/datepicker.js' type='text/javascript'></script>
    <script type='text/javascript'>
      $(function() {
        $('.jquery .datepicker')
        .datepicker({readonly: false})
        .on('change', function() {
          $(this).siblings('.value').text($(this).val());
        })
        .trigger('change');
      });

      angular.module('datepicker.demo', ['datepicker'])
      .controller('datepicker.controller', ['$scope', function($scope) {
        $scope.value3 = "14.07.2022";
        $scope.today = moment().toDate();
      }]);
    </script>
    <title>Datepicker Demo</title>
  </head>
  <body>
    <h2>Datepicker Demo</h2>

    <h3>jQuery</h3>

    <div class="jquery">
      <div class="formrow">
        <label for="date1">Input[type="text"], basic style</label>
        <input id="date1" type="text" class="datepicker" value="20.03.2015"/>
        <span class="value"></span>
      </div>

      <div class="formrow">
        <label for="date2">Input[type="date"], basic style</label>
        <input id="date2" type="date" class="datepicker"/>
        <span class="value"></span>
      </div>
    </div>

    <h3>angular.js</h3>
    <div class="angular" data-ng-app="datepicker.demo" data-ng-controller="datepicker.controller">
      <div class="formrow">
        <label for="date3">Input[type="text"], flat style</label>
        <input id="date3" type="text" data-datepicker="{theme: 'flat'}" data-ng-model="value3"/>
        <span class="value">{{ value3 }}</span>
      </div>

      <div class="formrow">
        <label for="date4">Input[type="date"], no style</label>
        <input id="date4" type="date" data-datepicker="{theme: false}" data-ng-model="value4"/>
        <span class="value">{{ value4 }}</span>
      </div>

      <button data-ng-click="value3='01.01.2022';value4=today;">Set date</button>
    </div>

  </body>
</html>