jack
/
cocorobolx


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
							<!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>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>goog.ui.DatePicker</title>
  <script src="../base.js"></script>
  <script>
    goog.require('goog.dom');
    goog.require('goog.date');
    goog.require('goog.i18n.DateTimeSymbols');
    goog.require('goog.i18n.DateTimeSymbols_en_ISO');
    goog.require('goog.i18n.DateTimeSymbols_en_US');
    goog.require('goog.i18n.DateTimeSymbols_de');
    goog.require('goog.i18n.DateTimeSymbols_ml');
    goog.require('goog.i18n.DateTimeSymbols_ar_YE');
    goog.require('goog.i18n.DateTimeSymbols_th');
    goog.require('goog.i18n.DateTimeSymbols_ja');
    goog.require('goog.i18n.DateTimePatterns');
    goog.require('goog.i18n.DateTimePatterns_en_US');
    goog.require('goog.i18n.DateTimePatterns_de');
    goog.require('goog.i18n.DateTimePatterns_ml');
    goog.require('goog.i18n.DateTimePatterns_ar_YE');
    goog.require('goog.i18n.DateTimePatterns_th');
    goog.require('goog.i18n.DateTimePatterns_ja');
    goog.require('goog.ui.DatePicker');
  </script>
  <link rel="stylesheet" href="css/demo.css">
  <link rel="stylesheet" href="../css/datepicker.css">
