Datetimepicker inside datatable

ast 1

How to add date time picker inside datable, i try but this working outside of datatable , but inside datatable not working

Karen Payne MVP 35,196 Reputation points

2022-07-21T09:14:09.457+00:00

First, why are you doing this? Secondly, what have your tried, show us your code.
SurferOnWww 1,916 Reputation points

2022-07-22T00:21:20.437+00:00

What is the "datatable" you mentioned in your question? Do you mean the GridView or ListView?
Reza Aghaei 4,936 Reputation points MVP

2022-07-27T22:41:15.91+00:00

@ast any updates on this? Did the answer helped you to solve the issue?

1 answer

Reza Aghaei 4,936 MVP

You need the correct styles and scripts. (When it shows outside of the table, it usually means you are missing datetimepicker styles)

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>  
<script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>  
<script type="text/javascript" src="https://cdn.datatables.net/datetime/1.1.2/js/dataTables.dateTime.min.js"></script>  
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" />  
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.1.2/css/dataTables.dateTime.min.css" />

You need to use an input for the datetimepicker to show, and preferably use a class to enable the DateTimePicker control:

<input class="mydatetimepicker" type="text" value="2011-04-25"/>

You need to call the DateTimePicker plugin:

<script>  
    $(document).ready(function () {  
        $('#example').DataTable();  
        $('.mydatetimepicker').dtDateTime();  
    });  
</script>

Example

You can find the full example as a jsfiddle. But I also post it here:

<!DOCTYPE html>  

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <meta charset="utf-8" />  
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>  
    <script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>  
    <script type="text/javascript" src="https://cdn.datatables.net/datetime/1.1.2/js/dataTables.dateTime.min.js"></script>  
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" />  
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.1.2/css/dataTables.dateTime.min.css" />  
    <title>DataTables Example - DateTimePicker</title>  
</head>  
<body>  
    <script>  
        $(document).ready(function () {  
            $('#example').DataTable();  
            $('.mydatetimepicker').dtDateTime();  
        });  
    </script>  
    <table id="example" class="display" style="width:100%">  
        <thead>  
            <tr>  
                <th>Name</th>  
                <th>Position</th>  
                <th>Office</th>  
                <th>Age</th>  
                <th>Start date</th>  
                <th>Salary</th>  
            </tr>  
        </thead>  
        <tbody>  
            <tr>  
                <td>Tiger Nixon</td>  
                <td>System Architect</td>  
                <td>Edinburgh</td>  
                <td>61</td>  
                <td><input class="mydatetimepicker" type="text" value="2011-04-25"/></td>  
                <td>$320,800</td>  
            </tr>  
            <tr>  
                <td>Garrett Winters</td>  
                <td>Accountant</td>  
                <td>Tokyo</td>  
                <td>63</td>  
                <td><input class="mydatetimepicker" type="text" value="2011-07-25" /></td>  
                <td>$170,750</td>  
            </tr>  
            <tr>  
                <td>Ashton Cox</td>  
                <td>Junior Technical Author</td>  
                <td>San Francisco</td>  
                <td>66</td>  
                <td><input class="mydatetimepicker" type="text" value="2009-01-12" /></td>  
                <td>$86,000</td>  
            </tr>  
            <tr>  
                <td>Cedric Kelly</td>  
                <td>Senior Javascript Developer</td>  
                <td>Edinburgh</td>  
                <td>22</td>  
                <td><input class="mydatetimepicker" type="text" value="2012-03-295" /></td>  
                <td>$433,060</td>  
            </tr>  
        </tbody>  
        <tfoot>  
            <tr>  
                <th>Name</th>  
                <th>Position</th>  
                <th>Office</th>  
                <th>Age</th>  
                <th>Start date</th>  
                <th>Salary</th>  
            </tr>  
        </tfoot>  
    </table>  
</body>  
</html>

And here is the result:

ast 1 Reputation point

2022-07-28T06:00:47.667+00:00

@Reza Aghaei outside datatable input box datetimepicker is work , but if we add in datatatble then not work it means jquery and style link is proper

225842-code.txt
AgaveJoe 26,146 Reputation points

2022-07-28T12:22:11.62+00:00

Ids are unique in an HTML page. You cannot use an ID jQuery selector. Use a class selector as reza-aghaei kindly illustrated.

Also, the 3rd party jQuery DataTable library has its own object models and API. You should use the jQuery DataTable API and not write your own. See the jQuery DataTable reference documentation.
Reza Aghaei 4,936 Reputation points MVP

2022-07-28T13:07:41.423+00:00

@ast I believe you have not followed the instructions that I shared, Look at the example that I've shared. Start from a clean setup and see the results.
ast 1 Reputation point

2022-07-29T05:48:41.597+00:00

@Reza Aghaei

Thank u sir... As per your solution write code , i follow your instruction . Please check text file code and please what is wrong in my code

226008-code.txt 226052-cs.txt
Reza Aghaei 4,936 Reputation points MVP

2022-07-29T09:41:09.157+00:00

@ast I believe the post answers "How to add date time picker inside datable". It contains a complete working example.

I'd suggest you ask your debugging question in a new thread - posing a new question. And keep this question/answer focused and clean.

Also since this post answers "How to add date time picker inside datable", that would be great if you mark the answer as accepted and upvote ^ it as well. It makes it more useful for future reader, it also give the author some reputation points.