pankajparashar-zz/datalist.html

## datalist.html

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" xmlns:og="http://ogp.me/ns#"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>datalist experiment</title>
	<meta name="description" content="demo implementation of datalist element">
	<meta name="author" content="Eiji Kitamura">

	<meta name="viewport" content="width=device-width">
  <meta property="og:title" content="datalist experiment">
  <meta property="og:type" content="website">
  <meta property="og:description" content="demo implementation of datalist element">
  <meta property="og:url" content="http://demo.agektmr.com/datalist/">
  <meta property="og:image" content="http://slides.agektmr.com/websocket_basic/images/h5_logo.png">
	<link rel="stylesheet" href="../css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/bootstrap-responsive.min.css">
  <style type="text/css" media="screen">
    @media (max-width: 767px) {
      .hero-unit {
        padding: 20px;
      }
    }
  </style>

	<script src="../js/libs/modernizr-2.5.3-respond-1.1.0.min.js"></script>
</head>
<body>
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <span class="brand">datalist experiment</span>
        </div>
      </div>
    </div>

    <div class="container">

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
        <h1 class="hidden-phone">datalist experiment</h1>
        <p>By using <code>&lt;datalist&gt;</code>, you can define a list of suggestions you want the user to select from. Users can optionally select from your suggestions as well as typing it by themselves.</p>
        <p>Options can be tagged with <code>datalist</code> and referenced from the <code>input</code> element using <code>list</code> attribute by its <code>id</code>. See examples below.</p>
      </div>
        <h2>Examples</h2>
        <div class="row">
          <div class="span4">
            <h3>input[type=text] datalist</h3>
            <p>For <code>text</code> type, <code>datalist</code> simply suggests list of words.</p>
            <input type="text" value="" list="fruits" placeholder="Type your favorite fruit name" />
            <datalist id="fruits">
              <option value="Apple"></option>
              <option value="Orange"></option>
              <option value="Peach"></option>
            </datalist>
            <pre>&lt;input type="text" value="" list="fruits" /&gt;
&lt;datalist id="fruits"&gt;
  &lt;option value="Apple"&gt;&lt;/option&gt;
  &lt;option value="Orange"&gt;&lt;/option&gt;
  &lt;option value="Peach"&gt;&lt;/option&gt;
&lt;/datalist&gt;</pre>
          </div>
          <div class="span4">
            <h3>input[type=range] datalist</h3>
            <p>For <code>range</code> type, <code>datalist</code> suggests recommended value as ticks. Chrome snaps to those ticks when moving slider.</p>
            <input id="number_input" type="range" value="0" min="0" max="100" list="number" style="padding:0; border:none;" />
            <output for="number_input">0</output>
            <div class="alert alert-error" style="display:none;">input[type=range] is not available on your browser</div>
            <datalist id="number">
              <option>10</option>
              <option>15</option>
              <option>30</option>
              <option>50</option>
              <option>90</option>
            </datalist>
            <script>
              document.querySelector('#number_input').onchange = function(e) {
                e.target.nextElementSibling.innerText = e.target.value;
              }
              if (!Modernizr.inputtypes.range) {
                document.querySelector('#number_input').style.display = 'none';
                document.querySelector('#number_input').nextElementSibling.style.display = 'none';
                document.querySelector('#number').previousElementSibling.style.display = 'block';
              }
            </script>
            <pre>&lt;input type="range" value="0" min="0" max="100" list="number" /&gt;
&lt;datalist id=&quot;number&quot;&gt;
  &lt;option&gt;10&lt;/option&gt;
  &lt;option&gt;15&lt;/option&gt;
  &lt;option&gt;30&lt;/option&gt;
  &lt;option&gt;50&lt;/option&gt;
  &lt;option&gt;90&lt;/option&gt;
