perso-hebdo/js/pickadate.js-3.5.3/_docs/index.htm

{%
    fileSize_js_core = meta.fileSize( grunt.file.read( dirs.lib.min + '/picker.js') ).gzip
    fileSize_js_date = meta.fileSize( grunt.file.read( dirs.lib.min + '/picker.date.js') ).gzip
    fileSize_js_time = meta.fileSize( grunt.file.read( dirs.lib.min + '/picker.time.js') ).gzip

    fileSize_css_core = meta.fileSize( grunt.file.read( dirs.themes.min + '/default.css') ).gzip
    fileSize_css_date = meta.fileSize( grunt.file.read( dirs.themes.min + '/default.date.css') ).gzip
    fileSize_css_time = meta.fileSize( grunt.file.read( dirs.themes.min + '/default.time.css') ).gzip

    fileSize_js = fileSize_js_core + fileSize_js_date + fileSize_js_time
    fileSize_js = (fileSize_js/1024).toFixed(0)

    fileSize_css = fileSize_css_core + fileSize_css_date + fileSize_css_time
    fileSize_css = (fileSize_css/1024).toFixed(0)

    languagesCount = grunt.file.expand(dirs.translations.min + '/*.js').length
%}

<section class="section">

    <div class="section__block section__block--scoped">

        <h2 class="heading heading--one heading--divide heading--divide-first"><span class="heading__text">Demo<a class="heading__anchor" name="demo" href="#demo">&sect;</a></span></h2>

        <pre class="pre--demo"><code data-language="javascript">// The date picker (<a href="date.htm">read the docs</a>)
$('.datepicker').pickadate()</code></pre>
        <fieldset class="fieldset fieldset--demo"><div class="fieldset__wrapper"><input class="fieldset__input js__datepicker" type="text" placeholder="Try me&hellip;"></div></fieldset>

        <pre class="pre--demo"><code data-language="javascript">// The time picker (<a href="time.htm">read the docs</a>)
$('.timepicker').pickatime()</code></pre>
        <fieldset class="fieldset fieldset--demo"><div class="fieldset__wrapper"><input class="fieldset__input js__timepicker" type="text" placeholder="Try me&hellip;"></div></fieldset>

        <div class="heading--three">
            <p>There’s a tonne of options to customize the <a href="date.htm">date</a> and <a href="time.htm">time</a> pickers, such as month/year selectors, time intervals, etc.</p>
            <p>There’s also a rich <a href="api.htm">API</a> to extend the functionality of the picker. Some examples are <a href="http://codepen.io/collection/vLcih">displayed on Codepen</a>.</p>
        </div>

        <div class="section__block section__block--notification">
            <p>When using the “classic” theme, it is important to have a wrapper <code>div</code> with <code>position: relative</code> around the source <code>input</code> to ensure the picker is sized according to the <code>input</code> element it is bound to.</p>
        </div>

    </div> <!-- .section__block -->

    <div class="section__block section__block--scoped">

        <h2 class="heading heading--one heading--divide"><span class="heading__text">Features<a class="heading__anchor" name="features" href="#features">&sect;</a></span></h2>

        <div class="heading--three">
            <ul class="list list--checked">
                <li>Supports <a href="http://jquery.com">jQuery</a>  1.7 and up.</li>
                <li>Is ARIA-enabled to be WCAG 2.0 compliant. <small class="text-dimmed">(added in v3.4)</small></li>
                <li>Leaves a tiny footprint of {%= fileSize_js %}kb JS and {%= fileSize_css %}kb CSS. <small class="text-dimmed">(minified and gzipped)</small></li>
                <li>Comes with translations for {%= languagesCount %} languages.</li>
                <li>Has touch &amp; keyboard friendliness.</li>
                <li>Follows <a href="http://bem.info/">BEM</a> style class naming.</li>
                <li>Utilizes <a href="http://lesscss.org/">LESS</a> based stylesheets.</li>
                <li>Includes a <a href="http://gruntjs.com/">Grunt</a> based build system.</li>
            </ul>
        </div>

    </div> <!-- .section__block -->

    <div class="section__block section__block--scoped">

        <h2 class="heading heading--one heading--divide"><span class="heading__text">Browser Support<a class="heading__anchor" name="browser-support" href="#browser-support">&sect;</a></span></h2>

        <p class="heading--three">Supports all modern browsers – and IE8+.</p>
        <p>Specifically, v3 has been tested with <a href="https://www.google.com/chrome/">Chrome</a> <small class="text-dimmed text-tiny">MWA</small>, <a href="http://www.mozilla.org/firefox/">Firefox</a> <small class="text-dimmed text-tiny">MWA</small>, <a href="http://www.opera.com/">Opera</a> <small class="text-dimmed text-tiny">MWA</small>, <a href="http://www.apple.com/ca/safari/">Safari</a> <small class="text-dimmed text-tiny">Mi</small>, <a href="http://windows.microsoft.com/ie/">Internet Explorer</a> <small class="text-dimmed text-tiny">W</small>, <a href="http://www.blackberry.com/">Blackberry</a> 6.0+ and <a href="http://www.android.com/">Android</a> 3.2+ browsers.</p>

        <small class="text-dimmed text-tiny">
            <p>M = Mac, W = Windows, A = Android, i = iOS</p>
        </small>

        <div class="section__block section__block--notification">
            <p>Make sure to also include the <code>legacy.js</code> file along for the oldie&nbsp;browsers.</p>
        </div>

    </div> <!-- .section__block -->

    <div class="section__block section__block--scoped">

        <h2 class="heading heading--one heading--divide"><span class="heading__text">Community<a class="heading__anchor" name="community" href="#community">&sect;</a></span></h2>

        <p class="heading--three"><i><b>pickadate</b>.js</i> is an open source project, shared under an <a href="{%= pkg.licenses.url %}">MIT license</a>. All <a href="{%= meta.gitrepo_url %}">code</a> and <a href="{%= pkg.bugs %}">discussions</a> are hosted on Github.</p>
        <p>Contributions are very welcome – <a href="{%= meta.gitrepo_url %}/blob/gh-pages/CONTRIBUTING.md">please read these pointers</a> before submitting a bug report or feature request.</p>
        <p>If you find this library useful and would like to see further development, consider <a href="http://selz.co/1g80kCZ">supporting it</a>.</p>

    </div> <!-- .section__block -->

</section> <!-- .section -->