Using ASP.NET: August 2025

Sunday, 3 August 2025

Jquery DatePicker in HTML

Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain about how to create Jquery DatePicker in HTML.

The Jquery DatePicker plugin with the property named showOn which creates the DatePicker (Calendar) to be shown only when the adjoining Button (Icon) is clicked.

Code for HTML Page

On the HTML page i will place a textbox to show the date that will be select by the user from date picker with the id named txt_calender.

On the HTML page i am using or inherited the below mentioned CSS file as well as .js files .

Inside the Jquery document ready event handler, the TextBox has been applied with Jquery DatePicker plugin.

Here i am assigning the below mentioned properties to the Jquery DatePicker plugin showOn – button

The Jquery DatePicker will be shown only when the Button next to the TextBox is clicked.

buttonImageOnly – true

The Button will be an Image.

buttonImage – URL

The URL of the Image file to be displayed as Button.

dateFormat – dd/mm/yy

The Jquery DatePicker will show the selected Date in dd/MM/yyyy date format inside the TextBox.

$(function () {

$("#txt_calender").datepicker({

showOn: 'button',

buttonImageOnly: true,

buttonImage: 'images/calendar.gif',

dateFormat: 'dd/mm/yy'

});

</script>

Below i am also giving a image with the named calendar. You need to download this image by right click and save as image option and place it inside the images folder on the root folder.

Now i am giving the complete code for HTML page. You can copy and paste the whole code on your HTML page and enjoy the implementation of this program

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

body { font-family: Arial; font-size: 10pt; }

#txtDate { position: relative; top: -7px; margin-right: 5px; }

</style>

</head>

<body>

$(function () {

$("#txt_calender").datepicker({

showOn: 'button',

buttonImageOnly: true,

buttonImage: 'images/calendar.gif',

dateFormat: 'dd/mm/yy'

});

</script>

</body>

</html>

See the output of this code in below image.

Conclusion: In above code, I explained that how to create Jquery DatePicker with Calendar Icon (Image) in HTML. This code is very helpful for every developer. Bye Bye and take care of yourself Developers. We will come back shortly with the new article.

Thanks and Regards

Using Asp.net

Friday, 1 August 2025

How to export HTML Table to Excel file using Javascript

Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article, i will explain with that how we can export HTML Table to Excel file using Javascript in HTML. The HTML Table will be exported or converted to Excel sheet using the Jquery table to excel plugin in HTML. I used Jquery in this article for the only use of Jquery plugin. Download table2excel.js file from below mentioned link and please it in the folder named script folder in the main folder of your project,

https://drive.google.com/file/d/1rgkGqOwAxlqN4Niq08jWm_b7X05kEYaW/view?usp=sharing

Code for HTML Page

On the HTML page I will place the Table and a Button with the id named Button_export. On the OnClientClick event handler of the i assigned a JavaScript function named Table_Export().

<tr>

<th>Product ID </th>

<th>Price</th>

</tr>

<tr>

</tr>

<tr>

<td>Reebok</td>

</tr>

<tr>

<td>Redtape</td>

</tr>

<tr>

<td>Liberty</td>

</tr>

<tr>

<td>Adidas </td>

</tr>

<tr>

</tr>

</table>

<br/>

Export HTML Table to Excel using JavaScript in HTML.

When I will click on the export button, the JavaScript Table_Export function is called.

Inside the Table_Export function, the jQuery table2excel plugin is applied to the HTML Table and it is converted (exported) to Excel file.

The jQuery table2excel plugin accepts filename parameter which sets the name of the Excel file.

function Table_Export() {

$("#table_Companies").table2excel({

filename: "Table.xls"

});

retuen false;

}

</script>

Here I am giving the whole code of HTML page. You can copy and paste the complete code to enjoy the execution of this program.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Export HTML Table to Excel </title>

body { font-family: Arial; font-size: 10pt; }

table { border: 1px solid #ccc; border-collapse: collapse; }

table th { background-color: #F7F7F7; color: #333; font-weight: bold; }

table th, table td { padding: 5px; border: 1px solid #ccc; }

</style>

</head>

<body>

<tr>

<th>Product ID </th>

<th>Price</th>

</tr>

<tr>

</tr>

<tr>

<td>Reebok</td>

</tr>

<tr>

<td>Redtape</td>

</tr>

<tr>

<td>Liberty</td>

</tr>

<tr>

<td>Adidas </td>

</tr>

<tr>

</tr>

</table>

<br />

</form>

function Export_table() {

$("#table_Companies").table2excel({

filename: "Table.xls"

});

return false;

}

</script>

</body>

</html>

Conclusion: In above code, I have been explained that how how we can export HTML Table to Excel file using Javascript in HTML. This code is very helpful for every developer. Bye Bye and take care of yourself Developers. We will come back shortly with the new article.