Twitter datepicker on vf page

Question

I'm trying to create a date range picker on my vf page.

I used the demo from the following link. http://www.daterangepicker.com/ from the section "Input initially empty".

The code is getting saved but I'm not getting any date picker on the page. I debugged using console, i could find "GET https://login.salesforce.com/17181/logo180.png 404 (Not Found)" this error.

Not sure if this is causing an issue or not.

Can you please help me getting the date range picker...!!

Below is my code:

<apex:page>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js">
 </script‌​>     
 <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
$(document).ready(function () {

  $('input[name="datefilter"]').daterangepicker({
      autoUpdateInput: false,
      locale: {
          cancelLabel: 'Clear'
      }
  });

  $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
      $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
  });

  $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
      $(this).val('');
  });

});
</script>
<apex:form>
<input type="text" name="datefilter" value="" />


</apex:form>
</apex:page>

Answer 1

It worked for me. I missed the daterangepicker sources.

I add these,

src="//cdn.jsdelivr.net/jquery/1/jquery.min.js">
src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js">
href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css"
src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"
href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css"

and it works.

Thank you