CODEWITHSUNDEEP
twitter-bootstrapdatepicker
Debashrita
Debashrita

Reputation: 940

Bootstrap Datepicker is not Working .Using BootStrap 3.3.1

First I have downloaded the zip file from bellow link http://www.eyecon.ro/bootstrap-datepicker/ and i got the following structure 1.CSS folder - datepicker.css 2.JS folder-bootstrap-datepicker.js 3.less folder - datepicker.less

then i have added it to my asp.net mvc 4 project structure and in the index.cshtml i have added the references then bellow is my code

<script src="http://code.jquery.com/jquery.js"></script>
    <script src="~/Contents/bootstrap/js/bootstrap.min.js"></script>
    <script src="~/Contents/bootstrap/js/npm.js"></script>
    <script src="~/Contents/bootstrap/js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
        $(function () {
            $('#datetimepicker9').datepicker();
            $('#datetimepicker10').datepicker();
            $("#datetimepicker9").onclick ("dp.change", function (e) {
                $('#datetimepicker10').data("DateTimePicker").setDate(e.date);
            });
            $("#datetimepicker10").onclick("dp.change", function (e) {
               $('#datetimepicker9').data("DateTimePicker").setDate(e.date);
            });
        });
    </script>


<div class="searchDatePickerRow">
            <div class="searchFrmDate">
                <form class="formMargin" role="form">
                    <div class="form-group">
                <div class="input-group date" id="datetimepicker9">
                    <input type="text" class="form-control" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
                </form>
            </div>
            <div class="searchToDate">
                <form class="formMargin" role="form">
                    <div class="form-group">
                <div class="input-group date " id="datetimepicker10">
                    <input type="text" class="form-control" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
                </form>
            </div>
        </div>

but when i click on the calander image datepicker is not working. I have followd the bellow links How do I get bootstrap-datepicker to work with Bootstrap 3? Bootstrap-Datetimepicker Not working but not getting any success.In the above link it is mentioned to add datetimepicker.js and moment.js but from where i will get this file.

Upvotes: 0

Views: 3330

Answers (2)

Sarower Jahan
Sarower Jahan

Reputation: 1495

You didn't add bootstrap-datepicker.css Add the datepicker.css after bootstrap.css. You can get it from this url http://www.eyecon.ro/bootstrap-datepicker/

then call this javascript below: 

$('.datepicker').datepicker();

Upvotes: 1

Ahmad Sharif
Ahmad Sharif

Reputation: 4435

you have missed the class datepicker or the data attributes in your input class. you have to add this in your input tag. 

<input class="datepicker" data-provide="datepicker">

Upvotes: 0

Related Questions