Question

我使用此插件：http://www.daterangepicker.com/

我需要一个输入字段，在其中我可以选择一个日期，或留空。如果我输入无效日期，则插件需要自行更正。

我创建了一个jsfiddle报告此问题：

第一个输入示例：此输入字段版本非常有用，但如果需要，我无法清空该字段。重要的一点是，如果我手动插入无效的日期，则该字段会自动更正！

第二个输入示例：如果需要，我可以在此输入字段中清空该字段，但是如果我手动输入了无效日期，则该无效值仍然存在！！我希望插件检查触发器更改的有效性！

这是我的小提琴：

使用的代码：

$("#data2").daterangepicker({
        "showISOWeekNumbers": true,
        "autoApply": true,
        "autoUpdateInput": false,
        "singleDatePicker": true,
        "locale": {
        "format": "DD/MM/YYYY",
            "separator": " - ",
            "applyLabel": "Applica",
            "cancelLabel": "Annulla",
            "fromLabel": "Da",
            "toLabel": "A",
            "customRangeLabel": "Personalizza",
            "weekLabel": "W",
            "daysOfWeek": [
                "Do",
                "Lu",
                "Ma",
                "Me",
                "Gi",
                "Ve",
                "Sa"
            ],
            "monthNames": [
                "Gennaio",
                "Febbraio",
                "Marzo",
                "Aprile",
                "Maggio",
                "Giugno",
                "Luglio",
                "Agosto",
                "Settembre",
                "Ottobre",
                "Novembre",
                "Dicembre"
            ],
            "firstDay": 1
        }
    }, function(start_date, end_date) {
        this.element.val(start_date.format('DD/MM/YYYY')).trigger("change");
    });

});

Answer 1

添加此行以防止出现默认行为：

  $('#data1, #data2').on('keydown', function(event){
        // allow "back" key
        keycode = event.keyCode || event.which
        if(keycode!=8) event.preventDefault();
  })

现在只能通过日期选择器日历进行输入，或者使用返回键清除输入字段。注意：jsfiddle对$data1和#data2都使用第二个日期选择器的配置。

请参阅更新的小提琴：https://jsfiddle.net/cjfswnrx/

或者您可以使用插件的默认配置，该配置可让您手动编辑日期并自动更正自身：

$("#data1, #data2").daterangepicker({
    singleDatePicker: true,
    showDropdowns: true,
    minYear: 1901,
    maxYear: parseInt(moment().format('YYYY'),10),
    // your locale settings

https://jsfiddle.net/36ybpd50/

插件daterangepicker不检查日期有效值

1 个答案: