如何正确实现日期选择器？答案

【问题标题】：How to implement datepicker correctly?如何正确实现日期选择器？
【发布时间】：2021-05-08 11:54:30
【问题描述】：

我真的想在我的应用程序中添加带有过滤器的日期选择器，但没有成功。我真的不知道我应该包含哪些链接，我认为这可能会导致一个大问题。我的 DevTools 中的错误只是：加载资源失败：服务器响应状态为 404 ()，没有任何帮助。我愿意提供建议，如果有人可以看一看，我将不胜感激。我准备了一个游乐场：

http://live.datatables.net/jadorolu/12/edit

谢谢！

【问题讨论】：

标签： javascript jquery datepicker

【解决方案1】：

您不认为您必须将输入类型更改为日期而不是文本

【讨论】：

【解决方案2】：

我打开了您的示例，发现 jquery-ui.css 不可用。查找样式的另一个链接。

https://code.jquery.com/ui/1.10.13/themes/smoothness/jquery-ui.css

手动检查链接，在浏览器中查看返回 404，这就是您在控制台中收到 404 的原因。

还有关于datepicker is not a function 你两次导入jquery

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

和

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

请删除第一个，看看会发生什么

【讨论】：

您好，感谢您的帮助，我修复了链接，现在显示日期选择器，但我收到警告指定值“03/04/2021”不符合要求的格式， “yyyy-MM-dd”。据我所知，我有 y-m-d，但 datepicker 给了我 m-d-y，你知道如何解决这个问题吗？
这里有两个链接如何更改 datepicker 日期格式 api.jqueryui.com/datepicker/#option-dateFormat 和所有选项 api.jqueryui.com/datepicker/#utility-formatDate
感谢资源，我试过 $("#min").datepicker({ dateFormat: "yy-mm-dd", onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });但没有任何改变
伙计我对jquery ui datepicker不太熟悉，我需要阅读一些文档并制作一些示例来为您提供更多信息，但是我没有足够的时间。我将与您分享我用于其中一个项目的库之一。 wakirin.github.io/Lightpick你可以看到很多例子

【解决方案3】：