&lt;/datalist&gt;</pre>
          </div>
          <div class="span4">
            <h3>input[type=color] datalist</h3>
            <p>For <code>color</code> type, <code>datalist</code> suggests the recommended color on the swatch palette. You can optionally pick arbitorary color from the color palette.</p>
            <input type="color" id="color" value="#000000" list="colors" />
            <div class="alert alert-error" style="display:none;">input[type=color] is not available on your browser</div>
            <datalist id="colors">
              <option>#ff0000</option>
              <option>#0000ff</option>
              <option>#00ff00</option>
              <option>#ffff00</option>
              <option>#00ffff</option>
              <option>#f00</option> <!--invalid-->
              <option>red</option> <!--invalid-->
            </datalist>
            <script>
              if (!Modernizr.inputtypes.color) {
                document.querySelector('#color').style.display = 'none';
                document.querySelector('#colors').previousElementSibling.style.display = 'block';
              }
            </script>
            <pre>&lt;input type="color" value="#000000" list="color" /&gt;
&lt;datalist id=&quot;color&quot;&gt;
  &lt;option&gt;#ff0000&lt;/option&gt;
  &lt;option&gt;#0000ff&lt;/option&gt;
  &lt;option&gt;#00ff00&lt;/option&gt;
  &lt;option&gt;#ffff00&lt;/option&gt;
  &lt;option&gt;#00ffff&lt;/option&gt;
&lt;/datalist&gt;</pre>
          </div>
          <div class="span4">
            <h3>input[type=date] datalist</h3>
            <p>For <code>date</code> type, <code>datalist</code> suggests a list of recommended dates. You can also specify labels for those dates by giving <code>label</code> attribute to <code>option</code> tags.</p>
            <input type="date" id="date" list="days" />
            <div class="alert alert-error" style="display:none;">input[type=date] is not available on your browser</div>
            <datalist id="days">
              <option label="Independence Day">2013-07-04</option>
              <option label="Labor Day">2013-09-02</option>
              <option label="Columbus Day">2013-10-14</option>
            </datalist>
            <script>
              if (!Modernizr.inputtypes.date) {
                document.querySelector('#date').style.display = 'none';
                document.querySelector('#days').previousElementSibling.style.display = 'block';
              }
            </script>
            <pre>&lt;input type=&quot;date&quot; list=&quot;days&quot; /&gt;
&lt;datalist id=&quot;days&quot;&gt;
  &lt;option label=&quot;Independence Day&quot;&gt;2013-07-04&lt;/option&gt;
  &lt;option label=&quot;Labor Day&quot;&gt;2013-09-02&lt;/option&gt;
  &lt;option label=&quot;Columbus Day&quot;&gt;2013-10-14&lt;/option&gt;
&lt;/datalist&gt;</pre>
          </div>
          <div class="span4">
            <h3>input[type=time] datalist</h3>
            <p>For <code>time</code> type, <code>datalist</code> suggests a list of recommended times. You can also specify labels for those times by giving <code>label</code> attribute to <code>option</code> tags.</p>
            <input type="time" id="time" list="times" />
            <div class="alert alert-error" style="display:none;">input[type=time] is not available on your browser</div>
            <datalist id="times">
              <option label="Midnight">00:00</option>
              <option>06:00</option>
              <option label="Noon">12:00</option>
              <option>18:00</option>
            </datalist>
            <script>
              if (!Modernizr.inputtypes.time) {
                document.querySelector('#time').style.display = 'none';
                document.querySelector('#times').previousElementSibling.style.display = 'block';
              }
            </script>
            <pre>&lt;input type=&quot;time&quot; list=&quot;times&quot; /&gt;
&lt;datalist id=&quot;times&quot;&gt
  &lt;option label=&quot;Midnight&quot;&gt;00:00&lt;/option&gt;
  &lt;option&gt;06:00&lt;/option&gt;
  &lt;option label=&quot;Noon&quot;&gt;12:00&lt;/option&gt;
  &lt;option&gt;18:00&lt;/option&gt;
&lt;/datalist&gt;</pre>
          </div>
<!--           <div class="span4">
            <h3>input[type=datetime] datalist</h3>
            <p>For <code>datetime</code> type, <code>datalist</code> suggests a list of recommended datetimes. You can also specify labels for those datetimes by giving <code>label</code> attribute to <code>option</code> tags.</p>
            <input type="datetime" id="datetime" list="datetimes" />
            <div class="alert alert-error" style="display:none;">input[type=datetime] is not available on your browser</div>
            <datalist id="datetimes">
              <option label="Midnight">00:00</option>
              <option>06:00</option>
              <option label="Noon">12:00</option>
              <option>18:00</option>
            </datalist>
            <script>
              if (!Modernizr.inputtypes.datetime) {
                document.querySelector('#datetime').style.display = 'none';
                document.querySelector('#datetimes').previousElementSibling.style.display = 'block';
              }
            </script>
            <pre>&lt;input type=&quot;datetime&quot; list=&quot;datetimes&quot; /&gt;
&lt;datalist id=&quot;datetimes&quot;&gt
  &lt;option label=&quot;Midnight&quot;&gt;00:00&lt;/option&gt;
  &lt;option&gt;06:00&lt;/option&gt;
  &lt;option label=&quot;Noon&quot;&gt;12:00&lt;/option&gt;
  &lt;option&gt;18:00&lt;/option&gt;
&lt;/datalist&gt;</pre>
          </div>
 -->          <div class="span4">
            <h3>input[type=datetime-local] datalist</h3>
            <p>For <code>datetime-local</code> type, <code>datalist</code> suggests a list of recommended datetime-locals. You can also specify labels for those datetime-locals by giving <code>label</code> attribute to <code>option</code> tags.</p>
            <input type="datetime-local" id="datetime-local" list="datetime-locals" />
            <div class="alert alert-error" style="display:none;">input[type=datetime-local] is not available on your browser</div>
            <datalist id="datetime-locals">
              <option label="Santa Visit">2012-12-24T23:59</option>
              <option label="Chrismas party">2012-12-25T18:00</option>
              <option>2012-12-30T00:00</option>
              <option label="Happy New Year">2013-01-01T00:00</option>
            </datalist>
            <script>
              if (!Modernizr.inputtypes['datetime-local']) {
                document.querySelector('#datetime-local').style.display = 'none';
                document.querySelector('#datetime-locals').previousElementSibling.style.display = 'block';
              }
            </script>
            <pre>&lt;input type=&quot;datetime-local&quot; list=&quot;datetime-locals&quot; /&gt;
&lt;datalist id=&quot;datetime-locals&quot;&gt
  &lt;option label=&quot;Santa Visit&quot;&gt;2012-12-24T23:59&lt;/option&gt;
  &lt;option label=&quot;Chrismas party&quot;&gt;2012-12-25T18:00&lt;/option&gt;
  &lt;option&gt;2012-12-30T00:00&lt;/option&gt;
  &lt;option label=&quot;Happy New Year&quot;&gt;2013-01-01T00:00&lt;/option&gt;
&lt;/datalist&gt;</pre>
          </div>
          <div class="span4">
            <h3>input[type=month] datalist</h3>
            <p>For <code>month</code> type, <code>datalist</code> suggests a list of recommended months. You can also specify labels for those months by giving <code>label</code> attribute to <code>option</code> tags.</p>
            <input type="month" id="month" list="months" />
            <div class="alert alert-error" style="display:none;">input[type=month] is not available on your browser</div>
            <datalist id="months">
              <option label="Eiji's birthday">1976-02</option>
              <option label="End of last century">2000-12</option>
              <option>2010-01</option>
              <option label="Now">2012-11</option>
            </datalist>
            <script>
              if (!Modernizr.inputtypes.month) {
                document.querySelector('#month').style.display = 'none';
                document.querySelector('#months').previousElementSibling.style.display = 'block';
              }
            </script>
            <pre>&lt;input type=&quot;month&quot; list=&quot;months&quot; /&gt;
