| <!DOCTYPE html> |
| <html> |
| <!-- |
| Copyright 2010 The Closure Library Authors. All Rights Reserved. |
| |
| Use of this source code is governed by the Apache License, Version 2.0. |
| See the COPYING file for details. |
| --> |
| <head> |
| <title>goog.ui.InputDatePicker</title> |
| <script src="../base.js"></script> |
| <script> |
| goog.require('goog.dom'); |
| goog.require('goog.i18n.DateTimeFormat'); |
| goog.require('goog.i18n.DateTimeParse'); |
| goog.require('goog.ui.InputDatePicker'); |
| goog.require('goog.ui.LabelInput'); |
| </script> |
| <link rel="stylesheet" href="css/demo.css"> |
| <link rel="stylesheet" href="../css/datepicker.css"> |
| <link rel="stylesheet" href="../css/inputdatepicker.css"> |
| <style> |
| div { |
| margin: 0 0 1em; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>goog.ui.InputDatePicker</h1> |
| |
| <div> |
| <label for="date-field1">Date Field1:</label><input id="date-field1"> |
| </div> |
| <div> |
| <label for="date-field2">Date Field2:</label><span id="date-field2"></span> |
| </div> |
| <div> |
| <label for="date-container"> Label Input Date Field:</label> |
| <span id="date-container"></span> |
| </div> |
| <script> |
| var PATTERN = "MM'/'dd'/'yyyy"; |
| var formatter = new goog.i18n.DateTimeFormat(PATTERN); |
| var parser = new goog.i18n.DateTimeParse(PATTERN); |
| |
| var idp1 = new goog.ui.InputDatePicker(formatter, parser); |
| idp1.decorate(goog.dom.getElement('date-field1')); |
| |
| var idp2 = new goog.ui.InputDatePicker(formatter, parser); |
| idp2.render(goog.dom.getElement('date-field2')); |
| |
| // Use a LabelInput for this one: |
| var fieldLabelInput = new goog.ui.LabelInput('MM/DD/YYYY'); |
| fieldLabelInput.render(goog.dom.getElement('date-container')); |
| |
| var idp3 = new goog.ui.InputDatePicker(formatter, parser); |
| idp3.decorate(fieldLabelInput.getElement()); |
| </script> |
| </body> |
| </html> |
