时间戳

首页 > 解决方案 > jquery-ui.js:8056 未捕获类型错误：无法读取未定义的属性“左侧”

javascript - jquery-ui.js:8056 未捕获类型错误：无法读取未定义的属性“左侧”

问题描述

我不知道为什么我的注册页面有这些错误

jquery-ui.js:8056 未捕获类型错误：无法读取未定义的属性“左侧”

一些代码

<input type="text" name="datePickerInput" class="form-control hidden" id="datePickerInput" value="" placeholder="">

<script type="text/javascript">


    $("#babyDob").click(function() {

        $('#datePickerInput').datepicker('show');
        
        $("#datePickerInput").datepicker({
            dateFormat: 'yy-mm-dd',
            maxDate: 0,
            onSelect: function() { 
                var dateSelected = $(this).datepicker('getDate'); 
                    // dateSelected = moment(dateSelected).format('YYYY-MM-DD');

                    console.log("dateSelected",dateSelected);




                }
            });

    });




</script>

全部代码

<!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Bunlong Heng">
    <meta name="csrf-token" value="{{ csrf_token() }}">

    <title>Sign Up</title>


    <link id="favicon" rel="shortcut icon" href="/assets/fe/img/favicon/local/favicon-prod.png" type="image/x-icon" />
    <link  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>


    @include('layouts.be.baby.styles.datePicker')


    <style type="text/css">

        .form {
            margin-top: 200px;
            color: black;
            z-index: 2;
        }

        .btn, .form-control {
            border-radius: 0px; 
            border: solid 1px black; 
            color: black; 
        }

        .sign-up-section {
            font-weight: thin !important;
        }

        body{
            overflow: hidden;
        }



    </style>


</head>


<body>

    <div class="container ">
        <div class="row ">

            <p style="font-size: 1500px; color: black; z-index: 1; position: absolute; top: 0; right: 0; ">MY</p>

            <div class="col-sm-4 "></div>
            <div class="col-sm-4 form text-center">


                <img src="https://i.imgur.com/XCVhEh4.png">


                {!! Form::open(array('class' => 'form-horizontal', 'role' =>'form', 'url'=>'baby/store','files' => true)) !!}

                {{-- Name --}}
                <div class="form-group">
                    <label for="name" class="col-sm-4 control-label">Name</label>
                    <div class="col-sm-8">
                        <input type="text" value="{{Request::old('name')}}"  value="" name="name" class="form-control" id="name" placeholder="Name">
                    </div>
                </div>

                {{-- Email --}}
                <div class="form-group">
                    <label for="email" class="col-sm-4 control-label">Email</label>
                    <div class="col-sm-8">
                        <input name="email" type="email" value="" class="form-control" placeholder="Email">
                    </div>
                </div>

                {{-- babyName --}}
                <div class="form-group">
                    <label for="babyName" class="col-sm-4 control-label">babyName</label>
                    <div class="col-sm-8">
                        <input type="text" value="{{Request::old('babyName')}}"  value="" name="babyName" class="form-control" id="babyName" placeholder="babyName">
                    </div>
                </div>

                {{-- babyDob --}}
                <div class="form-group">
                    <label for="babyDob" class="col-sm-4 control-label">babyDob</label>
                    <div class="col-sm-8">
                        <input type="text" value="{{Request::old('babyDob')}}"  value="" name="babyDob" class="form-control" id="babyDob" placeholder="babyDob">
                        <input type="text" name="datePickerInput" class="form-control hidden" id="datePickerInput" value="" placeholder="">
                    </div>
                </div>


                {{-- adminCode --}}
                <div class="form-group">
                    <label for="adminCode" class="col-sm-4 control-label">Password</label>
                    <div class="col-sm-8">
                        <input type="text" value="{{Request::old('adminCode')}}"  value="" name="adminCode" class="form-control" id="adminCode" placeholder="Password">
                    </div>
                </div>



                <div class="form-group">
                    <div class="col-sm-offset-4 col-sm-10">
                        <a class="btn btn-default" href="/baby/signup"> Cancel </a>
                        <button type="submit" id="submit" class="btn btn-default">Next</button>
                    </div>
                </div>




                {!!Form::close()!!}

            </div>
        </div>
    </div>

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


    <script type="text/javascript">


        $("#babyDob").click(function() {

            $('#datePickerInput').datepicker('show');
            
            $("#datePickerInput").datepicker({
                dateFormat: 'yy-mm-dd',
                maxDate: 0,
                onSelect: function() { 
                    var dateSelected = $(this).datepicker('getDate'); 
                        // dateSelected = moment(dateSelected).format('YYYY-MM-DD');

                        console.log("dateSelected",dateSelected);




                    }
                });

        });




    </script>


</body>
</html>

标签： javascriptjqueryjquery-ui

解决方案

考虑以下示例。

$(function() {
  $('#datePickerInput').datepicker('show');
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" name="datePickerInput" class="form-control hidden" id="datePickerInput" value="" placeholder="">

这会引发类似的错误：

Uncaught TypeError: inst is undefined

您必须先初始化 Datepicker，然后调用该show选项。像这样：

$(function() {
  $("#datePickerInput").datepicker({
    dateFormat: 'yy-mm-dd',
    maxDate: 0,
    onSelect: function() {
      var dateSelected = $(this).datepicker('getDate');
      console.log("dateSelected", dateSelected);
    }
  });
  $('#datePickerInput').datepicker('show');
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" name="datePickerInput" class="form-control hidden" id="datePickerInput" value="" placeholder="">

推荐阅读