Wednesday, 16 April 2014

How to disable Weekend days in DatePicker on ASP.NET using JQuery



In this scenario we need to disable Weekend days. Below is the sample code of JQuery in ASP.NET.

Sample code

<script type="text/javascript">
$(function () {
$("#datepicker").datepicker({ beforeShowDay: $.datepicker.noWeekends });
});
</script>

Example:


Below is the total page design:

<html>
<head>
<title>jQuery Datepicker: Disable all weekends</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#datepicker").datepicker({ beforeShowDay: $.datepicker.noWeekends });
});
</script>
</head>
<body>
<form runat="server" id="DesableWeekEnds">
Date:
<asp:TextBox runat="server" ID="datepicker" />
</form>
</body>
</html>


 Output:


How to disable Future days in DatePicker on ASP.NET using JQuery



In this scenario we need to disable Future days of the current day. Below is the sample code of JQuery in ASP.NET.

Sample code:

<script type="text/javascript">
$(function() {
var date = new Date();
var currentMonth = date.getMonth();
var currentDate = date.getDate();
var currentYear = date.getFullYear();
$('#datepicker').datepicker({
maxDate: new Date(currentYear, currentMonth, currentDate)
});
});
</script>

Example: 



How to disable previous days in DatePicker on ASP.NET using JQuery


In this article I will explain how to disable previous days in Datapicker on ASP.NET using JQuery.

Or 

How to disable past days in Datepicker on ASP.NET using JQuery.



In this scenario we need to disable previous days of the current day. Below is the sample code of JQuery in ASP.NET.

JQuery Datepicker code:

<script type="text/javascript">
$(function () {
var date = new Date();
var currentMonth = date.getMonth();
var currentDate = date.getDate();
var currentYear = date.getFullYear();
$('#datepicker').datepicker({
minDate: new Date(currentYear, currentMonth, currentDate)
});
});
</script>

Example:

How to validate file upload control Extension using JQuery in ASP.NET


In this article I will explain how to validate file upload control extension using JQuery in ASP.NET.

In this scenario user can upload different type of files using file upload control. We validate to allow only image file. Below is the sample JQuery code for validating file extension.

JQuery code:

<script type="text/javascript">
$(function () {
$('#<%=fuFileExtension.ClientID %>').change(function () {
var fileExtension = ['png', 'jpeg', 'jpg', 'gif', 'bmp'];
if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
alert("Only allow '.png','.jpeg','.jpg', '.gif', '.bmp'.");
}
else
{
alert("Accepted");
}
})
})
</script>

Upload multiple files using ASP.NET


In this article I will explain how to upload multiple file in ASP.Net using JQuery multiple upload plugin.

In this scenario we need to download JQuery multiple upload plugin for multiple file upload functionality. Click below download link for Plugin download.


Right click the website, Add new folder with the name as Upload. We save uploaded files in this folder.

Example :

How to Clear Dropdown list value using JQuery in ASP.NET


In this article I will explain how to clear Dropdown list and Textbox using JQuery in ASP.NET.

In this scenario I have created one Dropdown list and one Textbox for user information. User clicks the Clear button Dropdown list and Textbox values are cleared.

Clear Dropdown and Textbox values using JQuery.

<script type="text/javascript">
$(function () {
$('#btnFirst').click(function () {
$('#txtFirstName').val('');
$('#ddlSelect').val('0');
})
})
</script>

How to Clear TextBox values using JQuery in ASP.NET


In this article I will explain how to clear multiple Textboxes using JQuery in ASP.NET.

In this scenario I have created three Textboxes for user information. User click the Clear button all three textboxes values are removed.

Clear only particular TextBox value using JQuery in asp.net

<script type="text/javascript">
$('#btnFirst').click(function () {
$('#txtFirstName').val('');
})
})
</script>

Clear all TextBox value using JQuery in ASP.NET

<script type="text/javascript">
$(function () {
$('#btnClear').click(function () {
$('input[type=text]').each(function () {
$(this).val('');
})
})
})
</script>