Trying to implement bootstrap datepicker to my ASP.NET MVC website

Question

I have the following calls in my View that should let me open the Calendar and select a date, I'm not sure I understand how to implement Datepicker.

<script>
    $(document).ready(function () {
        $(".datepicker").datepicker();
    });
</script>

 <li class="input-group-addon">
       <label><%= CRAWebSiteMVC.Properties.Resources.EndDate %> :</label>                
       <input type="text" class="datepicker" placeholder="Click me!">
 </li>

I have installed bootstrap datepicker on the NuGet, what am I missing or not understanding?

score 1 · Answer 1 · answered Dec 17 '15 at 14:20

1

Use this for initizalis your Datepicker:

<script type="text/javascript">
        $(function () {
            $('#date').datepicker({
                format: 'dd.mm.yyyy',
                weekStart: 1,
                clearBtn: true,
                language: 'de-DE',
                autoclose: true,
                forceParse: false,
                calendarWeeks: true
            });
        });
</script>
<li class="input-group-addon">
       <label><%= CRAWebSiteMVC.Properties.Resources.EndDate %> :</label>                
       <input id="date" type="text" class="datepicker" placeholder="Click me!">
 </li>

For more formatting see bootstrap-datepicker sandbox you will also find an example of the implementation

answered Dec 17 '15 at 14:20

Carsten Cors

2,505
2
14
21

I believe I'm missing something other than how to initialise it. I've trying it but don't have any result. Perhaps as NinjaDeveloper said I have forgotten references? – Dec 17 '15 at 14:23
1

Normally the reference should be included in the installation over NuGet unless he has not added it in the BundelConfig. `bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js", "~/Scripts/bootstrap-datepicker*", "~/Scripts/respond.js", "~/Scripts/moment.js"));` – Carsten Cors Dec 17 '15 at 14:29

score 0 · Accepted Answer · edited May 23 '17 at 11:46

0

this is how you implement bootstrap datepicker in html page link

  <div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>

how to test if bootstrap 3 is loaded or not link

// Will be true if bootstrap 3 is loaded, false if bootstrap 2 or no bootstrap
var bootstrap3_enabled = (typeof $().emulateTransitionEnd == 'function');

edited May 23 '17 at 11:46

Community

1
1

answered Dec 17 '15 at 14:10

I've been going through your link and trying (without adding anything else) but I can't seem to make it work. – Dec 17 '15 at 14:15
did you add the Bootstrap JavaScript libs reference into your html? – Dec 17 '15 at 14:18
Excuse me but how may I do that? – Dec 17 '15 at 14:19
read this how to setup Basic template http://getbootstrap.com/getting-started/#template – Dec 17 '15 at 14:23

Trying to implement bootstrap datepicker to my ASP.NET MVC website

2 Answers2