堆栈内存溢出
  繁体   English   中英

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

[英]bootstrap datepicker does not show on small screens on firefox

 原文  2020-07-27 01:57:24  2   1    javascript/ twitter-bootstrap/ firefox/ bootstrap-4/ datepicker

问题描述

由于某些奇怪的原因，日期选择器不会显示在 Firefox 的较小屏幕上。 我目前使用的是 78.0.2 版（64 位）。 在 Chrome 上进行测试时，它可以在移动大小的屏幕和常规屏幕上完美运行。

从小屏幕返回到常规屏幕后，日期选择器现在不显示。 这是 Firefox 特有的，有什么解决方案吗？

我的代码：

<!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>

1 个解决方案

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

我找不到解决方案，决定在 jquery ui 的 datepicker 中重写它。

代码如下：

<!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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 为什么此引导日期选择器不显示日期选择器？ Bootstrap 的问题：小屏幕（移动设备）上的导航栏折叠不起作用 为什么引导程序在小屏幕上不起作用？ Bootstrap Tabcollapse在小屏幕上不适用于Ajax调用 我的小屏幕引导导航下拉列表不起作用 Bootstrap Datepicker仅适用于Firefox Bootstrap在模式上显示日期选择器 仅在具有jquery或css的小屏幕上显示div Datepicker不显示在Bootstrap popover上 datepicker（Bootstrap）不起作用？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM