Question

这是日期输入

<input id="customer-date" name="customer-date" type="date" required>

这是脚本

const customerDate = document.getElementById('customer-date').value;
const dateHandler = document.getElementById('date-handler');
dateHandler.innerHTML = customerDate;

但是当我选择一个日期时，我在dateHandler中显示的值格式为2017-11-22，问题是format="dd/MM/yyyy"属性不能使它保持一致显示日期和月份，显然令人困惑。所以我想从选择的日期获取月份名称以显示2017-November-22。有什么想法吗？

Answer 1

您可以使用Date() javascript函数，如：

Date.prototype.getFullDate = function() {
     return this.getFullYear() + '-' + this.toLocaleString(undefined, {month:'long'}) + '-' + this.getDate();
}
const dateStr = document.getElementById('customer-date').value.split('/');
var date = new Date(dateStr[2], dateStr[1], dateStr[0]);
document.getElementById('date-handler').innerHTML = date.getFullDate();

Answer 2

如果您希望从月份编号中获取月份名称，则可以使用：

var str = "2017-11-22"; // this would be your date
var res = str.split("-"); // turn the date into a list format (Split by / if needed)
var months = ["Jan", "Feb", "March", "April", "May", "June", "July", 
"August", "September", "October", "November", "December"];
console.log(months[res[1]-1]) // month name

JSFiddle：https://jsfiddle.net/p8fwhydc/1/

Answer 3

这是我制作的简单解决方案，我希望能帮到你

＆＃13;

function showdate() {
  var customerDate = document.getElementById('customer-date').value;
  var dateHandler = document.getElementById('date-handler');
  dateHandler.innerHTML = customerDate;

  var months = new Array();
  months[0] = "January";
  months[1] = "February";
  months[2] = "March";
  months[3] = "April";
  months[4] = "May";
  months[5] = "June";
  months[6] = "July";
  months[7] = "August";
  months[8] = "September";
  months[9] = "October";
  months[10] = "November";
  months[11] = "December";

  var date = new Date(customerDate);
  var month = months[date.getMonth()];
  //converting the date into array
  var dateArr = customerDate.split("-");
  //setting up the new date form
  var forDate = dateArr[0] + "-" + month + "-" + dateArr[2];
  document.getElementById("new-date-handler").innerHTML = forDate;
}

＆＃13;

<input id="customer-date" name="customer-date" type="date" required>
<input type=button value=validate onclick="showdate()">
<p id="date-handler"></p>
<p id="new-date-handler"></p>

＆＃13;

Answer 4

重新格式化日期字符串时，您应该始终考虑重新格式化字符串并完全避免使用Date对象，就像Noy的回答一样。

但是，如果采取预防措施以避免解析和格式化的缺陷，也可以使用一些Date对象功能。

这类问题是两个问题：

How do I parse the string to a Date
How do I format the date

在第一种情况下，YYYY-MM-DD的日期格式应该被解析为UTC（某些浏览器可能不会），因此您应该手动解析它。

第二部分是生成格式化字符串，您可以利用支持的Intl对象来获取主机默认语言中的字符串，例如

＆＃13;

// Parse string in YYYY-MM-DD format as local
function parseYMD(s) {
  var b = s.split(/\D/);
  return new Date(b[0], b[1]-1, b[2]);
}

// Format Date as D-MMMM-YYYY using host default language for month name 
function formatDMMMMY(date) {
  function z(n){return (n<10?'0':'') + n}
  return date.getFullYear() + '-' +
         date.toLocaleString(undefined, {month:'long'}) + '-' +
         z(date.getDate());
}

var s = '2017-11-22';
console.log(parseYMD(s).toString());
console.log(formatDMMMMY(parseYMD(s)));

＆＃13;

如何从html日期输入值获取月份名称？

4 个答案: