DatePickercomponent

This component required metro-calendar.js and metro-datepicker.js

<div class="input-control text">
    <input type="text">
    <button class="btn-date"></button>
</div>

Init with data-* API:

<div class="input-control text" data-role="datepicker"
    data-date='set the initial date'
    data-format='format output'
    data-effect='slide | fade | none'
    data-locale='en | fr | ua | ru'
    data-week-start='0 | 1'
    data-other-days='0 | 1'>
    <input type="text">
    <button class="btn-date"></button>
</div>

Init with Javascript:

<div class="input-control text" id="datepicker">
    <input type="text">
    <button class="btn-date"></button>
</div>

<script>
    $("#datepicker").datepicker();
</script>

To set params you can use data-* api or javascript:

// Data-* API
<div class="input-control text" data-role="datepicker"
    data-date="2013-01-01"
    data-format="d/m/y"
    data-position="top|bottom"
    data-effect="none|slide|fade">
    <input type="text">
    <button class="btn-date"></button>
</div>

// Javascript
<script>
    $("#datepicker").datepicker({
        date: "2013-01-01", // set init date
        format: "d/m/y", // set output format
        effect: "none", // none, slide, fade
        position: "bottom", // top or bottom,
        locale: ''en, // 'ru' or 'en', default is $.Metro.currentLocale
    });
</script>