Функциональность Datepicker - PullRequest
Новая
       0

Функциональность Datepicker

0 голосов
/ 15 ноября 2018

У вас есть одностраничное веб-приложение, и ниже мой HTML-тег.Я использовал функцию datepicker в своем HTML и мне нужна помощь, чтобы отключить поле даты при загрузке веб-страницы (для извлечения данных из БД на заднем плане).Другими словами, в настоящее время, когда пользователь выбирает конкретный месяц, например, ноябрь 2018 г., страница запускается в течение нескольких секунд, так как она должна извлечь необходимые данные из БД на серверной части, я все еще мог видеть, что другие месяцыпо-прежнему доступны для выбора.следовательно, мне нужно, чтобы поле даты было отключено / недоступно для выбора при загрузке страницы для извлечения данных из серверной части за определенный месяц. 

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<%@ page isELIgnored="false"%>
<title>XXXXX </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="././javascript/dpe.js"></script>
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link
    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css"
    rel="stylesheet">
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-zh_TW.min.js"></script>
<!-- <script src="././javascript/week.js"></script> -->
</head>


<style>
.inner-addon {
    position: relative;
}

/* style icon */
.inner-addon .glyphicon {
    position: absolute;
    padding: 10px;
    pointer-events: none;
}

/* align icon */
.left-addon .glyphicon {
    left: 0px;
}

.right-addon .glyphicon {
    right: 0px;
}

/* add padding  */
.left-addon input {
    padding-left: 30px;
}

.right-addon input {
    padding-right: 30px;
}
</style>

<script type="text/javascript">
    var testId = "${testId}";
    function dateChange(newdate) {
        var scope = angular.element(document.getElementById('dpeDashboard'))
                .scope();
        scope.dateChange(newdate);
    }

    $(document).ready(function() {

        $('#testDate, #dpCal').datepicker({
            minViewMode : 1,
            autoclose : true,
            format : 'MM, yyyy'

        }).datepicker('setDate', 'today');


        var date = "";

    });

    $(".dropdown-menu li a").click(
            function() {

                $(this).parents(".dropdown").find('.btn').html(
                        $(this).text() + ' <span class="caret"></span>');
                $(this).parents(".dropdown").find('.btn').val(
                        $(this).data('value'));
            });
</script>

<div class="page-header">
            <h1>Welcome to XXXXX</h1>
            <div class="row">
                <div class="col-lg-5"></div>
                <div class="col-lg-3">
                    <div class="input-group">
                        <div class="form-group">
                            <form ng-submit="submitData()">

                                <div id="wait"
                                    style="display: none; width: 69px; height: 89px; position: absolute; top: 50%; left: 30%; padding: 2px;">
                                    <img src='demo_wait.gif' width="200" height="200" /> <br>&nbsp;&nbsp;Loading..
                                </div>
                                <div class='input-group date' id="testDate">
                                    <input class="form-control" type="text" id="selDate"
                                        onchange="dateChange(this.value);"
                                        placeholder="click to Select Month & Year"> <span
                                        class="input-group-addon"> <span
                                        class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                        </div>
                        <div class="col-lg-4"></div>
                    </div>
                </div>

1 Ответ

0 голосов
/ 15 ноября 2018

Я бы порекомендовал использовать angular-loading-bar: этот плагин показывает анимацию загрузки, блокируя каждый ввод / действие для пользователя до завершения загрузки.

Вот пример: 

        var promise = BackendService.getData();
        //start the loading animation
        cfpLoadingBar.start();

        promise.then(
            function (data) {
                    //when the server responds, stop the animation
                    cfpLoadingBar.complete();
                }
            },
            function (err) {
                cfpLoadingBar.complete();
                $log.error(err);
            }
        );
    }

cfpLoadingBar должен быть введен в контроллер. Это будет блокировать ваше приложение, пока ответ сервера не будет обработан.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...