引导程序日期选择器未显示在 firefox 的小屏幕上

Question

For some odd reason, the datepicker does not show up on smaller screens on Firefox.由于某些奇怪的原因，日期选择器不会显示在 Firefox 的较小屏幕上。 I am currently using ver 78.0.2 (64-bit).我目前使用的是 78.0.2 版（64 位）。 When tested on Chrome, it works perfectly, on mobile sized screens and regular screens.在 Chrome 上进行测试时，它可以在移动大小的屏幕和常规屏幕上完美运行。

After returning from small screens to regular screens, the datepicker now doesn't show.从小屏幕返回到常规屏幕后，日期选择器现在不显示。 It is quite Firefox specific, any solution to this?这是 Firefox 特有的，有什么解决方案吗？

my code:我的代码：

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Availability</title>
</head>

<body>
    <div class="container-fluid">
        <!--Screens lg and above -->
        <!--block on md screens because it looks ugly af-->
        <!--
        <div class="row">
            <div class="col-md-12 p-0">
                <img class="img-fluid" src="images/banner.png" style="width:100%;max-height:300px;" />
            </div>
        </div>
-->
        <div class="row pb-3 pt-2" style="background-color:#042a3d">
            <div class="col-md-10 offset-md-1 text-light">
                <form class="form-inline row">
                    <div class="col-6 col-md-4">
                        <!--js version-->
                        <p class="mb-1">Check in</p>
                        <input type="date" id="startDate" min="" style="width:100%" class="form-control" required="required" />
                    </div>
                    <div class="col-6 col-md-4">
                        <!--js version-->
                        <p class="mb-1">Check out</p>
                        <input type="date" id="endDate" min="" style="width:100%" class="form-control" required="required" />
                    </div>
                    <div class="col-12 col-md-4 text-center" style="margin-top:25px">
                        <button style="width:100%" id="availSubmit" class="btn btn-primary">Check Availability</button>
                    </div>
                </form>
            </div>
        </div>

    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>







    <script>
        formatDate = (date) => {
            var day = date.getDate().toString();
            var month = (date.getMonth() + 1).toString();
            var year = date.getFullYear();

            if (day.length < 2) {
                day = "0" + day;
            }
            if (month.length < 2) {
                month = "0" + month;
            }

            var formattedDate = [year, month, day].join('-');
            return formattedDate;
        }
        //onload initialization
        $(document).ready(() => {
            console.log("It's ready and loaded!");
            var today = new Date();
            var tmr = new Date();
            tmr.setDate(tmr.getDate() + 1);

            $('#startDate').val(formatDate(today));
            $('#endDate').val(formatDate(tmr));

            $('#startDate').attr('min', $('#startDate').val());
            $('#endDate').attr('min', $('#endDate').val());

            //for default screens
            $("#availSubmit").on("click", (e) => {
                e.preventDefault();
                //initalizations
                var one_day = 1000 * 60 * 60 * 24;
                var string_startDate = $("#startDate").val();
                var string_endDate = $("#endDate").val();


                //check date difference
                var date_startDate = new Date(string_startDate);
                var date_endDate = new Date(string_endDate);
                var diff = (date_endDate.getTime() - date_startDate.getTime()) / one_day;

                //bookings cannot be -1 or 0 days. TESTING PURPOSES
                if (diff < 1) {
                    alert("Invalid booking!");
                } else {
                    alert("Valid booking!");
                }
                //code below does get request or whatever
            });

            //onchange for start and end date
            $('#startDate').on('change', () => {
                var newEndDate = new Date($('#startDate').val());
                newEndDate.setDate(newEndDate.getDate() + 1);
                $('#endDate').attr('min', formatDate(newEndDate));
                $('#endDate').val(formatDate(newEndDate));
            });

        });

    </script>
</body>

</html>

Answer 1

I couldn't find a solution and decided to just rewrite it in jquery ui's datepicker.我找不到解决方案，决定在 jquery ui 的 datepicker 中重写它。