</head>
<body>
  <h1>goog.ui.DatePicker</h1>

  <table width="100%" summary="for laying out datepickers"><tr><td valign="top">
  <h2>Default: ISO 8601</h2>
  <div id="widget_iso_8601"></div>
  <div style="clear: both;">&nbsp;</div>
  <span id="label_iso_8601"></span>
  <br><br>
  <h2>Custom</h2>
  <input type="checkbox" id="ck-0"
      onclick="allShowFixedNumWeeks(this.checked);" checked><label
      for="ck-0">ShowFixedNumWeeks</label><br>
  <input type="checkbox" id="ck-1"
      onclick="allShowOtherMonths(this.checked);" checked><label
      for="ck-1">ShowOtherMonths</label><br>
  <input type="checkbox" id="ck-2"
      onclick="allExtraWeekAtEnd(this.checked);" checked><label
      for="ck-2">ExtraWeekAtEnd</label><br>
  <input type="checkbox" id="ck-3"
      onclick="allShowWeekNum(this.checked);" checked><label
      for="ck-3">ShowWeekNum</label><br>
  <input type="checkbox" id="ck-4"
      onclick="allShowWeekdays(this.checked);" checked><label
      for="ck-4">ShowWeekdays</label><br>
  <input type="checkbox" id="ck-5"
      onclick="allAllowNone(this.checked);" checked><label
      for="ck-5">AllowNone</label><br>
  <input type="checkbox" id="ck-6"
      onclick="allShowToday(this.checked);" checked><label
      for="ck-6">ShowToday</label><br>
  <input type="checkbox" id="ck-7"
      onclick="allUseNarrowWeekdayNames(this.checked);"><label
      for="ck-7">UseNarrowWeekdayNames</label><br>
  <input type="checkbox" id="ck-8"
      onclick="allUseSimpleNavigationMenu(this.checked);"><label
      for="ck-8">UseSimpleNavigationMenu</label><br>
  <input type="checkbox" id="ck-9"
      onclick="allLongDateFormat(this.checked);"><label
      for="ck-9">LongDateFormat</label><br>
  <br>
  <div id="widget_custom"></div>
  <div style="clear: both;">&nbsp;</div>
  <span id="label_custom"></span>
  </td>
  <td valign="top">

  <h2>English (US)</h2>
  <div id="widget_en_US"></div>
  <div style="clear: both;">&nbsp;</div>
  <span id="label_en_US"></span>
  <br><br>

  <h2>German</h2>
  <div id="widget_de"></div>
  <div style="clear: both;">&nbsp;</div>
  <span id="label_de"></span>
  <br><br>

  <h2>Malayalam</h2>
  <div id="widget_ml"></div>
  <div style="clear: both;">&nbsp;</div>
  <span id="label_ml"></span>
  <br><br>

  </td>
  <td valign="top">

  <h2>Arabic (Yemen)</h2>
  <div dir=rtl id="widget_ar_YE"></div>
  <div style="clear: both;">&nbsp;</div>
  <span id="label_ar_YE"></span>
  <br><br>

  <h2>Thai</h2>
  <div id="widget_th"></div>
  <div style="clear: both;">&nbsp;</div>
  <span id="label_th"></span>
  <br><br>

  <h2>Japanese</h2>
  <div id="widget_ja"></div>
  <div style="clear: both;">&nbsp;</div>
  <span id="label_ja"></span>
  <br><br>

  </td></tr></table>

  <script type="text/javascript">
    // Standard: ISO 8601
    goog.i18n.DateTimeSymbols = goog.i18n.DateTimeSymbols_en_ISO;
    var dp_iso_8601 = new goog.ui.DatePicker();
    dp_iso_8601.render(document.getElementById('widget_iso_8601'));

    goog.events.listen(dp_iso_8601,
        goog.ui.DatePicker.Events.CHANGE, function(event) {
      goog.dom.setTextContent(document.getElementById('label_iso_8601'),
          event.date ?
          event.date.toIsoString(true) : 'none');
    });

    goog.dom.setTextContent(document.getElementById('label_iso_8601'),
                            dp_iso_8601.getDate().toIsoString(true));

    // Custom
    var dp_custom = new goog.ui.DatePicker(new goog.date.Date(2006, 0, 1));
    dp_custom.render(document.getElementById('widget_custom'));

    goog.events.listen(dp_custom, goog.ui.DatePicker.Events.CHANGE,
                       function(event) {
      goog.dom.setTextContent(document.getElementById('label_custom'),
          event.date ?
          event.date.toIsoString(true) : 'none');
    });

    goog.dom.setTextContent(document.getElementById('label_custom'),
                            dp_custom.getDate().toIsoString(true));

    // English (US)
    goog.i18n.DateTimeSymbols = goog.i18n.DateTimeSymbols_en_US;
    goog.i18n.DateTimePatterns = goog.i18n.DateTimePatterns_en_US;

    var dp_en_US = new goog.ui.DatePicker();
    dp_en_US.render(document.getElementById('widget_en_US'));

    goog.events.listen(dp_en_US, goog.ui.DatePicker.Events.CHANGE,
        function(event) {
      goog.dom.setTextContent(document.getElementById('label_en_US'), event.date ?
          event.date.toIsoString(true) : 'none');
    });

    goog.dom.setTextContent(document.getElementById('label_en_US'),
                            dp_en_US.getDate().toIsoString(true));

    // German
    goog.i18n.DateTimeSymbols = goog.i18n.DateTimeSymbols_de;
    goog.i18n.DateTimePatterns = goog.i18n.DateTimePatterns_de;

    dp_de = new goog.ui.DatePicker();
    dp_de.render(document.getElementById('widget_de'));

    goog.events.listen(dp_de, goog.ui.DatePicker.Events.CHANGE, function(event) {
      goog.dom.setTextContent(document.getElementById('label_de'), event.date ?
          event.date.toIsoString(true) : 'none');
    });

    goog.dom.setTextContent(document.getElementById('label_de'),
                            dp_de.getDate().toIsoString(true));

    // Malayalam
    goog.i18n.DateTimeSymbols = goog.i18n.DateTimeSymbols_ml;
    goog.i18n.DateTimePatterns = goog.i18n.DateTimePatterns_ml;

    var dp_ml = new goog.ui.DatePicker();
    dp_ml.render(document.getElementById('widget_ml'));

    goog.events.listen(dp_ml, goog.ui.DatePicker.Events.CHANGE, function(event) {
      goog.dom.setTextContent(document.getElementById('label_ml'), event.date ?
          event.date.toIsoString(true) : 'none');
    });

    goog.dom.setTextContent(document.getElementById('label_ml'),
                            dp_ml.getDate().toIsoString(true));

    // Arabic (Yemen)
    goog.i18n.DateTimePatterns = goog.i18n.DateTimePatterns_ar_YE;
    var dp_ar_YE = new goog.ui.DatePicker(null, goog.i18n.DateTimeSymbols_ar_YE);

    dp_ar_YE.render(document.getElementById('widget_ar_YE'));

    goog.events.listen(dp_ar_YE, goog.ui.DatePicker.Events.CHANGE,
        function(event) {
      goog.dom.setTextContent(document.getElementById('label_ar_YE'), event.date ?
          event.date.toIsoString(true) : 'none');
    });

    goog.dom.setTextContent(document.getElementById('label_ar_YE'),
                            dp_ar_YE.getDate().toIsoString(true));

    // Thai
    goog.i18n.DateTimeSymbols = goog.i18n.DateTimeSymbols_th;
    goog.i18n.DateTimePatterns = goog.i18n.DateTimePatterns_th;

    var dp_th = new goog.ui.DatePicker();
    dp_th.render(document.getElementById('widget_th'));

    goog.events.listen(dp_th, goog.ui.DatePicker.Events.CHANGE, function(event) {
      goog.dom.setTextContent(document.getElementById('label_th'), event.date ?
          event.date.toIsoString(true) : 'none');
    });

    goog.dom.setTextContent(document.getElementById('label_th'),
                            dp_th.getDate().toIsoString(true));

    // Japanese
    goog.i18n.DateTimeSymbols = goog.i18n.DateTimeSymbols_ja;
    goog.i18n.DateTimePatterns = goog.i18n.DateTimePatterns_ja;

    var dp_ja = new goog.ui.DatePicker();
    dp_ja.render(document.getElementById('widget_ja'));

    goog.events.listen(dp_ja, goog.ui.DatePicker.Events.CHANGE, function(event) {
      goog.dom.setTextContent(document.getElementById('label_ja'), event.date ?
          event.date.toIsoString(true) : 'none');
    });

    goog.dom.setTextContent(document.getElementById('label_ja'),
                            dp_ja.getDate().toIsoString(true));

    // We update all pickers, for all languages
    var allPickers = [dp_iso_8601, dp_custom, dp_en_US,
        dp_de, dp_ml, dp_ar_YE, dp_th, dp_ja];

    function allShowFixedNumWeeks(enabled) {
      for (var i = 0; i < allPickers.length; ++i) {
        allPickers[i].setShowFixedNumWeeks(enabled);
      }
    }

    function allShowOtherMonths(enabled) {
      for (var i = 0; i < allPickers.length; ++i) {
        allPickers[i].setShowOtherMonths(enabled);
      }
    }

    function allExtraWeekAtEnd(enabled) {
      for (var i = 0; i < allPickers.length; ++i) {
        allPickers[i].setExtraWeekAtEnd(enabled);
      }
    }

    function allShowWeekNum(enabled) {
      for (var i = 0; i < allPickers.length; ++i) {
        allPickers[i].setShowWeekNum(enabled);
      }
    }

    function allShowWeekdays(enabled) {
      for (var i = 0; i < allPickers.length; ++i) {
        allPickers[i].setShowWeekdayNames(enabled);
      }
    }

    function allAllowNone(enabled) {
      for (var i = 0; i < allPickers.length; ++i) {
        allPickers[i].setAllowNone(enabled);
      }
    }

    function allShowToday(enabled) {
      for (var i = 0; i < allPickers.length; ++i) {
        allPickers[i].setShowToday(enabled);
      }
    }

    function allUseNarrowWeekdayNames(enabled) {
      for (var i = 0; i < allPickers.length; ++i) {
        allPickers[i].setUseNarrowWeekdayNames(enabled);
      }
    }

    function allUseSimpleNavigationMenu(enabled) {
      for (var i = 0; i < allPickers.length; ++i) {
        allPickers[i].setUseSimpleNavigationMenu(enabled);
      }
    }

    function allLongDateFormat(enabled) {
      for (var i = 0; i < allPickers.length; ++i) {
        allPickers[i].setLongDateFormat(enabled);
      }
    }

  </script>
</body>
</html>