Click here to Skip to main content
14,970,251 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
can anybody plz suggest me datepicker for asp.net textbox contains masterpage, and datepicker should contain dropdown list
Posted
Updated 2-Jul-13 2:51am
v2
Comments
Thanks7872 2-Jul-13 8:52am
   
What would be the use of that DropDown list?
Dipali_Wagh 2-Jul-13 8:59am
   
one drop down list on datepicker should contains months and one drop down list should contains years.
so when we select month and year calender should be of that perticular month and year
Thanks7872 2-Jul-13 9:04am
   
If you have very user friendly calender with AJAX or even with asp.net,then why to use this type of approach?Any specific reason?

this might help you:
Datepicker[^]
   
Comments
Dipali_Wagh 5-Jul-13 6:32am
   
but this doesn't work on page which has master page is attached
Abhishek Pant 6-Jul-13 12:27pm
   
Then I go with Rohan Leuva

you can use ajax based datetime calender
Solution

For this, you need to set changeMonth and changeYear properties of jQuery DatePicker to true, so that it will show two DropDowns for Month and Year.


Demo

[Demo] jQuery DatePicker with Month and Year DropDowns[^].
Comments
Dipali_Wagh 6-Jul-13 4:18am
   
this is not working on a page which has master page attached.
plz provide me solution
   
Yes. This is because, when you use Master Page, the ID of controls are changed. You can check the view source of page.

To solve this issue, either you can set ClientIDMode of Control to static, so that ID will not get changed. Or you can read the ID in client side like below.

$('#<%= datepicker.ClientID %>').datepicker({
changeMonth: true,
changeYear: true
});
Dipali_Wagh 8-Jul-13 1:24am
   
Hey I tried this also. But giving an error as-
"0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'datepicker'"
   
Have you added the jQuery and jQuery UI files to your project?

And yes, note that in "datepicker.ClientID" datepicker is the ID of TextBox.
Dipali_Wagh 8-Jul-13 2:57am
   
ya I've added that also.
and Id of textbox is also correct
   
Ok. What is the order of jQuery files reference?
The order should be like...

1. jQuery file
2. jQuery UI file.

Is it correct?
Dipali_Wagh 8-Jul-13 3:13am
   
order is-
<link rel="stylesheet" href="CSS/jquery-ui.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
   
Make it like below...

<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel="stylesheet" href="CSS/jquery-ui.css" />

If problem is still there, then show me the source of page.
You can get that by "right click-> view source" in browser.
   
Yes, another thing...

Check if you are adding any of these files multiple times.
As you are using Master Page, so check if you have added these files to Master Pages or not.
That means, you are having these references on master as well as Content pages.

So, you need to have one reference, otherwise it will create problem. Please remove the duplicate ones.
Dipali_Wagh 8-Jul-13 3:26am
   
ok
   
Yes this is the problem. You are having multiple references.

You can see the source you have added here. The files are added multiple times.
At the beginning and also at the bottom.

So, have only one set of references.
Dipali_Wagh 8-Jul-13 3:40am
   
hey dear its working now
thank you so much.
actually on same page i was reffering same file two times
the other with diferent name .
thanx
   
Great to hear that... :)
Most Welcome. Anytime...

Thanks for accepting the answer. :)
Dipali_Wagh 8-Jul-13 3:43am
   
ya, u r most welcome
   
High Five. :)
Dipali_Wagh 8-Jul-13 3:29am
   
hey i'm not using it on master page
wait i'll show u source file it was not complete earlier
Dipali_Wagh 8-Jul-13 3:31am
   
check this:


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html;charset=utf-8" /><title>
LNTXFlow
</title><link href="menu.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/menu.js" type="text/javascript"></script>
<script type="text/javascript">

function checkAll(objRef) {
var GridView = objRef.parentNode.parentNode.parentNode;
var inputList = GridView.getElementsByTagName("input");
for (var i = 0; i < inputList.length; i++) {
//Get the Cell To find out ColumnIndex
var row = inputList[i].parentNode.parentNode;
if (inputList[i].type == "checkbox" && objRef != inputList[i]) {
if (objRef.checked) {
//If the header checkbox is checked
//check all checkboxes
//and highlight all rows
inputList[i].checked = true;
}
else {
//If the header checkbox is checked
//uncheck all checkboxes
//and change rowcolor back to original
inputList[i].checked = false;
}
}
}
}
function Check_Click(objRef) {
//Get the Row based on checkbox
var row = objRef.parentNode.parentNode;
//Get the reference of GridView
var GridView = row.parentNode;
//Get all input elements in Gridview
var inputList = GridView.getElementsByTagName("input");
for (var i = 0; i < inputList.length; i++) {
//The First element is the Header Checkbox
var headerCheckBox = inputList[0];
//Based on all or none checkboxes
//are checked check/uncheck Header Checkbox
var checked = true;
if (inputList[i].type == "checkbox" && inputList[i] != headerCheckBox) {
if (!inputList[i].checked) {
checked = false;
break;
}
}
}
headerCheckBox.checked = checked;
}

function showHide(ctrl) {
var temp = new Array();
temp = ctrl.split(',');
for (i = 0; i < temp.length; i++) {
var style = document.getElementById(temp[i].toString());
style.disabled = true;
}
}

</script>


<style type="text/css">
.style4
{
color: #FF0000;
}
input {
width:375px;
display:block;
border: 1px solid #999;
height: 25px;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

input.button {
width:100px;
position:absolute;
right:20px;
bottom:20px;
background:#09C;
color:#fff;
font-family: Tahoma, Geneva, sans-serif;
height:30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1p solid #999;
}
input.button:hover {
background:#fff;
color:#09C;
}

</style>


<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel="stylesheet" href="CSS/jquery-ui.css" />
<script>
$(function () {

$('#txtRStartDate' ).datepicker({
changeMo
   
Ok. That's fine....

But I can see that there are multiple references showing on this page.

Either mark where exactly you have added them, else write the below line in that function...

jQuery.noConflict()

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900