Мені цікаво, чи можна встановити формат дати в html- <input type="date"></input>
тезі ... В даний час це yyyy-mm-dd, тоді як мені це потрібно у форматі dd-mm-yyyy
Мені цікаво, чи можна встановити формат дати в html- <input type="date"></input>
тезі ... В даний час це yyyy-mm-dd, тоді як мені це потрібно у форматі dd-mm-yyyy
Відповіді:
Ви цього не робите.
По-перше, ваше питання неоднозначне - ви маєте на увазі формат, у якому він відображається користувачеві, або формат, у якому він передається на веб-сервер?
Якщо ви маєте на увазі формат, у якому він відображається користувачеві, то це вниз до інтерфейсу для кінцевого користувача, а не до того, що ви вказали в HTML. Зазвичай, я б очікував, що він базується на форматі дати, який він встановлений в локальних налаштуваннях операційної системи. Немає сенсу намагатися замінити його на власний бажаний формат, оскільки формат, в якому він відображається, є (як правило) правильним для мови користувача та формату, який користувач використовує для запису / розуміння дат.
Якщо ви маєте на увазі формат, у якому він передається на сервер, ви намагаєтеся виправити неправильну проблему. Що потрібно зробити, це запрограмувати код на стороні сервера, щоб він приймав дати у форматі "yyyy-mm-dd".
input[type=password]
йдеться про те, що "користувальницький агент повинен затіняти значення, щоб люди, окрім користувача, не могли його бачити", що є такою ж презентацією, як і те, що користувачеві агент повинен дати певну дату.
Я знайшов те саме питання або пов'язане з ним питання на stackoverflow
Чи є спосіб змінити тип вводу = формат «дата»?
Я знайшов одне просте рішення: Ви не можете надати формат частинок, але ви можете налаштувати, як це.
HTML-код:
<body>
<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="ndt" onclick="mydate();" hidden />
<input type="button" Value="Date" onclick="mydate();" />
</body>
CSS-код:
#dt{text-indent: -500px;height:25px; width:200px;}
Код Javascript:
function mydate()
{
//alert("");
document.getElementById("dt").hidden=false;
document.getElementById("ndt").hidden=true;
}
function mydate1()
{
d=new Date(document.getElementById("dt").value);
dt=d.getDate();
mn=d.getMonth();
mn++;
yy=d.getFullYear();
document.getElementById("ndt").value=dt+"/"+mn+"/"+yy
document.getElementById("ndt").hidden=false;
document.getElementById("dt").hidden=true;
}
Вихід:
Якщо ви використовуєте jQuery, ось приємний простий метод
$("#dateField").val(new Date().toISOString().substring(0, 10));
Або є старий традиційний спосіб:
document.getElementById("dateField").value = new Date().toISOString().substring(0, 10)
Чому б не використовувати контроль дати html5 таким, яким він є, з іншими атрибутами, які дозволяють йому працювати нормально у браузерах, що підтримують тип дати, і все ще працює в інших браузерах, таких як firefox, який ще не підтримує тип дати
<input type="date" name="input1" placeholder="YYYY-MM-DD" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" title="Enter a date in this formart YYYY-MM-DD"/>
Я думаю, що так, у HTML немає синтаксису формату DD-MM-YYYY Перейдіть на цю сторінку http://www.java2s.com/Code/SQLServer/Date-Timezone/FormatdateMmmddyyyyhhmmdp.htm . Дещо це вам допоможе. Ще використовувати інструмент вибору дати JavaScript.
Я цього точно не знаю, але думаю, що цим повинен займатися браузер на основі налаштувань дати / часу користувача. Спробуйте налаштувати комп'ютер, щоб він відображав дати у такому форматі
$('input[type="date"]').change(function(){
alert(this.value.split("-").reverse().join("-"));
});
Я зробив багато досліджень, і я не думаю, що це може змусити формат <input type="date">
. Браузер вибирає локальний формат, і залежно від налаштувань користувача, якщо мова користувача англійською мовою, дата відображатиметься в англійському форматі (мм / дд / ггр).
На мою думку, найкраще рішення - використовувати плагін для управління дисплеєм.
Jquery DatePicker здається хорошим варіантом, оскільки ви можете примусити локалізацію , формат дати ...
Я придумав дещо іншу відповідь, ніж усе вище, що я прочитав.
У моєму рішенні використовується невеликий трохи JavaScript та html-введення.
Дата, прийнята введенням, призводить до того, що рядок відформатований як "yyyy-mm-dd". Ми можемо розділити його та розмістити належним чином як новий Date ().
Ось базовий HTML:
<form id="userForm">
<input type="text" placeholder="1, 2, 3, 4, 5, 6" id="userNumbers" />
<input type="date" id="userDate" />
<input type="submit" value="Track" />
</form>
Ось базовий JS:
let userDate = document.getElementById('userDate').value.split('-'),
parsedDate = new Date((`${userDate[1]}-${userDate[2]}-${userDate[0]}`));
Ви можете відформатувати дату будь-яким способом. Ви можете створити нову Date () і захопити всю інформацію звідти ... або просто використовувати "userDate []", щоб створити свій рядок.
Майте на увазі, що деякі способи введення дати у "нову дату ()" дають несподіваний результат. (тобто - на один день позаду)
<html>
<body>
<p id="result">result</p>Enter some text: <input type="date" name="txt" id="value" onchange="myFunction(value)">
<button onclick="f()">submit</button>
<script>
var a;
function myFunction(val){
a = val.split("-").reverse().join("-");
document.getElementById("value").type = "text";
document.getElementById("value").value = a;
}
function f(){
document.getElementById("result").innerHTML = a;
var z = a.split("-").reverse().join("-");
document.getElementById("value").type = "date";
document.getElementById("value").value = z;
}
</script>
</body>
</html>
коротка пряма відповідь - це ні, чи не, але я придумав метод використання текстового поля та чистого коду JS для імітації введення дати та будь-якого потрібного формату, ось код
<html>
<body>
date :
<span style="position: relative;display: inline-block;border: 1px solid #a9a9a9;height: 24px;width: 500px">
<input type="date" class="xDateContainer" onchange="setCorrect(this,'xTime');" style="position: absolute; opacity: 0.0;height: 100%;width: 100%;"><input type="text" id="xTime" name="xTime" value="dd / mm / yyyy" style="border: none;height: 90%;" tabindex="-1"><span style="display: inline-block;width: 20px;z-index: 2;float: right;padding-top: 3px;" tabindex="-1">▼</span>
</span>
<script language="javascript">
var matchEnterdDate=0;
//function to set back date opacity for non supported browsers
window.onload =function(){
var input = document.createElement('input');
input.setAttribute('type','date');
input.setAttribute('value', 'some text');
if(input.value === "some text"){
allDates = document.getElementsByClassName("xDateContainer");
matchEnterdDate=1;
for (var i = 0; i < allDates.length; i++) {
allDates[i].style.opacity = "1";
}
}
}
//function to convert enterd date to any format
function setCorrect(xObj,xTraget){
var date = new Date(xObj.value);
var month = date.getMonth();
var day = date.getDate();
var year = date.getFullYear();
if(month!='NaN'){
document.getElementById(xTraget).value=day+" / "+month+" / "+year;
}else{
if(matchEnterdDate==1){document.getElementById(xTraget).value=xObj.value;}
}
}
</script>
</body>
</html>
1- зверніть увагу, що цей метод працює лише для браузера, який підтримує тип дати.
2 - перша функція в коді JS призначена для браузера, який не підтримує тип дати та встановить вигляд на звичайне введення тексту.
3- якщо ви будете використовувати цей код для введення кількох дат на своїй сторінці, будь ласка, змініть ідентифікатор "xTime" введення тексту в обох функціях виклику та самого введення на щось інше, і, звичайно, використовуйте ім'я потрібного вводу для подати форму.
4-на другій функції ви можете використовувати будь-який потрібний вам формат замість дня + "/" + місяць + "/" + рік, наприклад рік + "/" + місяць + "/" + день, а при введенні тексту використовуйте заповнювач або значення як yyyy / mm / dd для користувача при завантаженні сторінки.
Для форматування в мм-дд-ггр
aa = date.split ("-")
date = aa [1] + '-' + aa [2] + '-' + aa [0]
Чиста реалізація без залежностей. https://jsfiddle.net/h3hqydxa/1/
<style type="text/css">
.dateField {
width: 150px;
height: 32px;
border: none;
position: absolute;
top: 32px;
left: 32px;
opacity: 0.5;
font-size: 12px;
font-weight: 300;
font-family: Arial;
opacity: 0;
}
.fakeDateField {
width: 100px; /* less, so we don't intercept click on browser chrome for date picker. could also change this at runtime */
height: 32px; /* same as above */
border: none;
position: absolute; /* position overtop the date field */
top: 32px;
left: 32px;
display: visible;
font-size: 12px; /* same as above */
font-weight: 300; /* same as above */
font-family: Arial; /* same as above */
line-height: 32px; /* for vertical centering */
}
</style>
<input class="dateField" id="dateField" type="date"></input>
<div id="fakeDateField" class="fakeDateField"><em>(initial value)</em></div>
<script>
var dateField = document.getElementById("dateField");
var fakeDateField = document.getElementById("fakeDateField");
fakeDateField.addEventListener("click", function() {
document.getElementById("dateField").focus();
}, false);
dateField.addEventListener("focus", function() {
fakeDateField.style.opacity = 0;
dateField.style.opacity = 1;
});
dateField.addEventListener("blur", function() {
fakeDateField.style.opacity = 1;
dateField.style.opacity = 0;
});
dateField.addEventListener("change", function() {
// this method could be replaced by momentJS stuff
if (dateField.value.length < 1) {
return;
}
var date = new Date(dateField.value);
var day = date.getUTCDate();
var month = date.getUTCMonth() + 1; //zero-based month values
fakeDateField.innerHTML = (month < 10 ? "0" : "") + month + " / " + day;
});
</script>
Ось рішення:
<input type="text" id="end_dt"/>
$(document).ready(function () {
$("#end_dt").datepicker({ dateFormat: "MM/dd/yyyy" });
});
сподіваємось, це вирішить питання :)
Формат значення дати - 'YYYY-MM-DD'
. Дивіться наступний приклад
<form>
<input value="2015-11-30" name='birthdate' type='date' class="form-control" placeholder="Date de naissance"/>
</form>
Все, що вам потрібно - це відформатувати дату у php, asp, ruby або будь-якому іншому, щоб мати цей формат.