语义UI日历

Question

语义UI日历的非常简单的代码，但日历未显示。有人可以解释原因。

 <div>
        <br/>
        <h2 class="ui header">
        <i class="calendar icon"></i>
          <div class="content"> 
            Set Lifetime of Form 
          </div>
        </h2>
        <select class="ui selection dropdown">
             <option value="">Choose Application Form Type</option>
             <option value="1">Application Form 1</option>
             <option value="0">Application Form 2</option>
        </select>
        <br/>
      <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>
    </div>
    <script type="text/javascript">
        $('#example1').calendar();
    </script>

Answer 1

您的代码已经有效。只需要仔细检查资源。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.js"></script>

https://jsfiddle.net/vandolphreyes29/xy3guqfv/

Answer 2

移动jquery

<script type="text/javascript">
    $(document).ready(function() {
        $('#example1').calendar();
    });
</script>