I'm hoping this is a very simple request and I'm just missing something obvious.
I'm using the DataTables DatePicker to allow a Date Range search and whilst it's working exactly as it should, I really want to set how far back (and forward) a user can select a date.
At the moment it allows a user to select back to 2009 and up to 2049. Ideally I'd want it so that the minimum date allowed is the first date from the data in the DataTable and then the max being the max. I'm happy to set a specific year if that isn't possible.
Can anyone help please?
Here's my code:
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script>
<script src="//cdn.datatables.net/v/dt/jszip-3.10.1/dt-1.13.8/b-2.4.2/b-html5-2.4.2/date-1.5.1/r-2.5.0/datatables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<html>
<body>
<div id="sales-daterange">
<span class="header">Date Range</span><br />
<span class="inputs">
<input type="text" id="datefrom" name="datefrom" class="daterange" placeholder="Order Date From" />
to <input type="text" id="dateto" name="dateto" class="daterange" placeholder="Order Date To" />
</span>
</div>
<!-- DATATABLE GOES HERE, GETTING DATA FROM AJAX, NOT SHOWING THAT BIT AS IT'S WORKING FINE -->
</body>
</html>
<script>
// Create date inputs
minDate = new DateTime('#datefrom', {
format: 'DD-MM-YYYY'
});
maxDate = new DateTime('#dateto', {
format: 'DD-MM-YYYY'
});
// Custom filtering function which will search data in column three between two values
DataTable.ext.search.push(function (settings, data, dataIndex) {
let min = moment($('#datefrom').val(), 'DD-MM-YYYY', true).isValid() ?
moment($('#datefrom').val(), 'DD-MM-YYYY').format('YYYYMMDD') : "";
let max = moment($('#dateto').val(), 'DD-MM-YYYY', true).isValid() ?
moment($('#dateto').val(), 'DD-MM-YYYY').format('YYYYMMDD') : "";
var date = moment( data[2], 'DD-MM-YYYY' ).format('YYYYMMDD');
if ( max <= "" ) {
max = "99991231";
}
if ( date >= min && date <= max ) {
return true;
}
return false;
});
</script>
If it can only be done by removing the HTML once the DataTable has been rendered, how would I go about that?
EDIT / UPDATE:
Thanks to @GrafiCode I've managed to set a min and max date by using min() and max() which is great!
However, if it's not in the current year (for example 2023), the popup doesn't automatically select that year meaning a user cannot select a date until they select the year.
I've tried using minDate.display(2023,3) (for example) to set the month and year on load but I got the following error:
Cannot read properties of null (reading 'setUTCFullYear')
What am I doing wrong?
UPDATE - WORKAROUND
To get this working, I've had to do some jiggery-pokery with showing the content in the popup and enabling it for selecting by the user when the page is loaded as a year that isn't the current year (in this example 2023):
<script>
$(".daterange").on("focus", function() {
$(".dt-datetime-year").prev("span").text(2023);
$(".dt-datetime-table td").removeClass("disabled");
$(".dt-datetime-button").attr("data-year", 2023);
$(".dt-datetime-iconRight").css("display","block");
});
</script>
Not the most ideal situation really... When a user selects back to January, the back arrow stick shows but will scroll round to December of that year instead. However, for now it works!