#html #jquery #date
#HTML #jquery #Дата
Вопрос:
Я использую дату ввода HTML5, как показано ниже :
<input type="date" id="start" name="trip-start"
value="2018-07-22"
min="2020-03-01" max="2021-03-31">
Ограничение даты срабатывает, если пользователь нажимает на значок выбора даты, но не при вводе пользователем формы.
Может быть, мы можем проверить ограничение с помощью jquery? Но пока не пытайтесь это сделать. Я постараюсь обработать это в jsfiddle, вот ссылка: https://jsfiddle.net/TheCuteCat/rcxjmse1 /
Ответ №1:
Я бы сделал что-то вроде:
//<![CDATA[
/* js/external.js */
let doc, htm, bod, nav, M, I, mobile, S, Q;
addEventListener('load', ()=>{
doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
S = (selector, within)=>{
var w = within || doc;
return w.querySelector(selector);
}
Q = (selector, within)=>{
var w = within || doc;
return w.querySelectorAll(selector);
}
// tiny library above - magic below
const date = I('date'), minDate = new Date('3/1/2020'), millisecondOverMaxDate = new Date('4/1/2020');
date.onchange = function(){
const a = this.value.split('-'), s = a.shift(), d = new Date(a.join('/') '/' s), t = d.getTime();
console.clear(); // remove consoles on deployment
if(t >= minDate amp;amp; t < millisecondOverMaxDate){
console.log('within range');
}
else{
console.log('out of range');
}
}
}); // end load /* css/external.css */
*{
box-sizing:border-box; color:#000; padding:0; margin:0; overflow:hidden;
}
html,body,.main{
width:100%; height:100%;
}
.main{
background:#333; overflow-y:auto; <!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
<title>Title Here</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script src='js/external.js'></script>
</head>
<body>
<div class='main'>
<input id='date' type='date' value='2018-07-22' min='2020-03-01' max='2021-03-31' />
</div>
</body>
</html> Комментарии:
1. Работает как шарм.. Это то, что мне нужно. Спасибо
Ответ №2:
Вот и все.
$(function() {
$("#datepicker").datepicker({ dateFormat: 'mm/dd/yy', minDate: '10/10/18', maxDate: '03/05/19' }).datepicker("setDate", '12/25/18');
}); div.ui-datepicker{
font-size:10px;
} <label>Date:</label>
<input type="text" id="datepicker">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.8.24/jquery-ui.min.js"
integrity="sha256-UOoxwEUqhp5BSFFwqzyo2Qp4JLmYYPTHB8l 1yhZij8="
crossorigin="anonymous"></script> ДЕМОНСТРАЦИЯ JSFIDDLE, потому что она работает лучше.
Комментарии:
1. Ограничение по-прежнему работает, только если пользователь выбирает значение из datepicker. Если пользователь вводит форму ввода, ограничение не может ее остановить.
2. Неправда, мой друг. Я пытаюсь ввести внешнюю дату, и она ее не принимает.
Ответ №3:
Я работал над этой проблемой и обнаружил, что функция focusout является лучшим решением, соответствующим моим требованиям. Это может помочь вам, если у вас есть аналогичные требования. Код jQuery:
$("#datefield").focusout(function(){
date = $("#datefield").val();
if(date>"2021-06-30" || date<"2020-07-01"){
alert("Please enter a valid date.");
$("#datefield").val("");
}
});
Комментарии:
1. Использование focusout выглядит хорошей идеей. Я проверю это позже. Но ‘date = $ («#datefield»).val()’ вернет строку, а не объект даты Java. (AFAIK, возврат средства выбора даты — это строка, а не объект date).. Таким образом, оператор if может не работать, поскольку он сравнивает строки.. Похоже, вам нужно сначала преобразовать его в объект Java date.. Попробуйте пример @stackslave.. Он преобразует его с помощью метода new Date (). Мое требование соответствует его совету..
Ответ №4:
Вы можете обработать это с помощью JavaScript.
function validateDate(event) {
const { name, value } = event.target;
const minDate = new Date('2020-03-01T00:00');
const maxDate = new Date('2021-03-31T00:00');
const inputDate = new Date(value 'T00:00');
// Limit the min and max dates users can input
const isValid = !isNaN(inputDate);
if (isValid amp;amp; inputDate >= minDate amp;amp; inputDate <= maxDate) {
return value;
}
}
Добавьте это к onChange ввода даты и сохраните возвращаемое значение в переменной, которая используется в качестве значения ввода.
Единственным недостатком является то, что это решение как бы мешает пользователю вводить годы после того, как они уже ввели месяц и день.