The calendar does not work correctly

Question

Task : It is necessary to make it so that you can enter a date in the field no less than the day after tomorrow and no more than half a year more , for example, if today is 15.11.2016 , then it should be at least 17.11.2016 (otherwise the date should become 17.11.2016 ) and no more than 15.05.2016 (if more, you need the date to become 15.05.2016 ) .

Problem : If you enter a date less than the day after tomorrow, for example, today (11/15/2016), then everything works, the date becomes two days longer, but if the date is more than +2 days, then it does not work.

Code with crutches, not so long ago I am writing to javascript, I will be glad if someone fixes it.

 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()">

Grundy grundy 58.6k 7 49 93 · Accepted Answer · 2016-11-15T20:59:26

The problem is that you compare strings. And the strings are compared character by character and in the current format the date is the day after tomorrow in more than six months .

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

As a solution, you can change the format for comparison. In the yyyy-MM-dd format, the date comparison is correct even if the dates in the string.

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

If the format in the principle is fundamental, when checking, you can simply rearrange parts of the string, for example, using a regular expression:

 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()">

But it’s better to work with dates:

 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()">

there is just one more bug, if you type 99 for example in the field, then it will.
I thought to make it look like хх.хх.хххх , what do you think?

The calendar does not work correctly

1 answer 1

More articles: