Jquery - Get minimum and maximum dates from JSON file for use with FlatPicker

HolisticDesigns
September 27, 2023
304 views
3 votes
4 Answers

I have an external file that is in the following format which i think is JSON but i am not 100% sure.

{"result":["2008-09-29T00:00:00","2008-09-30T00:00:00","2008-10-01T00:00:00","2008-10-02T00:00:00","2008-10-03T00:00:00","2008-10-06T00:00:00","2008-10-07T00:00:00","2008-10-08T00:00:00","2008-10-09T00:00:00","2008-10-10T00:00:00","2008-10-13T00:00:00","2008-10-14T00:00:00","2008-10-15T00:00:00","2008-10-16T00:00:00","2008-10-17T00:00:00","2008-10-20T00:00:00","2008-10-21T00:00:00","2008-10-22T00:00:00","2008-10-23T00:00:00","2008-10-24T00:00:00","2008-10-27T00:00:00","2008-10-28T00:00:00","2008-10-29T00:00:00","2008-10-30T00:00:00","2008-10-31T00:00:00","2008-11-03T00:00:00","2008-11-04T00:00:00","2008-11-05T00:00:00","2008-11-06T00:00:00","2008-11-07T00:00:00","2008-11-10T00:00:00","2008-11-11T00:00:00","2008-11-12T00:00:00","2008-11-13T00:00:00","2008-11-14T00:00:00","2008-11-17T00:00:00","2008-11-18T00:00:00","2008-11-19T00:00:00","2008-11-20T00:00:00","2008-11-21T00:00:00","2008-11-24T00:00:00","2008-11-25T00:00:00","2008-11-26T00:00:00","2008-11-27T00:00:00"]}

I am trying to get the miniumun date and maximum dates in the format MM/DD/YYYY so that i can use them in a Flatpicker minDate and maxDate options as per https://flatpickr.js.org/options/

I have tried using an AJAX call to the file to then get the minimum and maximumn dates but they are coming out with the same result which is ‘Thu Jan 01 1970 01:00:03 GMT+0100 (Greenwich Mean Time)’ when i console.log the var for maximumDate:

This is the AJAX call:

var webMethod = "path to my file";

$.ajax({
    type: "GET",
    url: webMethod,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
        var allAvailableDates = [];
        $.each(msg.result, function (record) {
            allAvailableDates.push( new Date( record) );
        });
        var maximumDate = new Date(Math.max.apply(null, allAvailableDates));
        console.log( maximumDate );
    },
    error: function (e) {
    }
} );

Does anyone know the best way to get the min and max dates from this data so they can be used as variables for Flatpicker

Thanks

Answers

From the result Array use Array.map to convert the date strings to real Dates, Math.min/Math.max to determine the maximum and minimum date from that and format the found dates:

const pad = nr => `${nr}`.padStart(2, `0`);
const format = d => `${pad(d.getMonth()+1)}/${pad(d.getDate())}/${d.getFullYear()}`;
const exampleData = {
  "result": ["2008-09-29T00:00:00", "2008-09-30T00:00:00", "2008-10-01T00:00:00", "2008-10-02T00:00:00", "2008-10-03T00:00:00", "2008-10-06T00:00:00", "2008-10-07T00:00:00", "2008-10-08T00:00:00", "2008-10-09T00:00:00", "2008-10-10T00:00:00", "2008-10-13T00:00:00", "2008-10-14T00:00:00", "2008-10-15T00:00:00", "2008-10-16T00:00:00", "2008-10-17T00:00:00", "2008-10-20T00:00:00", "2008-10-21T00:00:00", "2008-10-22T00:00:00", "2008-10-23T00:00:00", "2008-10-24T00:00:00", "2008-10-27T00:00:00", "2008-10-28T00:00:00", "2008-10-29T00:00:00", "2008-10-30T00:00:00", "2008-10-31T00:00:00", "2008-11-03T00:00:00", "2008-11-04T00:00:00", "2008-11-05T00:00:00", "2008-11-06T00:00:00", "2008-11-07T00:00:00", "2008-11-10T00:00:00", "2008-11-11T00:00:00", "2008-11-12T00:00:00", "2008-11-13T00:00:00", "2008-11-14T00:00:00", "2008-11-17T00:00:00", "2008-11-18T00:00:00", "2008-11-19T00:00:00", "2008-11-20T00:00:00", "2008-11-21T00:00:00", "2008-11-24T00:00:00", "2008-11-25T00:00:00", "2008-11-26T00:00:00", "2008-11-27T00:00:00"]
};
const dates = exampleData.result.map(d => new Date(d));
const [min, max] = [
  format(new Date(Math.min(...dates))), 
  format(new Date(Math.max(...dates))) ];