&lt;datalist id=&quot;months&quot;&gt
  &lt;option label=&quot;Eiji's birthday&quot;&gt;1976-02&lt;/option&gt;
  &lt;option label=&quot;End of last century&quot;&gt;2000-12&lt;/option&gt;
  &lt;option&gt;2010-01&lt;/option&gt;
  &lt;option label=&quot;Now&quot;&gt;2012-11&lt;/option&gt;
&lt;/datalist&gt;</pre>
          </div>
          <div class="span4">
            <h3>input[type=week] datalist</h3>
            <p>For <code>week</code> type, <code>datalist</code> suggests a list of recommended weeks. You can also specify labels for those weeks by giving <code>label</code> attribute to <code>option</code> tags.</p>
            <input type="week" id="week" list="weeks" />
            <div class="alert alert-error" style="display:none;">input[type=week] is not available on your browser</div>
            <datalist id="weeks">
              <option label="First week of 2012">2012-W01</option>
              <option label="Second week of 2012">2012-W02</option>
              <option label="13th week of 2012">2012-W13</option>
              <option label="The last week of 2012">2012-W52</option>
            </datalist>
            <script>
              if (!Modernizr.inputtypes.week) {
                document.querySelector('#week').style.display = 'none';
                document.querySelector('#weeks').previousElementSibling.style.display = 'block';
              }
            </script>
            <pre>&lt;input type=&quot;week&quot; list=&quot;weeks&quot; /&gt;
&lt;datalist id=&quot;weeks&quot;&gt
  &lt;option label=&quot;First week of 2012&quot;&gt;2012-W01&lt;/option&gt;
  &lt;option label=&quot;Second week of 2012&quot;&gt;2012-W02&lt;/option&gt;
  &lt;option label=&quot;13th week of 2012&quot;&gt;2012-W13&lt;/option&gt;
  &lt;option label=&quot;The last week of 2012&quot;&gt;2012-W52&lt;/option&gt;
&lt;/datalist&gt;</pre>
          </div>
        </div>
<br>
        <h2>Compatibility</h2>
        <p>Find out the latest compatibility at <a href="http://caniuse.com/#feat=datalist" title="When can I use">&quot;When can I use&quot;</a>.</p>
        <br>
        <h2>Learn more</h2>
        <p>datalist specification can be found <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-list-attribute" title="here">here</a>.</p>
      <hr>
    <footer class="footer">
      <p>This demo is developed by <a href="http://profiles.google.com/agektmr">Eiji Kitamura</a>.</p>
    </footer>
    </div> <!-- /container -->

<script>
	var _gaq=[['_setAccount','UA-31105737-1'],['_trackPageview']];
	(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
	g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
	s.parentNode.insertBefore(g,s)}(document,'script'));
</script>

