Introduction

This write-up provides the complete steps and code for adding a date picker in Jquery Datatable.

To design a date picker in DataTable. You will need

  • CSS and JavaScript
  • Date Picker Plugin
  • Need to use input control for the Date field.

Now let’s move.

Below are the required CSS and Javascript which you need to use in your html page.

 <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" />
   

We need to call the DateTime Picker plugin as below.

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

Need to use input control and use the proper class as depicted below.

<input class="mydatetimepicker" type="text" value="1960-04-20"/>

Method 1-Hardcoded table data

Complete Html code for date time picker in data table using a jquery data table is given below.

<!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 with 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>Role</th>
                <th>Branch</th>
                <th>Age</th>
                <th>Start date</th>              
            </tr>
        </thead>
        <tbody>        
            <tr>
                <td>Satya</td>
                <td>Sr Software Engineer</td>
                <td>Manila</td>
                <td>25</td>
                <td><input class="mydatetimepicker" type="text" value="2011-07-25" /></td>            
            </tr>
            <tr>
                <td>Rijwan Ansari</td>
                <td> Technical Lead</td>
                <td>Kathmandu</td>
                <td>30</td>
                <td><input class="mydatetimepicker" type="text" value="2009-01-12" /></td>               
            </tr>          
        </tbody>
    </table>
</body>
</html>

The output of the above page in the browser is given below.

Method 2- Using JS for table data

Below is a code sample for the date picker in the data table using JS for table data.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <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" />
</head>
<body>
    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Salary</th>
                <th>Start Date</th>
            </tr>
        </thead>
</table>
<script text="javascript">
$(document).ready(function () {
             $('#example').DataTable();
             $('.mydatetimepicker').dtDateTime();
         });

var inputData = [
		["Satya", "Software Developer", 50000],
  	["RijSat", "Team Lead Software Development", 35000]
  ]

var exampleDataTable = $('#example').DataTable( {
	"data": inputData,
  "columnDefs": [{
                "targets": -1,
                "data": null,
                "orderable": false,
                "defaultContent": ['<input type="text" class="form-control mydatetimepicker" placeholder="Date" />']
            }]
} );
</script>
</body>

Output

Conclusion

Therefore, in this article, we have learned two different ways to design a Date picker inside the data table. These are the easiest way to design a Date Picker inside DataTable.

Leave a Reply

Your email address will not be published.