0

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>
  • I don't see where you have included the daterangepicker.js? – Keith C Feb 2 '16 at 15:18
  • HI Keith,<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" />, i added these two and still not getting anything – Anurag A Feb 2 '16 at 15:25
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.