Semantic-ui (Modal and Calendar)

Learn how to create Semantic-ui (Modal and Calendar) using html, css and/or js.

<div class="ui united modal" id="modal1">
	<div class="header">Modal 1</div>
	<div class="content">Some info will go here...</div>
	<div class="actions">
		<div class="ui blue labeled icon button" id="btn-modal-1"><i class="arrow sign left icon"></i>Close me and Call modal 2</div>
	</div>
</div>

<div class="ui united fullscreen modal" id="modal2">
 <div class="header"> Modal 2 </div>
 <div class="content">If you want to close previous modals before show the next modal, you should disable the parameter <b>'allowMultiple'</b>.  </div>
 <div class="actions">
  	<div class="ui red labeled icon button" id="btn-modal-2"><i class="arrow sign left icon"></i>Close me and Call modal 3</div>
 </div>
</div>

<div class="ui united small modal" id="modal3">
 <div class="header"> Modal 3 </div>
 <div class="content"> Hello World </div>
 <div class="actions">
  <div class="ui blue labeled icon button" id="btn-modal-3"> <i class="checkmark icon"></i> Close All and Finish. </div> </div>
</div>

<div class="ui small modal" id="modal4">
 <div class="header"> Don't talk with me! </div>
 <div class="content"> :'( darkness my only old friend... <br> I don't have the class <b>.united</b></div>
 <div class="actions"><div class="ui secondary button"> Close me! </div></div>
</div>

<center style="padding: 30px;">
	<button data-modal="modal1" id="call-modals" class="ui green button">Call Modal 1, 2 and 3</button>
	<button data-modal="modal2" id="call-modal-2" class="ui red button">Call Modal 2 and 3 after it</button>
	<button data-modal="modal3" id="call-modal-3" class="ui orange button">Call Modal 3 only</button>
	<button data-modal="modal4" id="call-modal-4" class="ui secondary button">Call Bored Modal Alone in the dark</button>
</center>

<div class="ui container">
  <h1>Calendar examples</h1>
  
  <h3>Input</h3>
  <div class="ui calendar" id="example1">
    <div class="ui input left icon">
      <i class="calendar icon"></i>
      <input type="text" placeholder="Date/Time">
    </div>
  </div>
  <br/>
  <h3>Date only</h3>
  <div class="ui calendar" id="example2">
    <div class="ui input left icon">
      <i class="calendar icon"></i>
      <input type="text" placeholder="Date">
    </div>
  </div>
  <br/>
    
  <h3>Time only</h3>
  <div class="ui calendar" id="example3">
    <div class="ui input left icon">
      <i class="time icon"></i>
      <input type="text" placeholder="Time">
    </div>
  </div>
  <br/>
    
  <h3>Range</h3>
  <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>
  <br/>
  
  <h3>Year first</h3>
  <div class="ui calendar" id="example4">
    <div class="ui input left icon">
      <i class="calendar icon"></i>
      <input type="text" placeholder="Date/Time">
    </div>
  </div>
  <br/>
    
  <h3>Initial value</h3>
  <div class="ui calendar" id="example5">
    <div class="ui input left icon">
      <i class="calendar icon"></i>
      <input type="text" placeholder="Date" value="5/30/2015 3pm">
    </div>
  </div>
  <br/>
    
  <h3>24-hour</h3>
  <div class="ui calendar" id="example6">
    <div class="ui input left icon">
      <i class="time icon"></i>
      <input type="text" placeholder="Time">
    </div>
  </div>
  <br/>
    
  <h3>Month and year</h3>
  <div class="ui calendar" id="example7">
    <div class="ui input left icon">
      <i class="time icon"></i>
      <input type="text" placeholder="Time">
    </div>
  </div>
  <br/>
    
  <h3>Year only</h3>
  <div class="ui calendar" id="example8">
    <div class="ui input left icon">
      <i class="time icon"></i>
      <input type="text" placeholder="Time">
    </div>
  </div>
  <br/>
  
  <h3>Button</h3>
  <div class="ui calendar" id="example9">
    <div class="ui button">Select date</div>
  </div>
  <br/>
  
  <h3>Hover</h3>
  <div class="ui calendar" id="example10">
    <div class="ui button">Hover me</div>
  </div>
  <br/>
  
  <h3>Min/Max date</h3>
  <div class="ui calendar" id="example11">
    <div class="ui input">
      <input type="text" placeholder="Date">
    </div>
  </div>
  <br/>
  
  <h3>Day first</h3>
  <div class="ui calendar" id="example12">
    <div class="ui input">
      <input type="text" placeholder="Date">
    </div>
  </div>
  <br/>
  
  <h3>Custom format</h3>
  <div class="ui calendar" id="example13">
    <div class="ui input">
      <input type="text" placeholder="Date">
    </div>
  </div>
  <br/>
  
  <h3>Inline</h3>
  <div class="ui calendar" id="example14">
  </div>
  <br/>
  
  <h3>Implicit inline (no popup activator)</h3>
  <div class="ui calendar" id="example15">
  </div>
  <br/>
</div>

//CALENDAR

$('#example1').calendar();
$('#example2').calendar({
  type: 'date'
});
$('#example3').calendar({
  type: 'time'
});
$('#rangestart').calendar({
  type: 'date',
  endCalendar: $('#rangeend')
});
$('#rangeend').calendar({
  type: 'date',
  startCalendar: $('#rangestart')
});
$('#example4').calendar({
  startMode: 'year'
});
$('#example5').calendar();
$('#example6').calendar({
  ampm: false,
  type: 'time'
});
$('#example7').calendar({
  type: 'month'
});
$('#example8').calendar({
  type: 'year'
});
$('#example9').calendar();
$('#example10').calendar({
  on: 'hover'
});
var today = new Date();
$('#example11').calendar({
  minDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() - 5),
  maxDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 5)
});
$('#example12').calendar({
  monthFirst: false
});
$('#example13').calendar({
  monthFirst: false,
  formatter: {
    date: function (date, settings) {
      if (!date) return '';
      var day = date.getDate();
      var month = date.getMonth() + 1;
      var year = date.getFullYear();
      return day + '/' + month + '/' + year;
    }
  }
});
$('#example14').calendar({
  inline: true
});
$('#example15').calendar();
</script>

Semantic-ui (Modal and Calendar)

Random HTML Example Codes: