Не правильно работает календарь

236

26 ноября 2016, 17:50

Задание: Нужно сделать так, чтобы в поле можно было ввести дату не меньше чем послезавтрашний день и не больше чем на пол года больше, например если сегодня 15.11.2016, тогда должно быть не меньше 17.11.2016 (иначе дата должна становиться 17.11.2016) и не больше чем 15.05.2016 (если больше, нужно чтобы дата становилась 15.05.2016).

Проблема: Если ввести дату меньше чем послезавтра, например сегодняшний день (15.11.2016), тогда все работает, дата становится на два дня больше, а вот если дата больше чем +2 дня, тогда не работает.

Код с костылями, не так давно пишу на javascript, буду рад если кто-то исправит.

var myDate = new Date(); // получаем текущую дату №1 
var todayDate = new Date(); // получаем текущую дату №2 
 
myDate.setDate(myDate.getDate()+2); // к дате №1 добавляем 2 дня 
todayDate.setMonth(todayDate.getMonth()+6); // к дате №2 добавляем 6 месяцев 
 
var tomorrow = ("0" + (myDate.getDate())).slice(-2) + '.' + ("0" + (myDate.getMonth() + 1)).slice(-2) + '.' + myDate.getFullYear(); // делаем дату №1 вида 31.12.2016 
 
var pieceyear = ("0" + (todayDate.getDate())).slice(-2) + '.' + ("0" + (todayDate.getMonth() + 1)).slice(-2) + '.' + todayDate.getFullYear(); // делаем дату №2 вида 31.12.2016 
 
$('#datepicker').val(tomorrow); // значение поля становится на 2 дня больше сегодняшнего дня 
 
function datevalidate() { 
	if($('#datepicker').val() < tomorrow) { // если дата меньше чем послезавтра 
		$('#datepicker').val(tomorrow); // присваиваем дату послезавтра 
	} else if ($('#datepicker').val() > pieceyear) { // если дата больше чем + пол года 
		$('#datepicker').val(pieceyear); // присваиваем дату на пол года больше 
	} 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="datepicker" onchange="datevalidate()">

Answer 1

Проблема в том, что ты сравниваешь строки. А строки сравниваются посимвольно и в текущем формате дата послезавтра больше чем через полгода.

console.log('17.11.2016', '15.05.2017', '17.11.2016' > '15.05.2017')

В качестве решения можно поменять формат для сравнения. В формате yyyy-MM-dd сравнение дат происходит корректно даже если даты в строке.

console.log('2016.11.17', '2017.05.15', '2016.11.17'> '2017.05.15')

Если формат в инпуте принципиален, при проверке можно просто перегруппировать части строки, например с помощью регулярного выражения:

var myDate = new Date(); // получаем текущую дату №1 
var todayDate = new Date(); // получаем текущую дату №2 
 
function dateFormat(date) { 
  return date.getFullYear() + '.' + ("0" + (date.getMonth() + 1)).slice(-2) + '.' + ("0" + (date.getDate())).slice(-2); 
} 
 
function outputDate(date) { 
  return date.replace(/(\d+)\.(\d+)\.(\d+)/, '$3.$2.$1'); 
} 
 
myDate.setDate(myDate.getDate() + 2); // к дате №1 добавляем 2 дня 
todayDate.setMonth(todayDate.getMonth() + 6); // к дате №2 добавляем 6 месяцев 
 
var tomorrow = dateFormat(myDate); // делаем дату №1 вида 2016.12.31 
 
var pieceyear = dateFormat(todayDate); // делаем дату №2 вида 2016.12.31 
 
$('#datepicker').val(outputDate(tomorrow)); // значение поля становится на 2 дня больше сегодняшнего дня 
 
function datevalidate() { 
  var value = outputDate($('#datepicker').val()); 
  if (value < tomorrow) { // если дата меньше чем послезавтра 
    $('#datepicker').val(outputDate(tomorrow)); // присваиваем дату послезавтра 
  } else if (value > pieceyear) { // если дата больше чем + пол года 
    $('#datepicker').val(outputDate(pieceyear)); // присваиваем дату на пол года больше 
  } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="datepicker" onchange="datevalidate()">

Но лучше работать с датами:

var tomorrow = new Date(); // получаем текущую дату №1 
var pieceyear = new Date(); // получаем текущую дату №2 
 
function dateFormat(date) { 
  return ("0" + (date.getDate())).slice(-2) + '.' + ("0" + (date.getMonth() + 1)).slice(-2) + '.' + date.getFullYear(); 
} 
 
function parseDate(dateStr) { 
  var parts = dateStr.split('.'); 
  return new Date(+parts[2], -1 + (+parts[1]), +parts[0]); 
} 
 
tomorrow.setDate(tomorrow.getDate() + 2); // к дате №1 добавляем 2 дня 
pieceyear.setMonth(pieceyear.getMonth() + 6); // к дате №2 добавляем 6 месяцев 
 
$('#datepicker').val(dateFormat(tomorrow)); // значение поля становится на 2 дня больше сегодняшнего дня 
 
function datevalidate() { 
  var value = parseDate($('#datepicker').val()); 
  if (value < tomorrow) { // если дата меньше чем послезавтра 
    $('#datepicker').val(dateFormat(tomorrow)); // присваиваем дату послезавтра 
  } else if (value > pieceyear) { // если дата больше чем + пол года 
    $('#datepicker').val(dateFormat(pieceyear)); // присваиваем дату на пол года больше 
  } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="datepicker" onchange="datevalidate()">

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Подсвечивание пустых input?

Не подсвечиваются пустой input

308

javascript

BabelJS и кириллица

Подскажите, использую следующий код

236

javascript

tinymce 4 как добавить активацию кнопки

Сама кнопка работает нормально, только не активируется, если навести курсор на элемент

331

javascript

Ошибка “No 'Access-Control-Allow-Origin' header is present on the requested resource.” во время кроссдоменного ajax запроса [закрыто]

Пишу приложение на cordovaПытаюсь отправить ajax запрос на сервер

292