popupdatepicker.html 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  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.PopupDatePicker</title>
  10. <script src="../base.js"></script>
  11. <script>
  12. goog.require('goog.ui.PopupDatePicker');
  13. </script>
  14. <link rel="stylesheet" href="css/demo.css">
  15. <link rel="stylesheet" href="../css/datepicker.css">
  16. <link rel="stylesheet" href="../css/popupdatepicker.css">
  17. <style>
  18. #button1, #button2 {
  19. display: block;
  20. width: 60px;
  21. text-align: center;
  22. margin: 10px;
  23. padding: 10px;
  24. font: normal 0.8em verdana,sans-serif;
  25. border: 1px solid #000;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <h1>goog.ui.PopupDatePicker</h1>
  31. <a href="javascript:void(0)" id="button1">Show 1</a>
  32. <a href="javascript:void(0)" id="button2">Show 2</a>
  33. <script>
  34. var picker = new goog.ui.PopupDatePicker();
  35. picker.render();
  36. picker.attach(document.getElementById('button1'));
  37. picker.attach(document.getElementById('button2'));
  38. goog.events.listen(picker, 'change', function(e) {
  39. var date = picker.getDate();
  40. var dateString = date ? date.toString() : '';
  41. picker.getLastTarget().innerHTML = dateString;
  42. });
  43. // Want to use a PopupDatePicker with an input element?
  44. // Check out InputDatePicker.
  45. </script>
  46. </body>
  47. </html>