CODEWITHSUNDEEP
javascripthtml
gravestones
gravestones

Reputation: 31

How to insert JavaScript source code directly into an HTML file?

I have two calendars in HTML that when you click on two dates, it shows the days between the two dates. This works perfectly for me since I just used jQuery code I found online, but the people I will be handing this HTML file to do not have any access to the links of my source code. They also don't have any access to any local shared drive where I can download the scripts and save it there.

Is there any way for me to directly add jQuery codes to the HTML file itself so that the people who will be using it will not need access to anything to use it properly? Sorry, I am only learning HTML/jQuery as I'm doing it and cannot find any solutions to my problem.

I already tried downloading the flies of the source codes to a share drive, it works perfectly but others do not have access to it. They are not allowed to save anything on their own desktops either. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

      <label>DATE TODAY:</label>
        <div class="input-group date" id="initialDate">
          <input type='text' name="initialDate" class="form-control" />
          <span class="input-group-addon">
           <span class="glyphicon glyphicon-calendar"></span>
          </span>
      </div>


      <label>EXPECTED DATE:</label>
        <div class='input-group date' id='finalDate'>
          <input type='text' name="finalDate" class="form-control" />
          <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
          </span>

        </div>
        <br><label>Days between: </label> <span id="days"></span>


function CalculateDayends() {
  var initialDate = $("#initialDate").data('date');
  var finalDate = $("#finalDate").data('date');
  var diff = Math.floor((Date.parse(initialDate)- Date.parse(finalDate)) / 86400000);
  $("#days").text(diff);
}


$("#finalDate").on('dp.change', function() {
  CalculateDayends();
});

$('#initialDate').datetimepicker({
  format: 'YYYY-MM-DD'
});

$('#finalDate').datetimepicker({
  format: 'YYYY-MM-DD'
});

Upvotes: 1

Views: 317

Answers (1)

Ross Brigoli
Ross Brigoli

Reputation: 696

<script>your js code goes here</script>

Upvotes: 1

Related Questions