CODEWITHSUNDEEP
javascriptjqueryangularjs
participantjava
participantjava

Reputation: 195

some functionalities not working in datepicker

I'm working on bootstrap dateRange picker. Please find my working demo here

Below are the issues i'm facing:

Any suggestions to resolve this errors would be helpful. Are there any dateRange pickers available in angularjs and bootstrap which makes work easier.

PS: I want to look my dateRange picker as shown in the link

js code:

$(document).ready(function() {

  var cb = function(start, end, label) {
    console.log(start.toISOString(), end.toISOString(), label);
    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    console.log("Callback has fired: [" + start.format('MMMM D, YYYY') + " to " + end.format('MMMM D, YYYY') + ", label = " + label + "]");
  }

  var optionSet1 = {
    startDate: moment().subtract(1, 'days'),
    endDate: moment().subtract(1, 'days'),
    minDate: '08/01/2014',
    maxDate: '12/31/2014',
    dateLimit: {
      days: 60
    },
    showDropdowns: true,
    showWeekNumbers: true,
    timePicker: false,
    timePickerIncrement: 1,
    timePicker12Hour: true,
    ranges: {
      'Today': [moment(), moment()],
      'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
      'Last 7 Days': [moment().subtract(6, 'days'), moment()],
      'Last 30 Days': [moment().subtract(29, 'days'), moment()],
      'This Month': [moment().startOf('month'), moment().endOf('month')],
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    },
    opens: 'left',
    buttonClasses: ['btn btn-default'],
    applyClass: 'btn-small btn-primary',
    cancelClass: 'btn-small',
    format: 'MM/DD/YYYY',
    separator: ' to ',
    locale: {
      applyLabel: 'Submit',
      cancelLabel: 'Clear',
      fromLabel: 'From',
      toLabel: 'To',
      customRangeLabel: 'Custom',
      daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
      monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      firstDay: 1
    }
  };

  $('#reportrange span').html(moment().subtract(1, 'days').format('MMMM D, YYYY') + ' - ' + moment().subtract(1, 'days').format('MMMM D, YYYY'));

  $('#reportrange').daterangepicker(optionSet1, cb);

  $('#reportrange').on('show.daterangepicker', function() {
    console.log("show event fired");
  });
  $('#reportrange').on('hide.daterangepicker', function() {
    console.log("hide event fired");
  });
  $('#reportrange').on('apply.daterangepicker', function(ev, picker) {
    console.log("apply event fired, start/end dates are " + picker.startDate.format('MMMM D, YYYY') + " to " + picker.endDate.format('MMMM D, YYYY'));
  });
  $('#reportrange').on('cancel.daterangepicker', function(ev, picker) {
    console.log("cancel event fired");
  });
});

--EDITED--

I have following imports in my application.

  <script data-require="angular.js@*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
 <script src="jquery.js"></script>
     <script data-require="ui-bootstrap@*" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
      <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
     <script src="moment.js"></script>

I see no error in my console, but functionality is not working, the text field is blank and onclick of it, its not showing the calendar.

Please advice.enter image description here

Upvotes: 0

Views: 515

Answers (1)

Dan Grossman
Dan Grossman

Reputation: 52372

The dates are not highlighting when user is selecting the range.

You have failed to load the daterangepicker.css stylesheet on your site. You linked some "daterangepicker-bs3.css" file which doesn't exist so that's just a 404 error.

There are some options like Today,Yesterday,Last 7 Days..Custom in the datepicker which are not working When we click on the datepicker field.

You have set a minDate and maxDate dates of August to December 2014.

That means no date before August 2014 should be valid, and no date after December 2014 should be valid.

Today, yesterday, last week, etc are in 2017 not 2014, so they are not valid selections.

The calendar displayed is showing some old dates(November 2014 and December 2014).

Again, because of your minDate and maxDate settings say that only dates in August to December 2014 are valid.

These conflicting settings are the cause of your troubles. Either your minDate/maxDate are wrong, or your startDate/endDate/ranges are wrong.

Upvotes: 1

Related Questions