CODEWITHSUNDEEP
javascriptdate-rangedaterangepicker
Spider999
Spider999

Reputation: 135

Java Script Date Range Picker select only last 24 Hours

I am wondering if someone can explain the correct formatting I need to use for hours subtraction in Date Range Picker, or if this can even be done.

I have used the Date Range Picker ( https://www.daterangepicker.com ) to help me select a date the user can pick to show data but I would now like to make it work for the last 24 hours.

I can do that with this current code :

  $('input[name="datetimes"]').daterangepicker({
    opens: 'left',
    timePicker: false,
    showDropdowns: true,
    opens: 'left',
    timePicker24Hour: true,
    minYear:  new Date().getFullYear() - 5,
    maxDate: new Date(),
    minDate: new Date(new Date().setFullYear(new Date().getFullYear() - 5)),
        ranges: {
        'Today': [moment(), moment()],
        'Last 24 Hours': [moment().subtract(24, 'hours').format("YYYY,MM-DD"), moment().subtract(24, 'hours').format("YYYY,MM-DD")],
        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
        'This Month So Far': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
        'This Year So Far': [moment().startOf('year'), moment().endOf('year')],
        'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')]
    },
    locale: {
      format: 'DD/MM/YYYY'
    }
  }, function(start, end) {
    console.log(start._d.getTime()) //From
    console.log(end._d.getTime()) // To

Note how I have to subtract 24 hours and format the Date to use this code, but the other " Full day" options do not need this.

However, when I pick the "Last 24 Hours" I get "Invalid date - Invalid date" on the Date Range picker box. The code works perfectly ( besides the displayed text ), I use the function to update a link that is in an iframe with an element ID tag.

I would like to know why the code works for updating my links but displays the wrong value in the Date picker box.

I use

start._d.getTime()

and

end._d.getTime()

To find my time selection range, these give me the time in epoch.

The "Yesterday" option subtracts one day but it does not go from the current time today to the time 24 hours ago, it is from midnight to midnight.

I have tried editing the time format in the locale section but this always give me errors.

Ideally I would like the tag or box to say "Last 24 hours" when the Last 24 Hours option is selected, but I am more interested in why it is doing this and still working.

I get a NaN for the time variable in my browser console when I test it so I am even more confused.

I am thinking about using an If statement to check if the time value is NaN and if it is somehow display the better text of "Last 24 hours" on the selection box, letting the rest of the process happen as it is because it is somehow working right now.

If it makes a difference, I do load the graph with the last 24 hours in the link when I first laod the page, but the URL is not known to the JavaScript and is rewritten the first time the script runs in the HTML.

Hope this explains myself fully, any ideas would be a great help.

Upvotes: 0

Views: 847

Answers (1)

Timur
Timur

Reputation: 2287

Here you go:

$('input[name="datetimes"]').daterangepicker({
    timePicker: true,
    timePicker24Hour: true,
    showDropdowns: true,
    startDate: moment().subtract(6, 'days').startOf('day'),
    endDate: moment(),
    minYear: moment().subtract(5, 'year').year(),
    minDate: moment().subtract(5, 'year'),
    maxDate: moment(),
    ranges: {
      'Today': [moment().startOf('day'), moment()],
      'Last 24 Hours': [moment().subtract(24, 'hour'), moment()],
      'Yesterday': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
      'Last 7 Days': [moment().subtract(6, 'days').startOf('day'), moment()],
      'This Month So Far': [moment().startOf('month'), moment().endOf('month')],
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
      'This Year So Far': [moment().startOf('year'), moment().endOf('year')],
      'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')]
    },
    locale: {
      format: 'DD/MM/YYYY HH:mm'
    }
  },
  function(start, end) {
    console.log(start.toString()) //From
    console.log(end.toString()) // To);
  });
#demo {
  width: 250px;
}
<html>

<head>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
</head>

<body>
  <input id="demo" type="text" name="datetimes" />
</body>

</html>

Upvotes: 1

Related Questions