delorean/example.html at master · HashNuke/delorean · 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
<!doctype html>
<html>
  <head>
    <title>Delorean Datepicker</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="dist/delorean.js" type="text/javascript"></script>
    <link href="dist/delorean.css" rel="stylesheet"/>

    <style>
      *, *:before, *:after {
        -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
      }

      body { font-family: Verdana; }

      /*NOTE uncomment this to test repositioning*/
      /*input {
        margin-top: 50em;
        margin-bottom: 5em;
      }*/
    </style>
  </head>
  <body>

    <div align="center">
      <form>
        <input type="text" class="example1"/>
        <input type="text" class="example2"/>
        <input type="text" class="example3"/>
        <input type="text" value="tabbing to this should close datepicker" width="100%"/>
      </form>
    </div>

    <script type="text/javascript">
      $(document).ready(function(){
        $(".example1").datepicker({startDate: "-1y", endDate: "+2y"})
        $(".example2").datepicker({startingView: "months"})
        $(".example3").datepicker({startingView: "months"})
        // $("input").datepicker({startingView: "days"})
      })
    </script>
  </body>
</html>