Code is as below:代码如下：

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"/>
    <title>Availability</title>
</head>

<body>
    <div class="container-fluid">
        <!--Screens lg and above -->
        <!--block on md screens because it looks ugly af-->

        <!--
        <div class="row">
            <div class="col-md-12 p-0">
                <img class="img-fluid" src="images/banner.png" style="width:100%;max-height:300px;" />
            </div>
        </div>
-->

        <div class="row pb-3 pt-2" style="background-color:#042a3d">
            <div class="col-md-10 offset-md-1 text-light">
                <form class="form-inline row">
                    <div class="col-6 col-md-4">
                        <!--js version-->
                        <p class="mb-1">Check in</p>
                        <input type="text" id="startDate" style="width:100%" class="form-control" required="required" />
                    </div>
                    <div class="col-6 col-md-4">
                        <!--js version-->
                        <p class="mb-1">Check out</p>
                        <input type="text" id="endDate" style="width:100%" class="form-control" required="required" />
                    </div>
                    <div class="col-12 col-md-4 text-center" style="margin-top:25px">
                        <button style="width:100%" id="availSubmit" class="btn btn-primary">Check Availability</button>
                    </div>
                </form>
            </div>
        </div>

    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <!--datepicker-->
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>






    <script>        
        formatDate = (date) => {
            var day = date.getDate().toString();
            var month = (date.getMonth() + 1).toString();
            var year = date.getFullYear();

            if (day.length < 2) {
                day = "0" + day;
            }
            if (month.length < 2) {
                month = "0" + month;
            }

            var formattedDate = [day, month, year].join('/');
            return formattedDate;
        }
        //onload initialization
        $(document).ready(() => {
            console.log("It's ready and loaded!");
            var today = new Date();
            var tmr = new Date();
            tmr.setDate(tmr.getDate() + 1);

            $('#startDate').val(formatDate(today));
            $('#endDate').val(formatDate(tmr));

            $('#startDate').attr('min', $('#startDate').val());
            $('#endDate').attr('min', $('#endDate').val());



            //test Date
            $('#startDate').val(formatDate(today)).datepicker({
                dateFormat:'dd/mm/yy',
                minDate: today,
            });
            
            $('#endDate').val(formatDate(tmr)).datepicker({
                dateFormat:'dd/mm/yy',
                minDate: tmr,
            });
            
            //change methods
            $('#startDate').on('change',()=>{
                var endDate = new Date($('#startDate').datepicker('getDate'));
                $('#endDate').datepicker('option','minDate',endDate);
                endDate.setDate(endDate.getDate()+1);
                
                $('#endDate').datepicker('setDate',endDate);
            })
            
            $('#availSubmit').on('click',(e)=>{
                e.preventDefault();
                //initalizations
                var one_day = 1000 * 60 * 60 * 24;
                var string_startDate = $("#startDate").val();
                var string_endDate = $("#endDate").val();


                //check date difference
                var date_startDate = new Date(string_startDate);
                var date_endDate = new Date(string_endDate);
                var diff = (date_endDate.getTime() - date_startDate.getTime()) / one_day;

                //bookings cannot be -1 or 0 days. TESTING PURPOSES
                if (diff < 1) {
                    console.log("Invalid booking!");
                } else {
                    console.log("Valid booking!");
                }
                //code below does get request or whatever
                console.log($('#startDate').datepicker('getDate'));
                console.log($('#endDate').datepicker('getDate'));
            })

        });

    </script>
</body>

</html>

引导程序日期选择器未显示在 firefox 的小屏幕上

问题描述

1 个解决方案

解决方案1
0 2020-07-27 05:01:27

引导程序日期选择器未显示在 firefox 的小屏幕上

问题描述

1 个解决方案

解决方案1 0 2020-07-27 05:01:27

解决方案1
0 2020-07-27 05:01:27