Datepicker functionality

Have a single page web app and below is my HTML tag. I have used datepicker function in my HTML and need help to disable the date field when the web page is loading (to fetch data from DB in the back ground). In other words, currently, when the user selects a specific month ex: Nov 2018, the page runs for for few seconds as it has to fetch the needed data from the DB in the back end, I could still see that the other months are still available to select. hence, I need the date field to be disabled/unavailable to select when the page is loading to fetch the data in the back end for a specific month.

<%@ 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>

edited Nov 15 '18 at 6:13

Wildchild

110311

asked Nov 15 '18 at 5:10

Ven

add a comment |

<%@ 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>

edited Nov 15 '18 at 6:13

Wildchild

110311

asked Nov 15 '18 at 5:10

Ven

add a comment |

<%@ 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>

edited Nov 15 '18 at 6:13

Wildchild

110311

asked Nov 15 '18 at 5:10

Ven

<%@ 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>

html angularjs bootstrap-4

edited Nov 15 '18 at 6:13

Wildchild

110311

asked Nov 15 '18 at 5:10

Ven

edited Nov 15 '18 at 6:13

Wildchild

110311

asked Nov 15 '18 at 5:10

Ven

edited Nov 15 '18 at 6:13

Wildchild

110311

edited Nov 15 '18 at 6:13

Wildchild

110311

edited Nov 15 '18 at 6:13

Wildchild

110311

asked Nov 15 '18 at 5:10

Ven

asked Nov 15 '18 at 5:10

Ven

asked Nov 15 '18 at 5:10

Ven

add a comment |

1 Answer
1

active

oldest

votes

I would recommend using angular-loading-bar: this plugin shows a loading animation, blocking every input/action for the user until the loading is complete.

Here is an example:

        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 has to be injected in the controller.
This will block your application until the server response is processed.

answered Nov 15 '18 at 9:10

feffo982

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53312812%2fdatepicker-functionality%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

I would recommend using angular-loading-bar: this plugin shows a loading animation, blocking every input/action for the user until the loading is complete.

Here is an example:

        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 has to be injected in the controller.
This will block your application until the server response is processed.

answered Nov 15 '18 at 9:10

feffo982

add a comment |

I would recommend using angular-loading-bar: this plugin shows a loading animation, blocking every input/action for the user until the loading is complete.

Here is an example:

        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 has to be injected in the controller.
This will block your application until the server response is processed.

answered Nov 15 '18 at 9:10

feffo982

add a comment |

I would recommend using angular-loading-bar: this plugin shows a loading animation, blocking every input/action for the user until the loading is complete.

Here is an example:

        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 has to be injected in the controller.
This will block your application until the server response is processed.

answered Nov 15 '18 at 9:10

feffo982

I would recommend using angular-loading-bar: this plugin shows a loading animation, blocking every input/action for the user until the loading is complete.

Here is an example:

        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 has to be injected in the controller.
This will block your application until the server response is processed.

answered Nov 15 '18 at 9:10

feffo982

answered Nov 15 '18 at 9:10

feffo982

answered Nov 15 '18 at 9:10

feffo982

answered Nov 15 '18 at 9:10

feffo982

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky