Datepicker in html table selection problemHow do I...

Question

0.00/5 (No votes)

See more:

hi,

i have a html table with a column date.in that i have textbox having class DATEPICKER i want to get the date picker in this column

when i used like

JavaScript

$(document).ready(function () {
    $('.datepicker').datepicker();
});

i am getting date picker in each row in the table. but when i select date in any datepicker, only first rows datepicker only changes.

can anybody help me

Thnaks
kunjammu

[Edit member="Tadit"]
Added pre tags.
[/Edit]

Posted 10-Apr-14 19:39pm

Kunjammu

Updated 10-Apr-14 20:08pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

v3

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 11-Apr-14 2:10am

Can you create a fiddle at http://jsfiddle.net/[^]?

Else post the whole code by Improving your Question.

Kabi Pr. Sahoo 11-Apr-14 6:05am

Can you Please briefly describe about http://jsfiddle.net/[^]?

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 11-Apr-14 6:27am

Okay, read the following resources.

1. jsFiddle: An online playground for your JavaScript, HTML, CSS[^]
2. Tutorial[^]

Kabi Pr. Sahoo 14-Apr-14 0:22am

Thanks tadit..for the info.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 14-Apr-14 0:24am

Welcome bro. :)

Snesh Prajapati 11-Apr-14 2:11am

I got it your problem..can you write your html code and code what you are writing on date-picker selection change.

Kunjammu 11-Apr-14 2:15am

i have no code on datepicker selection change. i just want to save the selected date to database

Snesh Prajapati 11-Apr-14 2:19am

Its fine but you have html code that you can write.

Kunjammu 11-Apr-14 2:22am

<th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.TextBoxFor(model => item.Date, new { @id = "date", @class = "datepicker", Value = item.Date.ToString("MM-dd-yyyy"), })
</td>
</tr>
}
</table>

Snesh Prajapati 11-Apr-14 2:36am

What I understood ..it is happening because all date-picker are having same class name.

Kunjammu 11-Apr-14 2:49am

if i use id , datepicker shows only for the first textbox. wht will i do... any idea..

2 solutions

Solution 1

I think this solution might helps you....

HTML

<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

    <script>
    $(function() {
    $( "#datepicker" ).datepicker();
    });
    </script>
</head>
<body>
    <p>Date: <input type="text" id="datepicker"></input></p>
</body>
</html>

[Edit member="Tadit"]
Added pre tags.
[/Edit]

Posted 10-Apr-14 20:44pm

Kabi Pr. Sahoo

Updated 11-Apr-14 0:29am

v2

Comments

Kunjammu 11-Apr-14 2:50am

my date picker is inside a html table like
<th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.TextBoxFor(model => item.Date, new { @id = "date", @class = "datepicker", Value = item.Date.ToString("MM-dd-yyyy"), })
</td>
</tr>
}
</table>

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)

Kunjammu · Accepted Answer · 2014-04-10T23:02:00

Solution 2

i used

$(document).ready(function () {
       $('.datepicker').each(function () {
           $(this).removeClass('hasDatepicker').datepicker();
       });
   });

Posted 10-Apr-14 23:02pm

Kunjammu

Comments

Snesh Prajapati 11-Apr-14 6:19am

Finally you did it. Sorry due to some work I could not reply. Good Job.

Kunjammu 11-Apr-14 6:35am

can u plzz help for
http://www.codeproject.com/Questions/758047/dropdwonlist-not-showing-selected-value