Fomantic-UI Sandbox

by brigand

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="https://semantic-ui.com/dist/semantic.min.css">
<script src="https://semantic-ui.com/dist/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/components/calendar.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/components/calendar.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/components/popup.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/components/popup.css">
<h2 class="ui dividing header">
  Fomantic-UI Sandbox
  <div class="sub header">Fork this JSFiddle by hitting the button above</div>
</h2>
            
            <div class="ui calendar" id="year_first_calendar">
                <div class="ui input left icon">
                    <i class="calendar icon"></i>
                    <input placeholder="DOB" type="text">
                </div>
            </div>

CSS

body {
  padding: 1em;
}

JavaScript

// Add javascript here
    function updateDOB(date) {console.log(date.toISOString()) }
$( document ).ready(function() {
        // calendar input for DOB
        $('#year_first_calendar')
            .calendar({
                type: 'date',
                startMode: 'year',
                initialDate: '',
                maxDate: new Date(),
                currentCentury: '1900',
                onChange: updateDOB
            });
});