Bootstrap Datepicker не отображается, как ожидалось - PullRequest
Новая
       14

Bootstrap Datepicker не отображается, как ожидалось

0 голосов
/ 08 апреля 2020

Я написал код для формы регистрации и использую Bootstrap Datepicker для ввода даты рождения. Кажется, я не могу заставить его работать, пробовал другие решения, которые я нашел, но по той или иной причине я не могу понять, как заставить это работать.

Я только начинаю изучать эти парадигмы: (

У кого-нибудь есть предложения? 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{assets/bootstrap-datepicker/css/bootstrap-datepicker.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{assets/bootstrap-datepicker/css/bootstrap-datepicker.standalone.css}"/>

    <title>Registration</title>
</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span> <span
                    class="icon-bar"></span> <span class="icon-bar"></span> <span
                    class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#" th:href="@{/}">Registration and
                Login Module</a>
        </div>
    </div>
</nav>

<br>
<br>

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">

            <div th:if="${param.success}">
                <div class="alert alert-info">You've successfully registered to our awesome app!</div>
            </div>

            <h1>Registration</h1>
            <form th:action="@{/registration}" th:object="${user}" method="post">

                <p class="error-message" th:if="${#fields.hasGlobalErrors()}" th:each="error : ${#fields.errors('global')}" th:text="${error}">Validation error
                </p>

                <div class="form-group" th:classappend="${#fields.hasErrors('username')}? 'has-error':''">
                    <label for="username" class="control-label">Username</label> <input id="username" class="form-control" th:field="*{username}" />
                    <p class="error-message" th:each="error: ${#fields.errors('username')}" th:text="${error}">Validation error</p>
                </div>

                <div class="form-group" th:classappend="${#fields.hasErrors('firstName')}? 'has-error':''">
                    <label for="firstName" class="control-label">First name</label> <input id="firstName" class="form-control" th:field="*{firstName}" />
                    <p class="error-message" th:each="error: ${#fields.errors('firstName')}" th:text="${error}">Validation error</p>
                </div>

                <div class="form-group" th:classappend="${#fields.hasErrors('lastName')}? 'has-error':''">
                    <label for="lastName" class="control-label">Last name</label> <input id="lastName" class="form-control" th:field="*{lastName}" />
                    <p class="error-message" th:each="error : ${#fields.errors('lastName')}" th:text="${error}">Validation error</p>
                </div>

                <div class="form-group" th:classappend="${#fields.hasErrors('dateOfBirth')}? 'has-error':''">
                    <label for="dateOfBirth" class="control-label">Date of birth</label>
                    <div class="input-group date">
                        <input type="text" class="form-control" id="dateOfBirth" autocomplete="off" th:field="*{dateOfBirth}"/>
                        <div class="input-group-append">
                            <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                        </div>
                    </div>
                    <p class="error-message" th:each="error : ${#fields.errors('dateOfBirth')}" th:text="${error}">Validation error</p>
                </div>

                <div class="form-group" th:classappend="${#fields.hasErrors('email')}? 'has-error':''">
                    <label for="email" class="control-label">E-mail</label> <input id="email" class="form-control" th:field="*{email}" />
                    <p class="error-message" th:each="error : ${#fields.errors('email')}" th:text="${error}">Validation error
                    </p>
                </div>

                <div class="form-group" th:classappend="${#fields.hasErrors('confirmEmail')}? 'has-error':''">
                    <label for="confirmEmail" class="control-label">Confirm
                        e-mail</label> <input id="confirmEmail" class="form-control" th:field="*{confirmEmail}" />
                    <p class="error-message" th:each="error : ${#fields.errors('confirmEmail')}" th:text="${error}">Validation error</p>
                </div>

                <div class="form-group" th:classappend="${#fields.hasErrors('password')}? 'has-error':''">
                    <label for="password" class="control-label">Password</label> <input id="password" class="form-control" type="password" th:field="*{password}" />
                    <p class="error-message" th:each="error : ${#fields.errors('password')}" th:text="${error}">Validation error</p>
                </div>

                <div class="form-group" th:classappend="${#fields.hasErrors('confirmPassword')}? 'has-error':''">
                    <label for="confirmPassword" class="control-label">Confirm
                        password</label> <input id="confirmPassword" class="form-control" type="password" th:field="*{confirmPassword}" />
                    <p class="error-message" th:each="error : ${#fields.errors('confirmPassword')}" th:text="${error}">Validation error</p>
                </div>

                <div class="form-group" th:classappend="${#fields.hasErrors('age')}? 'has-error':''">
                    <label for="age" class="control-label">Age</label>
                    <select class="form-control" th:field="*{age}" id="age">
                        <option th:each="i : ${#numbers.sequence(18, 120)}" th:value="${i}" th:text="${i}">

                        </option>
                    </select>
                    <p class="error-message" th:each="error : ${#fields.errors('age')}" th:text="${error}">Validation error</p>
                </div>

                <div class="form-group" th:classappend="${#fields.hasErrors('terms')}? 'has-error':''">
                    <input id="terms" type="checkbox" th:field="*{terms}" /> <label class="control-label" for="terms"> I agree with the <a
                        href="#">terms and conditions</a> for Registration.
                </label>
                    <p class="error-message" th:each="error : ${#fields.errors('terms')}" th:text="${error}">Validation error
                    </p>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-success">Register</button>
                    <span>Already registered? <a href="/" th:href="@{/login}">Login here</a></span>
                </div>

                <div th:if="${param.error}">
                    <div class="alert alert-danger">Invalid fields.
                    </div>
                </div>

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

<script type="text/javascript" th:src="@{/webjars/jquery/3.2.1/jquery.min.js/}"></script>
<script type="text/javascript" th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
<script type="text/javascript" th:src="@{assets/bootstrap-datepicker/js/bootstrap-datepicker.js}"></script>

<script>
    $('.input-group.date').datepicker({
        autoclose: true,
        todayHighlight: true
    });
</script>

</body>
</html>

1 Ответ

1 голос
/ 08 апреля 2020

вот как я это использую 

<!-- birthday -->
<div class="reg-form-grp form-group">
  <label class="reg-resp" id="dateResp"></label>
  <input type="text" name="dob" id="datepicker" class="form-control input-lg" autocomplete="new-date" placeholder="BirthDay">
</div>

// validate birthday on input
$('#datepicker').on('keyup keydown blur', function() {
  // get date value
  dob = $('#datepicker').val();
  // date regex checker
  var dobReg = /^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/;
  // validate birthday input length
  if (dob.length != 10) {
    $('#dateResp').html('<i class="fa fa-times"></i> Birth date format mm/dd/yyyy').show();
    // not approved
    exeDob = false;
  }
  // test date regex
  else if (!dobReg.test(dob)) {
    $('#dateResp').html('<i class="fa fa-times"></i> Birth date format mm/dd/yyyy').show();
    // not approved
    exeDob = false;
  } else {
    $('#dateResp').html('').hide();
    // approved
    exeDob = true;
  }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...