Vanilla datepicker

Open datepicker

Add data-modal attribute to your links and use href attribute to define what should be opened in the modal.

    <div id="example-1" class="example">
        <input type="text" class="datepicker" />
        <input type="text" class="datepicker" />
        <input type="text" class="datepicker" />
    </div>
    <script type="text/javascript">
    datepicker( '.datepicker', {
        firstDayOfWeek: 1,
        months: {
            short: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sept', 'Oct', 'Nov', 'Déc'],
            long: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
        },
        weekdays: {
            short: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
            long: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']
        }
    } );
    </script>
        

Options

    datepicker.defaults = {
        firstDayOfWeek: 0,          // First day of week 
        months: {                   // Month formats
            short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            long: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
        },
        navigateYear: true,         // Display year navigation
        outputFormat:'%Y-%m-%d',    // Date  output format
        weekdays: {
            short: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            long: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
        }
    }