</body>
</html>

	<!doctype html>
	<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
	<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
	<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
	<!--[if gt IE 8]><!--> <html class="no-js" lang="en" xmlns:og="http://ogp.me/ns#"> <!--<![endif]-->
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>datalist experiment</title>
	<meta name="description" content="demo implementation of datalist element">
	<meta name="author" content="Eiji Kitamura">

	<meta name="viewport" content="width=device-width">
	<meta property="og:title" content="datalist experiment">
	<meta property="og:type" content="website">
	<meta property="og:description" content="demo implementation of datalist element">
	<meta property="og:url" content="http://demo.agektmr.com/datalist/">
	<meta property="og:image" content="http://slides.agektmr.com/websocket_basic/images/h5_logo.png">
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<link rel="stylesheet" href="../css/bootstrap-responsive.min.css">
	<style type="text/css" media="screen">
	@media (max-width: 767px) {
	.hero-unit {
	padding: 20px;
	}
	}
	</style>

	<script src="../js/libs/modernizr-2.5.3-respond-1.1.0.min.js"></script>
	</head>
	<body>
	<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

	<div class="navbar navbar-fixed-top">
	<div class="navbar-inner">
	<div class="container">
	<span class="brand">datalist experiment</span>
	</div>
	</div>
	</div>

	<div class="container">

	<!-- Main hero unit for a primary marketing message or call to action -->
	<div class="hero-unit">
	<h1 class="hidden-phone">datalist experiment</h1>
	<p>By using <code><datalist></code>, you can define a list of suggestions you want the user to select from. Users can optionally select from your suggestions as well as typing it by themselves.</p>
	<p>Options can be tagged with <code>datalist</code> and referenced from the <code>input</code> element using <code>list</code> attribute by its <code>id</code>. See examples below.</p>
	</div>
	<h2>Examples</h2>
	<div class="row">
	<div class="span4">
	<h3>input[type=text] datalist</h3>
	<p>For <code>text</code> type, <code>datalist</code> simply suggests list of words.</p>
	<input type="text" value="" list="fruits" placeholder="Type your favorite fruit name" />
	<datalist id="fruits">
	<option value="Apple"></option>
	<option value="Orange"></option>
	<option value="Peach"></option>
	</datalist>
	<pre><input type="text" value="" list="fruits" />
	<datalist id="fruits">
	<option value="Apple"></option>
	<option value="Orange"></option>
	<option value="Peach"></option>
	</datalist></pre>
	</div>
	<div class="span4">
	<h3>input[type=range] datalist</h3>
	<p>For <code>range</code> type, <code>datalist</code> suggests recommended value as ticks. Chrome snaps to those ticks when moving slider.</p>
	<input id="number_input" type="range" value="0" min="0" max="100" list="number" style="padding:0; border:none;" />
	<output for="number_input">0</output>
	<div class="alert alert-error" style="display:none;">input[type=range] is not available on your browser</div>
	<datalist id="number">
	<option>10</option>
	<option>15</option>
	<option>30</option>
	<option>50</option>
	<option>90</option>
	</datalist>
	<script>
	document.querySelector('#number_input').onchange = function(e) {
	e.target.nextElementSibling.innerText = e.target.value;
	}
	if (!Modernizr.inputtypes.range) {
	document.querySelector('#number_input').style.display = 'none';
	document.querySelector('#number_input').nextElementSibling.style.display = 'none';
	document.querySelector('#number').previousElementSibling.style.display = 'block';
	}
	</script>
	<pre><input type="range" value="0" min="0" max="100" list="number" />
	<datalist id="number">
	<option>10</option>
	<option>15</option>
	<option>30</option>
	<option>50</option>
	<option>90</option>
	</datalist></pre>
	</div>
	<div class="span4">
	<h3>input[type=color] datalist</h3>
	<p>For <code>color</code> type, <code>datalist</code> suggests the recommended color on the swatch palette. You can optionally pick arbitorary color from the color palette.</p>
	<input type="color" id="color" value="#000000" list="colors" />
	<div class="alert alert-error" style="display:none;">input[type=color] is not available on your browser</div>
	<datalist id="colors">
	<option>#ff0000</option>
	<option>#0000ff</option>
	<option>#00ff00</option>
	<option>#ffff00</option>
	<option>#00ffff</option>
	<option>#f00</option> <!--invalid-->
	<option>red</option> <!--invalid-->
	</datalist>
	<script>
	if (!Modernizr.inputtypes.color) {
	document.querySelector('#color').style.display = 'none';
	document.querySelector('#colors').previousElementSibling.style.display = 'block';
	}
	</script>
	<pre><input type="color" value="#000000" list="color" />
	<datalist id="color">
	<option>#ff0000</option>
	<option>#0000ff</option>
	<option>#00ff00</option>
	<option>#ffff00</option>
	<option>#00ffff</option>
	</datalist></pre>
	</div>
	<div class="span4">
	<h3>input[type=date] datalist</h3>
	<p>For <code>date</code> type, <code>datalist</code> suggests a list of recommended dates. You can also specify labels for those dates by giving <code>label</code> attribute to <code>option</code> tags.</p>
	<input type="date" id="date" list="days" />
	<div class="alert alert-error" style="display:none;">input[type=date] is not available on your browser</div>
	<datalist id="days">
	<option label="Independence Day">2013-07-04</option>
	<option label="Labor Day">2013-09-02</option>
	<option label="Columbus Day">2013-10-14</option>
	</datalist>
	<script>
	if (!Modernizr.inputtypes.date) {
	document.querySelector('#date').style.display = 'none';
	document.querySelector('#days').previousElementSibling.style.display = 'block';
	}
	</script>
	<pre><input type="date" list="days" />
	<datalist id="days">
	<option label="Independence Day">2013-07-04</option>
	<option label="Labor Day">2013-09-02</option>
	<option label="Columbus Day">2013-10-14</option>
	</datalist></pre>
	</div>
	<div class="span4">
	<h3>input[type=time] datalist</h3>
	<p>For <code>time</code> type, <code>datalist</code> suggests a list of recommended times. You can also specify labels for those times by giving <code>label</code> attribute to <code>option</code> tags.</p>
	<input type="time" id="time" list="times" />
	<div class="alert alert-error" style="display:none;">input[type=time] is not available on your browser</div>
	<datalist id="times">
	<option label="Midnight">00:00</option>
	<option>06:00</option>
	<option label="Noon">12:00</option>
	<option>18:00</option>
	</datalist>
	<script>
	if (!Modernizr.inputtypes.time) {
	document.querySelector('#time').style.display = 'none';
	document.querySelector('#times').previousElementSibling.style.display = 'block';
	}
	</script>
	<pre><input type="time" list="times" />
	<datalist id="times"&gt
	<option label="Midnight">00:00</option>
	<option>06:00</option>
	<option label="Noon">12:00</option>
	<option>18:00</option>
	</datalist></pre>
	</div>
	<!-- <div class="span4">
	<h3>input[type=datetime] datalist</h3>
	<p>For <code>datetime</code> type, <code>datalist</code> suggests a list of recommended datetimes. You can also specify labels for those datetimes by giving <code>label</code> attribute to <code>option</code> tags.</p>
	<input type="datetime" id="datetime" list="datetimes" />
	<div class="alert alert-error" style="display:none;">input[type=datetime] is not available on your browser</div>
	<datalist id="datetimes">
	<option label="Midnight">00:00</option>
	<option>06:00</option>
	<option label="Noon">12:00</option>
	<option>18:00</option>
	</datalist>
	<script>
	if (!Modernizr.inputtypes.datetime) {
	document.querySelector('#datetime').style.display = 'none';
	document.querySelector('#datetimes').previousElementSibling.style.display = 'block';
	}
	</script>
	<pre><input type="datetime" list="datetimes" />
	<datalist id="datetimes"&gt
	<option label="Midnight">00:00</option>
	<option>06:00</option>
	<option label="Noon">12:00</option>
	<option>18:00</option>
	</datalist></pre>
	</div>
	--> <div class="span4">
	<h3>input[type=datetime-local] datalist</h3>
	<p>For <code>datetime-local</code> type, <code>datalist</code> suggests a list of recommended datetime-locals. You can also specify labels for those datetime-locals by giving <code>label</code> attribute to <code>option</code> tags.</p>
	<input type="datetime-local" id="datetime-local" list="datetime-locals" />
	<div class="alert alert-error" style="display:none;">input[type=datetime-local] is not available on your browser</div>
	<datalist id="datetime-locals">
	<option label="Santa Visit">2012-12-24T23:59</option>
	<option label="Chrismas party">2012-12-25T18:00</option>
	<option>2012-12-30T00:00</option>
	<option label="Happy New Year">2013-01-01T00:00</option>
	</datalist>
	<script>
	if (!Modernizr.inputtypes['datetime-local']) {
	document.querySelector('#datetime-local').style.display = 'none';
	document.querySelector('#datetime-locals').previousElementSibling.style.display = 'block';
	}
	</script>
	<pre><input type="datetime-local" list="datetime-locals" />
	<datalist id="datetime-locals"&gt
	<option label="Santa Visit">2012-12-24T23:59</option>
	<option label="Chrismas party">2012-12-25T18:00</option>
	<option>2012-12-30T00:00</option>
	<option label="Happy New Year">2013-01-01T00:00</option>
	</datalist></pre>
	</div>
	<div class="span4">
	<h3>input[type=month] datalist</h3>
	<p>For <code>month</code> type, <code>datalist</code> suggests a list of recommended months. You can also specify labels for those months by giving <code>label</code> attribute to <code>option</code> tags.</p>
	<input type="month" id="month" list="months" />
	<div class="alert alert-error" style="display:none;">input[type=month] is not available on your browser</div>
	<datalist id="months">
	<option label="Eiji's birthday">1976-02</option>
	<option label="End of last century">2000-12</option>
	<option>2010-01</option>
	<option label="Now">2012-11</option>
	</datalist>
	<script>
	if (!Modernizr.inputtypes.month) {
	document.querySelector('#month').style.display = 'none';
	document.querySelector('#months').previousElementSibling.style.display = 'block';
	}
	</script>
	<pre><input type="month" list="months" />
	<datalist id="months"&gt
	<option label="Eiji's birthday">1976-02</option>
	<option label="End of last century">2000-12</option>
	<option>2010-01</option>
	<option label="Now">2012-11</option>
	</datalist></pre>
	</div>
	<div class="span4">
	<h3>input[type=week] datalist</h3>
	<p>For <code>week</code> type, <code>datalist</code> suggests a list of recommended weeks. You can also specify labels for those weeks by giving <code>label</code> attribute to <code>option</code> tags.</p>
	<input type="week" id="week" list="weeks" />
	<div class="alert alert-error" style="display:none;">input[type=week] is not available on your browser</div>
	<datalist id="weeks">
	<option label="First week of 2012">2012-W01</option>
	<option label="Second week of 2012">2012-W02</option>
	<option label="13th week of 2012">2012-W13</option>
	<option label="The last week of 2012">2012-W52</option>
	</datalist>
	<script>
	if (!Modernizr.inputtypes.week) {
	document.querySelector('#week').style.display = 'none';
	document.querySelector('#weeks').previousElementSibling.style.display = 'block';
	}
	</script>
	<pre><input type="week" list="weeks" />
	<datalist id="weeks"&gt
	<option label="First week of 2012">2012-W01</option>
	<option label="Second week of 2012">2012-W02</option>
	<option label="13th week of 2012">2012-W13</option>
	<option label="The last week of 2012">2012-W52</option>
	</datalist></pre>
	</div>
	</div>
	<br>
	<h2>Compatibility</h2>
	<p>Find out the latest compatibility at <a href="http://caniuse.com/#feat=datalist" title="When can I use">"When can I use"</a>.</p>
	<br>
	<h2>Learn more</h2>
	<p>datalist specification can be found <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-list-attribute" title="here">here</a>.</p>
	<hr>
	<footer class="footer">
	<p>This demo is developed by <a href="http://profiles.google.com/agektmr">Eiji Kitamura</a>.</p>
	</footer>
	</div> <!-- /container -->

	<script>
	var _gaq=[['_setAccount','UA-31105737-1'],['_trackPageview']];
	(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
	g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
	s.parentNode.insertBefore(g,s)}(document,'script'));
	</script>

	</body>
	</html>