获取无效 html5 日期输入的值

Question

我正在构建一个日历选择器来伴随（并替换某些浏览器提供的默认日历日期选择器）input 或 type="date"。

据记载，为了“简单”，Chrome（可能还有其他浏览器）的日期输入允许输入无效日期，但它们将无法验证（即 31/06/2017 可以输入，但会产生一个“值“的”)。

我的问题是：当输入的日期无效时，如何获取无效日期的值？

var date_input = document.getElementById('date_input');
var output_div = document.getElementById('output_div');

output_div.innerHTML = date_input.value;

date_input.addEventListener('input', function(e){
	output_div.innerHTML = e.target.value;
});

<p>To quickly input an invalid date, select the day field and press the down arrow (on Chrome OSX this displays an empty div below the input instead of the invalid date). This will select 31/06/2017</p>
<input type="date" value="2017-06-01" id="date_input" />
<br />
<br />
<div id="output_div" />

Answer 1

不是这样的

var date_input = document.getElementById( 'date_input' );
var output_div = document.getElementById( 'output_div' );

output_div.textContent = date_input.valueAsDate; // :-)

date_input.addEventListener( 'input', function( evt ){
    var val = date_input.value,
        sel = document.getSelection();
    if ( date_input.validity.badInput ) {
        // date_input.focus(); // with or without this,
        // date_input.select(); // this doesn't work but,
        // due to the added <span> wrapper:
        sel.selectAllChildren( date_input.parentElement );
        // this does. So:
        val = sel.toString() || function() {
            var copied = document.execCommand( 'copy' );
            sel.empty(); // clear the selection
            return "Invalid date" + ( copied ? " copied to clipboard." : "" );
        }();
    }
    output_div.textContent = val;
});

#output_div {
    margin-top: 1em;
}

<p>To quickly input an invalid date, select the day field and press the down arrow (on Chrome OSX this displays an empty div below the input instead of the invalid date). This will select 31/06/2017</p>
<span><input type="date" value="2017-06-01" id="date_input"></span>
<div id="output_div"></div>

显然，由于显示的value 实际上是<input> 和we can't access the user-agent's shadow DOM 的shadow DOM child 的输出，因此可见值实际上是JS 不知道。

对于accessibility reasons，可见值必须可供屏幕阅读器等访问，也可以手动复制到剪贴板。

尝试了多种以编程方式选择和复制文本的方法，但我的想法和耐心已经耗尽，只能设法将其复制到剪贴板。

• 如果其他人能弄清楚如何用 JS 读取 #shadow-root (user-agent) 的 aria-value* 属性，那么你就有了前进的方向。
• 如果其他人能够弄清楚如何将 selection 字符串分配给 var，那么您还有其他方法。

然而

由于无效输入仅限于可预见的超出范围，您可以监控最后一个有效的value 在更改为无效之前是什么，然后计算它现在肯定是什么。

• 如果使用日期选择器，所有输入都将有效。
• 如果键入，请监控击键。
• 如果使用箭头按钮，并且日期为 30/06/2017，在更改之前使其无效，并且 29/06/2017、30/05/2017、30/07/2017、30/06/2016 和 30/06/2018 都有效，则无效日期必须是 31/06/2017。

我没有尝试过（还）使这项工作有效，但我相信它可以。我会用这个答案发布那个解决方案，但是我的半天时间已经被这个问题吞噬了，我很饿。如果表达了真诚的兴趣，我会很乐意尝试并提供代码。

还是不行

如果它们是使用箭头按钮创建的，并且仅当最后一个日期有效时，这将显示无效日期。我可能会找到解决方法，但正式放弃！生命太短暂了。

According to MDN:

...显示的日期格式将根据用户操作系统的区域设置来选择。

这将使跟踪击键变得异常重要。

但是，我刚刚发现 <input type="datetime-local"> 可能会解决该问题，并且可能会解决其他问题。

所以这很有用：

但试图强迫它起作用开始感觉像是试图将西瓜插入通常不适合的地方。

这是一个没有魅力甚至没有魅力的笨拙的杂物，如果有人看得太用力，它很可能会破裂。最好的免责声明；）

var date = "",
    input = document.querySelector( "input" ),
    output = document.querySelector( "output" ),
    bits = function( d ) {
        return [ d.getFullYear(), d.getMonth() + 1, d.getDate() ];
    },
    adjustedDate = function( o ) {
        var d = new Date( date ),
            b = bits( d ),
            year = b[ 0 ],
            month = b[ 1 ],
            day = b[ 2 ];
        switch ( o.i ) {
            case "d": return [ year, month, ( day + o.v ) || 31 ];
            case "m": return [ year, month + o.v, day ];
            case "y": return [ year + o.v, month, day ];
        }
    },
    calcDate = function() {
        var ad, vd, rd;
        [ { i: "d", v: 1 },
          { i: "d", v: -1 },
          { i: "m", v: 1 },
          { i: "m", v: -1 },
          { i: "y", v: 1 },
          { i: "y", v: -1 }
        ].forEach( ( v ) => {
            ad = adjustedDate( v ).join( "-" );
            vd = bits( new Date( ad ) ).join( "-" );
            if ( ad !== vd ) {
                rd = ad;
            }
        } );
        return rd.split( "-" ).map( ( v ) => {
            v = v.toString();
            return v.length === 1 ? "0" + v : v;
        } ).join( "-" ); // tired so mental
    },
    showDate = function() {
        output.textContent = date = ( input.value || calcDate() );
    };
showDate();
input.addEventListener( "input", showDate, false );

output {
    margin-left: 1em;
}

<p>To quickly input an invalid date, select the day field and press the down arrow. This will select 31/06/2017 and output the desired invalid date string.</p>
<form><input type="date" value="2017-06-01"><output></output></form>