JSFiddle - React, Tailwind, and code Playground
HTML
<form id="price_analysis">
<label for="from">From date:</label>
<input id="from" class="datepicker from" type="text" value="" />
<label for="to">To date:</label>
<input id="to" class="datepicker to" type="text" value="" />
<input id="chartUpdateButton" type="submit" value="Update Chart" />
</form>
JavaScript
$.icisBoard = {};
// From date - default is today's date minus one year
$('#price_analysis .from').datepicker({
constrainInput: true,
dateFormat: 'yy-mm-dd',
defaultDate: '-1y',
gotoCurrent: true,
hideIfNoPrevNext: true,
minDate: '-1y',
maxDate: 0,
showOn: 'both'
});
// To date - default to today's date
$('#price_analysis .to').datepicker({
constrainInput: true,
dateFormat: 'yy-mm-dd',
defaultDate: new Date(),
gotoCurrent: true,
hideIfNoPrevNext: true,
minDate: '-1y',
maxDate: 0,
showOn: 'both'
});
$('#chartUpdateButton').live('click', function() {
// use datepicker native formatDate to format date into string of specified format
// push dates into EU format dd/mm/yy regardless of default
$.icisBoard.$formatFromDate = $('#price_analysis .from').val();
$.icisBoard.$formatToDate = $('#price_analysis .to').val();
$.icisBoard.$formatFromDate = $.datepicker.formatDate('dd/mm/yy', new Date($.icisBoard.$formatFromDate));
$.icisBoard.$formatToDate = $.datepicker.formatDate('dd/mm/yy', new Date($.icisBoard.$formatToDate));
if (!dateRangeIsValid()) {
alert('Not a valid date range');
}
else {
alert('This is now a valid date range!');
//loadChart();
//closeFlyout();
}
return false;
});
// JavaScript Date.parse will use US formatting for dates (mm/dd/yy)
// need to convert string to UK format and then validate
function euDate(dateString) {
var dateParts = dateString.split('/');
var convertedDate = Date.parse(new Date(dateParts[1] + "/" + dateParts[0] + "/" + dateParts[2]));
return convertedDate;
}
function dateRangeIsValid() {
var currentDate = Date.parse(new Date());
var fromDate = euDate($.icisBoard.$formatFromDate);
var toDate = euDate($.icisBoard.$formatToDate);
alert(currentDate);
alert(fromDate);
alert(toDate);
if (isNaN(fromDate) ||...