console.log(`min: ${min}; max: ${max}`);

Here is one way to do it using min/max:

let data = {"result":["2008-09-29T00:00:00","2008-09-30T00:00:00","2008-10-01T00:00:00","2008-10-02T00:00:00","2008-10-03T00:00:00","2008-10-06T00:00:00","2008-10-07T00:00:00","2008-10-08T00:00:00","2008-10-09T00:00:00","2008-10-10T00:00:00","2008-10-13T00:00:00","2008-10-14T00:00:00","2008-10-15T00:00:00","2008-10-16T00:00:00","2008-10-17T00:00:00","2008-10-20T00:00:00","2008-10-21T00:00:00","2008-10-22T00:00:00","2008-10-23T00:00:00","2008-10-24T00:00:00","2008-10-27T00:00:00","2008-10-28T00:00:00","2008-10-29T00:00:00","2008-10-30T00:00:00","2008-10-31T00:00:00","2008-11-03T00:00:00","2008-11-04T00:00:00","2008-11-05T00:00:00","2008-11-06T00:00:00","2008-11-07T00:00:00","2008-11-10T00:00:00","2008-11-11T00:00:00","2008-11-12T00:00:00","2008-11-13T00:00:00","2008-11-14T00:00:00","2008-11-17T00:00:00","2008-11-18T00:00:00","2008-11-19T00:00:00","2008-11-20T00:00:00","2008-11-21T00:00:00","2008-11-24T00:00:00","2008-11-25T00:00:00","2008-11-26T00:00:00","2008-11-27T00:00:00"]};


const min = new Date(Math.min(...data.result.map(i => new Date(i))));
const max = new Date(Math.max(...data.result.map(i => new Date(i))));
console.log(min, max)

The operation admits to a beautiful (well …) one-liner (reformatted for clarity) implementing the following steps:

Parse JSON (this is indeed the format of the data you have)
Map the Array which is the value of the result property to datestamps.
The array contains strings denoting dates in a format the JS Date object constructor understands. Using the .valueOf method on the constructed Date objects gives the epoch seconds – Actually this is not needed but included for clarity.
Deconstruct the array of epoch seconds into an argument list …
… for the Math object’s min function.

Note that the time zone of the current locale is irrelevant for the minimum search (any offset from choosing a different zone would apply to all dates in turn not changing the comparison results).

let m =
      Math.min(
        ...(
          JSON.parse('{"result":["2008-09-29T00:00:00","2008-09-30T00:00:00","2008-10-01T00:00:00","2008-10-02T00:00:00","2008-10-03T00:00:00","2008-10-06T00:00:00","2008-10-07T00:00:00","2008-10-08T00:00:00","2008-10-09T00:00:00","2008-10-10T00:00:00","2008-10-13T00:00:00","2008-10-14T00:00:00","2008-10-15T00:00:00","2008-10-16T00:00:00","2008-10-17T00:00:00","2008-10-20T00:00:00","2008-10-21T00:00:00","2008-10-22T00:00:00","2008-10-23T00:00:00","2008-10-24T00:00:00","2008-10-27T00:00:00","2008-10-28T00:00:00","2008-10-29T00:00:00","2008-10-30T00:00:00","2008-10-31T00:00:00","2008-11-03T00:00:00","2008-11-04T00:00:00","2008-11-05T00:00:00","2008-11-06T00:00:00","2008-11-07T00:00:00","2008-11-10T00:00:00","2008-11-11T00:00:00","2008-11-12T00:00:00","2008-11-13T00:00:00","2008-11-14T00:00:00","2008-11-17T00:00:00","2008-11-18T00:00:00","2008-11-19T00:00:00","2008-11-20T00:00:00","2008-11-21T00:00:00","2008-11-24T00:00:00","2008-11-25T00:00:00","2008-11-26T00:00:00","2008-11-27T00:00:00"]}'
          )
            .result
              .map( ps_dt => (new Date(ps_dt)).valueOf() )
        )
      );

console.log(`Min date: '${new Date(m)}' (in epoch seconds: ${m}).`);

Notes