您可以使用输入类型作为日期，它将作为日期选择器进行输入

    $(document).ready(function () {

         var table = $('#datatable').DataTable({
             "data": testdata.data,
                        select:"single",
             "columns": [
                 {
                     "className": 'details-control',
                     "orderable": false,
                     "data": null,
                     "defaultContent": '',
                     "render": function () {
                         return '<i class="fa fa-plus-square" aria-hidden="true"></i>';
                     },
                     width:"15px"
                 },
                 { "data": "coreapi_id" },
                 { "data": "first_name" },
                 { "data": "last_name" },
                 { "data": "email" },
                 { "data": "date_arrival" },
                 {"data": "date_departure"},

             ],
             "order": [[1, 'asc']]
         });
      
      //  Datepicker
        $.fn.dataTable.ext.search.push(
            function (settings, data, dataIndex) {
                var min = $('#min').datepicker("getDate");
                var max = $('#max').datepicker("getDate");
                var startDate = new Date(data[4]);
                if (min == null && max == null) { return true; }
                if (min == null && startDate <= max) { return true;}
                if(max == null && startDate >= min) {return true;}
                if (startDate <= max && startDate >= min) { return true; }
                return false;
            }
            );


                $("#min").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
                $("#max").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
                //var table = $('#datatable').DataTable();

                // Event listener to the two range filtering inputs to redraw on input
                $('#min, #max').change(function () {
                    table.draw();
                });
      
      // Add event listener for opening and closing details
         $('#datatable tbody').on('click', 'td.details-control', function () {
             var tr = $(this).closest('tr');
             var tdi = tr.find("i.fa");
             var row = table.row(tr);

             if (row.child.isShown()) {
                 // This row is already open - close it
                 row.child.hide();
                 tr.removeClass('shown');
                 tdi.first().removeClass('fa-minus-square');
                 tdi.first().addClass('fa-plus-square');
             }
             else {
                 // Open this row
                 row.child(format(row.data())).show();
                 tr.addClass('shown');
                 tdi.first().removeClass('fa-plus-square');
                 tdi.first().addClass('fa-minus-square');
             }
         });

         table.on("user-select", function (e, dt, type, cell, originalEvent) {
             if ($(cell.node()).hasClass("details-control")) {
                 e.preventDefault();
             }
         });
     });

    function format(d){
        
         // `d` is the original data object for the row
         return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
             '<tr>' +
                 '<td>Date arrival:</td>' +
                 '<td>' + d.date_arrival + '</td>' +
             '</tr>' +
             '<tr>' +
                 '<td>Date departure:</td>' +
                 '<td>' + d.date_departure + '</td>' +
             '</tr>' +
             '<tr>' +
                 '<td>Extra info:</td>' +
                 '<td>And any further details here (images etc)...</td>' +
             '</tr>' +
         '</table>';  
    }

      $(document).ready(function(){
        $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex) {
            var min = $('#min').datepicker("getDate");
            var max = $('#max').datepicker("getDate");
            var startDate = new Date(data[4]);
            if (min == null && max == null) { return true; }
            if (min == null && startDate <= max) { return true;}
            if(max == null && startDate >= min) {return true;}
            if (startDate <= max && startDate >= min) { return true; }
            return false;
        }
        );


            $("#min").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
            $("#max").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
            var table = $('#datatable').DataTable();

            // Event listener to the two range filtering inputs to redraw on input
            $('#min, #max').change(function () {
                table.draw();
            });
        });





                                  
       

    var testdata = {
    "data": [
    {
    "coreapi_id": 1,
    "first_name": "Ross",
    "last_name": "Geller",
    "email": "ross@abv.bg",
    "date_arrival": "2020/04/15",
    "date_departure": "2020/04/25",
    },
    {
    "coreapi_id": 2,
    "first_name": "Monica",
    "last_name": "Geller",
    "email": "monica@abv.bg",
    "date_arrival": "2020/04/16",
    "date_departure": "2020/04/28",
    },
    {
    "coreapi_id": 3,
    "first_name": "Rachel",
    "last_name": "Green",
    "email": "rachel@abv.bg",
    "date_arrival": "2020/04/17",
    "date_departure": "2020/04/30",
    },
    {
    "coreapi_id": 4,
    "first_name": "Chandler",
    "last_name": "Bing",
    "email": "chandler@abv.bg",
    "date_arrival": "2020/04/20",
    "date_departure": "2020/04/31",
    },
    {
    "coreapi_id": 5,
    "first_name": "Phoebe",
    "last_name": "Buffet",
    "email": "phoebe@abv.bg",
    "date_arrival": "2020/04/21",
    "date_departure": "2020/04/31",
    },
    ]
    };

        td.details-control {
            text-align:center;
            color:forestgreen;
    cursor: pointer;
}
tr.shown td.details-control {
    text-align:center; 
    color:red;

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Child Rows">
    <title></title>
    <meta charset="utf-8" />
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

  
   <!--Datepicker---------------------------------------------------------------->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.13/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/plug-ins/9dcbecd42ad/integration/jqueryui/dataTables.jqueryui.css">

  
   <!--Datepicker----------------------------------------------------------------->
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/9dcbecd42ad/integration/jqueryui/dataTables.jqueryui.js"></script>

  
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
    <script src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js" type="text/javascript"></script>
</head>
<body>
  <table border="0" cellspacing="5" cellpadding="5">
                        <tbody>
                            <tr>
                                <td>Date arrival:</td>
                                <td><input name="min" id="min" type="date"></td>
                            </tr>
                            <tr>
                                <td>Date departure:</td>
                                <td><input name="max" id="max" type="date"></td>
                            </tr>
                        </tbody>
                    </table>
    <table width="100%" class="display" id="datatable" cellspacing="0">
        <thead>
            <tr>
                <th></th>
                <th>CoreApi ID</th>
                <th>First name</th>
                <th>Last name</th>
                <th>Email</th>
                <th>Date arrival</th>
                <th>Date departure</th>


            </tr>
        </thead>
        <tfoot>
            <tr>
                <th></th>
                <th>Date arrival</th>
                <th>Date departure</th>
            </tr>
        </tfoot>
    </table>

</body>
</html>

【讨论】：