Advertisement
Virajsinh

date range picker

Jun 3rd, 2020
400
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. //https://stackoverflow.com/questions/19651943/getting-the-value-of-daterangepicker-bootstrap
  2. //https://www.daterangepicker.com
  3.  
  4. <script type="text/javascript">
  5. var startDate;
  6. var endDate;
  7.  
  8. $(document).ready(function() {
  9.     $('#reportrange').daterangepicker(
  10.        {
  11.           startDate: moment().subtract('days', 29),
  12.           endDate: moment(),
  13.           minDate: '01/01/2012',
  14.           maxDate: '12/31/2014',
  15.           dateLimit: { days: 60 },
  16.           showDropdowns: true,
  17.           showWeekNumbers: true,
  18.           timePicker: false,
  19.           timePickerIncrement: 1,
  20.           timePicker12Hour: true,
  21.           ranges: {
  22.              'Today': [moment(), moment()],
  23.              'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
  24.              'Last 7 Days': [moment().subtract('days', 6), moment()],
  25.              'Last 30 Days': [moment().subtract('days', 29), moment()],
  26.              'This Month': [moment().startOf('month'), moment().endOf('month')],
  27.              'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
  28.           },
  29.           opens: 'left',
  30.           buttonClasses: ['btn btn-default'],
  31.           applyClass: 'btn-small btn-primary',
  32.           cancelClass: 'btn-small',
  33.           format: 'DD/MM/YYYY',
  34.           separator: ' to ',
  35.           locale: {
  36.               applyLabel: 'Submit',
  37.               fromLabel: 'From',
  38.               toLabel: 'To',
  39.               customRangeLabel: 'Custom Range',
  40.               daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
  41.               monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  42.               firstDay: 1
  43.           }
  44.        },
  45.        function(start, end) {
  46.         console.log("Callback has been called!");
  47.         $('#reportrange span').html(start.format('D MMMM YYYY') + ' - ' + end.format('D MMMM YYYY'));
  48.         startDate = start;
  49.          endDate = end;    
  50.  
  51.        }
  52.     );
  53.     //Set the initial state of the picker label
  54.     $('#reportrange span').html(moment().subtract('days', 29).format('D MMMM YYYY') + ' - ' + moment().format('D MMMM YYYY'));
  55.  
  56.     $('#saveBtn').click(function(){
  57.         console.log(startDate.format('D MMMM YYYY') + ' - ' + endDate.format('D MMMM YYYY'));
  58.     });
  59.  
  60.  });
  61.  
  62. //Anywhere to use strdate and enddt
  63. var strdt = $('#reportrange').data('daterangepicker').startDate.format('DD-MM-YYYY');
  64. var enddt = $('#reportrange').data('daterangepicker').endDate.format('DD-MM-YYYY');
  65.  
  66. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement