This component uses default semantic styles, will be updated in upcoming releases.
See docs for calendar component
Here
Date Picker
Show Code
<div class="ui calendar">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="Date/Time">
</div>
</div>
<script type="text/javascript">
$('.ui.calendar').calendar();
</script>
Calendar
| March 2025 |
|---|
| S | M | T | W | T | F | S |
|---|
| 23 | 24 | 25 | 26 | 27 | 28 | 1 |
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 | 1 | 2 | 3 | 4 | 5 |
Show Code
<div class="ui calendar">
</div>
<script type="text/javascript">
$('.ui.calendar').calendar();
</script>
Range Picker
Show Code
<div class="ui form">
<div class="two fields">
<div class="field">
<label>Start date</label>
<div class="ui calendar" id="rangestart">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="Start">
</div>
</div>
</div>
<div class="field">
<label>End date</label>
<div class="ui calendar" id="rangeend">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="End">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#rangestart').calendar({
type: 'date',
endCalendar: $('#rangeend')
});
$('#rangeend').calendar({
type: 'date',
startCalendar: $('#rangestart')
});
</script>