html日付入力値から月名を取得するにはどうすればよいですか？

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; 

あるしかし、私は、日付、値を選ぶとき、私はこの問題は、ということです2017-11-22のようにフォーマットされdateHandlerに表示するために取得format="dd/MM/yyyy"属性では、表示時に明らかに混乱することがあります。だから私はそのような2017-November-22を表示するために、選択した日付から月の名前を取得したい。何か案は？

Answer 1

ここで私が作った簡単な解決策、私はそれはあなたが好きDate() JavaScript関数を使用することができます

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; 
 
}

<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>

Answer 2

役に立てば幸いです：あなたがする探している場合

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 3

は、月の番号から月の名前を取得するだけで、これを使うことができます：

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 4

、あなたは常にノイの答えに関しては、単なる文字列を再フォーマットし、完全にDateオブジェクトを避けることを検討すべきです。

ただし、解析と書式設定の落とし穴を避けるために注意が必要な場合は、Dateオブジェクト機能を使用することもできます。

質問このタイプの一つで二つの質問である：最初のケースで

1. How do I parse the string to a Date
2. How do I format the date

、YYYY-MM-DDの日付形式は、UTCとして解析されるべきです（一部のブラウザではそうでないかもしれません）ので、手動で解析する必要があります。

フォーマットされた文字列を生成することは、サポートされているIntlオブジェクトを利用して、ホストのデフォルト言語で文字列を取得することができます。

// 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)));