inputdatepicker.html 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <!DOCTYPE html>
  2. <html>
  3. <!--
  4. Copyright 2010 The Closure Library Authors. All Rights Reserved.
  5. Use of this source code is governed by the Apache License, Version 2.0.
  6. See the COPYING file for details.
  7. -->
  8. <head>
  9. <title>goog.ui.InputDatePicker</title>
  10. <script src="../base.js"></script>
  11. <script>
  12. goog.require('goog.dom');
  13. goog.require('goog.i18n.DateTimeFormat');
  14. goog.require('goog.i18n.DateTimeParse');
  15. goog.require('goog.ui.InputDatePicker');
  16. goog.require('goog.ui.LabelInput');
  17. </script>
  18. <link rel="stylesheet" href="css/demo.css">
  19. <link rel="stylesheet" href="../css/datepicker.css">
  20. <link rel="stylesheet" href="../css/inputdatepicker.css">
  21. <style>
  22. div {
  23. margin: 0 0 1em;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <h1>goog.ui.InputDatePicker</h1>
  29. <div>
  30. <label for="date-field1">Date Field1:</label><input id="date-field1">
  31. </div>
  32. <div>
  33. <label for="date-field2">Date Field2:</label><span id="date-field2"></span>
  34. </div>
  35. <div>
  36. <label for="date-container"> Label Input Date Field:</label>
  37. <span id="date-container"></span>
  38. </div>
  39. <script>
  40. var PATTERN = "MM'/'dd'/'yyyy";
  41. var formatter = new goog.i18n.DateTimeFormat(PATTERN);
  42. var parser = new goog.i18n.DateTimeParse(PATTERN);
  43. var idp1 = new goog.ui.InputDatePicker(formatter, parser);
  44. idp1.decorate(goog.dom.getElement('date-field1'));
  45. var idp2 = new goog.ui.InputDatePicker(formatter, parser);
  46. idp2.render(goog.dom.getElement('date-field2'));
  47. // Use a LabelInput for this one:
  48. var fieldLabelInput = new goog.ui.LabelInput('MM/DD/YYYY');
  49. fieldLabelInput.render(goog.dom.getElement('date-container'));
  50. var idp3 = new goog.ui.InputDatePicker(formatter, parser);
  51. idp3.decorate(fieldLabelInput.getElement());
  52. </script>
  53. </body>
  54. </html>