bootstrap Datepicker is not working with asp.net textbox

Question

0.00/5 (No votes)

See more:

I am trying to use bootstrap datepicker with asp.net textbox but it gives an error

VB

TypeError: dp.datepicker is not a function


language: "tr"

Here is my code

XML

<script type="text/javascript">
     $(document).ready(function () {
         var dp = $('#<%=txt_date.ClientID%>');
         dp.datepicker({
             changeMonth: true,
             changeYear: true,
             format: "dd.mm.yyyy",
             language: "tr"
         }).on('changeDate', function (ev) {
             $(this).blur();
             $(this).datepicker('hide');
         });
     });
</script>

XML

<div class="form-group col-md-5">
                                            <label for="exampleInputPassword1">Date : </label>
                                            <asp:TextBox ID="txt_date" runat="server"  type="date"
                                            CssClass='form-control' placeholder="YYYY-MM-DD" ClientIDMode="Static"></asp:TextBox>
                                        </div>

Thanks in advance for your answers

Posted 28-Jul-14 0:03am

Omkar Hendre

Updated 28-Jul-14 0:04am

v2

Add a Solution

Comments

Kornfeld Eliyahu Peter 28-Jul-14 7:20am

On which line?

Omkar Hendre 28-Jul-14 7:28am

It gives me the error for this line

language: "tr"

if i remove this line then it gives me error for a date format

Kornfeld Eliyahu Peter 28-Jul-14 7:32am

It seems you missed to include the js file for bootstrap's datepicker...
Something like <script src="js/bootstrap-datepicker.js" />

Omkar Hendre 28-Jul-14 7:41am

i include those required file but still it gives me the error

Kornfeld Eliyahu Peter 28-Jul-14 7:48am

Order of script blocks?

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

_Amy · Accepted Answer · 2014-07-28T01:55:00

Solution 1

I think your jQuery is not loaded properly. Try adding a reference of jQuery to your page.
Checklists:
1. Put the reference of jQuery before closing body tag.
2. Don't load the same script twice.
3. Check the order of your JS references. First put reference for jQuery then other script files.

Hope it helps!
--Amy

Posted 28-Jul-14 1:55am

_Amy

Comments

Omkar Hendre 29-Jul-14 6:02am

thank you sir actully i solve my problem as you said i load the js file twice

_Amy 31-Jul-14 7:36am

Good. :)

Karthik_Mahalingam 28-Apr-15 14:16pm

good answer

Raje_ · Accepted Answer · 2014-07-28T03:32:00

Solution 2

Your error clearly says that your dp.datepicker function is not available and you are trying to use it. Only cause of this kind of issue is you are not including the reference of bootstrap-datepicker.js file. Apart from that you need to use Jquery and bootstrap plugin too.
And the order of reference of these file should be in correct manner :

HTML

 <!-- Jquery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>

 <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />

    <!-- Optional theme -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css" />

    <!-- Latest compiled and minified JavaScript -->
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
    
    <link rel="stylesheet" href="css/datepicker.css" type="text/css" />


    <script src="Scripts/bootstrap-datepicker.js" type="text/javascript"></script>

Reference : Click here[^]

Good luck.

Posted 28-Jul-14 3:32am

Raje_

Comments

Omkar Hendre 29-Jul-14 6:03am

Thank You Sir Thank You very much for your such a good reply

Raje_ 29-Jul-14 6:42am

Cheers!

Omkar Hendre 29-Jul-14 6:08am

Sir sorry to giving trouble you but if you know the link to how to do the bootstrap validation operations in asp.net c# then please tell me
and again thanks in advance.

Raje_ 29-Jul-14 6:43am

You can use jQuery unobtrusive validator. Please refer :
http://www.codeproject.com/Tips/755421/Using-the-jQuery-unobtrusive-validator-with-Twitte

Omkar Hendre 29-Jul-14 6:44am

Thank You Sir
Let me check it first then i will tell you whether it is working or not

Omkar Hendre 29-Jul-14 6:46am

The Code is given for the ASP.NET MVC and i am working with WebForms only with masterpage

Raje_ 29-Jul-14 6:52am

How about this : http://bootstrapvalidator.com/getting-started/

Omkar Hendre 29-Jul-14 9:45am

I tried the code but it not working for me
Here is my code

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript">
$(document).ready(function() {
$('.form1').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
ContentPlaceHolder1_txt_item_name: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and cannot be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: 'The username can only consist of alphabetical, number and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email is required and cannot be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
}
}
});
});
</script>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<li class='fa fa-book'></li> Master

<ol class="breadcrumb">
<li> Master</li>
<li class="active">Item Master</li>
</ol>

Add Item

</div>
<div class="box-body">
<div class="row">


<div class="col-md-12 pull-left" style="padding-right:25px">
<div class="form-group col-md-5">
<label for="exampleInputEmail1">Item Name : </label>
<asp:TextBox ID="txt_item_name" runat="server" CssClass='form-control' placeholder="Item Name">

Omkar Hendre 29-Jul-14 9:46am

i also added the reference files to master page as they said

priyamtheone 20-Jun-20 10:10am

Hi Raje_,

Where did you get the references for Bootstrap DatePicker CSS and Javascript files from?


<link rel="stylesheet" href="css/datepicker.css" type="text/css" />


<script src="Scripts/bootstrap-datepicker.js" type="text/javascript"></script>

From where do I integrate these two files into my project?