Use max for min to compute, yes, the maximum.
For the sake of completeness, here is how to plug it into your code (the JSON has alteady been parsed when the function is called as the success callback):

    function (msg) {
        let m =
              Math.min(
                ...(
                  msg
                   .result
                     .map( ps_dt => new Date(ps_dt) )
                )
              )
          ;

        console.log(`Min date: '${new Date(m)}' (in epoch seconds: ${m}).`);
    }

Multiple aggregates

Pushing the one-liner idea, exploiting the fact that functions in JS are first-class citizens allows for computing multiple aggregates (min and max in this case) from the same set of data.

    let m =
          (( data, functions ) => 
                functions.map ( fn => fn(...data) ) // Apply each function  to the same data, which is provided as an array that is deconstructed into an argument list
          ) ( // Apply the function just defined right away 
                JSON.parse (
                    '{"result":["2008-09-29T00:00:00","2008-09-30T00:00:00","2008-10-01T00:00:00","2008-10-02T00:00:00","2008-10-03T00:00:00","2008-10-06T00:00:00","2008-10-07T00:00:00","2008-10-08T00:00:00","2008-10-09T00:00:00","2008-10-10T00:00:00","2008-10-13T00:00:00","2008-10-14T00:00:00","2008-10-15T00:00:00","2008-10-16T00:00:00","2008-10-17T00:00:00","2008-10-20T00:00:00","2008-10-21T00:00:00","2008-10-22T00:00:00","2008-10-23T00:00:00","2008-10-24T00:00:00","2008-10-27T00:00:00","2008-10-28T00:00:00","2008-10-29T00:00:00","2008-10-30T00:00:00","2008-10-31T00:00:00","2008-11-03T00:00:00","2008-11-04T00:00:00","2008-11-05T00:00:00","2008-11-06T00:00:00","2008-11-07T00:00:00","2008-11-10T00:00:00","2008-11-11T00:00:00","2008-11-12T00:00:00","2008-11-13T00:00:00","2008-11-14T00:00:00","2008-11-17T00:00:00","2008-11-18T00:00:00","2008-11-19T00:00:00","2008-11-20T00:00:00","2008-11-21T00:00:00","2008-11-24T00:00:00","2008-11-25T00:00:00","2008-11-26T00:00:00","2008-11-27T00:00:00"]}'
                )
                  .result
                    .map ( ps_dt => new Date(ps_dt) )
              , [
                    Math.min
                  , Math.max
                ]              
          );
          
    console.log(`Min/Max date: '${JSON.stringify(m.map( d => new Date(d) ))}' (in epoch seconds: ${JSON.stringify(m)}).`);

Because your dates are appropriately formatted (YYYY-MM-DD HH:MM:SS), you can simply sort them alphabetically. Then you can take the first and last elements of the array and format them as required using toLocaleDateString:

const msg = {"result":["2008-09-29T00:00:00","2008-10-02T00:00:00","2008-10-03T00:00:00","2008-10-06T00:00:00","2008-10-07T00:00:00","2008-10-08T00:00:00","2008-10-09T00:00:00","2008-10-10T00:00:00","2008-10-13T00:00:00","2008-10-14T00:00:00","2008-10-15T00:00:00","2008-10-16T00:00:00","2008-10-17T00:00:00","2008-10-20T00:00:00","2008-10-21T00:00:00","2008-09-30T00:00:00","2008-10-01T00:00:00","2008-10-22T00:00:00","2008-10-23T00:00:00","2008-10-24T00:00:00","2008-10-27T00:00:00","2008-10-28T00:00:00","2008-10-29T00:00:00","2008-10-30T00:00:00","2008-10-31T00:00:00","2008-11-03T00:00:00","2008-11-04T00:00:00","2008-11-05T00:00:00","2008-11-06T00:00:00","2008-11-07T00:00:00","2008-11-10T00:00:00","2008-11-11T00:00:00","2008-11-12T00:00:00","2008-11-13T00:00:00","2008-11-14T00:00:00","2008-11-17T00:00:00","2008-11-18T00:00:00","2008-11-19T00:00:00","2008-11-20T00:00:00","2008-11-21T00:00:00","2008-11-24T00:00:00","2008-11-25T00:00:00","2008-11-26T00:00:00","2008-11-27T00:00:00"]}

const dates = msg.result.sort()
const options = { 'day' : '2-digit', 'month' : '2-digit', 'year' : 'numeric' }
const minDate = new Date(dates[0]).toLocaleDateString('en-US', options)
const maxDate = new Date(dates[dates.length-1]).toLocaleDateString('en-US', options)
console.log(minDate, maxDate)

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – Get minimum and maximum dates from JSON file for use with FlatPicker

Answers