Daterangepicker - 强制只允许输入更改的日期答案

【问题标题】：Daterangepicker - force to allow only date on input changeDaterangepicker - 强制只允许输入更改的日期
【发布时间】：2021-03-24 23:03:06
【问题描述】：

我需要这样做：只允许 daterangepicker 文本输入以接受正确的日期（例如：当你选择说 13-01-2020 然后你点击输入并开始输入 18 你会得到 18-01-2020 instead of 1813-01-2020 一个当然非数字是不允许....我希望这很清楚）。

Js Fiddle is here: https://jsfiddle.net/20z5qym9/

到目前为止我的自定义代码：

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    
<script>
    $(function() {
      $('input[name="data_u"]').daterangepicker({
        singleDatePicker: true,
        showDropdowns: true,
        oneTap: true,
        minYear: 1901,
        maxYear: 2022,
                                      
        "locale": {
            "format": "DD-MM-YYYY",
            "separator": " - ",
            "applyLabel": "OK",
            "cancelLabel": "Leave",
            "fromLabel": "From",
            "toLabel": "To",
            "customRangeLabel": "Custom",
            //custimizable list od days
            "daysOfWeek": [
                "Pn",
                "Wt",
                "Śr",
                "Czw",
                "Pt",
                "So",
                "Nd"
            ],
            //and months
            "monthNames": [
                "Styczeń",
                "Luty",
                "Marzec",
                "Kwiecień",
                "Maj",
                "Czerwiec",
                "Lipiec",
                "Sierpień",
                "Wrzesień",
                "Październik",
                "Listopad",
                "Grudzień"
            ],
            "firstDay": 0
        }
      
      }
      
      , function(start, end, label) {
        //callback when you choose month, but I would need to have callback on every key pressed I guess
      });
    });
</script>

【问题讨论】：

我不知道为什么，但你的 js fiddle 工作得很好，因为你在我的 Chrome 版本 87.0.4280.88（官方构建）（64 位）上除外
这很奇怪。我可以输入除日期以外的其他输入 - 我更新了小提琴，所以你可以看到输入类型日期 - 这就是我想要的（最好不受此解决方案的限制 - 请参阅下面的答案）。

标签： javascript jquery date momentjs daterangepicker

【解决方案1】：

<input type='date' />

这就是我现在的做法。工作正常，但并不完美（本地化设置由浏览器控制，这意味着用户，这意味着他可以有不同的日期格式、日期选择器行为等）。

有趣的是，我不知道，浏览器从一段时间以来就有这种类型的输入。

【讨论】：