CODEWITHSUNDEEP
jqueryhtmlcssdatepicker
beginner
beginner

Reputation: 303

datepicker for month and year not working

I have tried out the datepicker for my html page. Its not working. I am just getting a textbox next to a label Date. Any help on this? Here is my html snippet

     <div class="form-group">
     <label for="startDate" class="col-sm-5 control-label">Date:</label>
     <div class="col-sm-4">
     <input name="startDate" data-ng-model="user.date" id="startDate" class="date-picker" required />
</div>
</div>

js code:

$(function () {
    $('.date-picker').datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        onClose: function (dateText, inst) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        }
    });
});

css code:

.ui-datepicker-calendar {
    display: none;
    }

Below are the imports from my index.html:

 <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />
    <script src="../lib/datepicker.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
    <link href="../css/index.css" rel="stylesheet" />

    <script src="../app.js"></script>

    <script src="../Controller/HeaderCtrl.js"></script>

Upvotes: 0

Views: 3768

Answers (2)

Kate Fernando
Kate Fernando

Reputation: 381

@Beginner,

This is your code that I used to check your issue. Can you please remove any other jquery references in your code. In my case, I removed @Scripts.Render("~/bundles/jquery") in _Layout page and it seems working fine then.

<!doctype html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />
    <script src="../lib/datepicker.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
    <link href="../css/index.css" rel="stylesheet" />

    <script src="../app.js"></script>

    <script src="../Controller/HeaderCtrl.js"></script>
    <script>
        $(function () {
            $('.date-picker').datepicker({
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                dateFormat: 'MM yy',
                onClose: function (dateText, inst) {
                    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                    $(this).datepicker('setDate', new Date(year, month, 1));
                }
            });
        });
    </script>
</head>
<body>
    <div class="form-group">
        <label for="startDate" class="col-sm-5 control-label">Date:</label>
        <div class="col-sm-4">
            <input name="startDate" data-ng-model="user.date" id="startDate" class="date-picker" required />
        </div>
    </div>
</body>
</html>

Upvotes: 0

Ryad Boubaker
Ryad Boubaker

Reputation: 1501

Well if you are using and including jqueryUI and jquery the right way your code is fine.

$(function () {
    $('.date-picker').datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        onClose: function (dateText, inst) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        }
    });
});
.ui-datepicker-calendar {
    display: none;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>

<div class="form-group">
     <label for="startDate" class="col-sm-5 control-label">Date:</label>
     <div class="col-sm-4">
     <input name="startDate" data-ng-model="user.date" id="startDate" class="date-picker" required />
</div>
</div>

Upvotes: 1

Related Questions