在ASP.Net C＃中使用jquery日历控件
[英]Using jquery calender control in ASP.Net C#
问题描述
I am using a ready-made calender control available at http://www.eyecon.ro/datepicker/#download/datepicker.zip . 
我正在使用http://www.eyecon.ro/datepicker/#download/datepicker.zip上的现成的压光机控件。
The date picker's object is readily provided. 日期选择器的对象很容易提供。
In that there is one example showing that the calendar control is attached with the text box but my problem is it works fine with the HTML text box, but when I try to do it with ASP it does not attach with asp:textbox. 在该示例中，有一个示例显示日历控件与文本框连接在一起，但是我的问题是它在HTML文本框上可以正常使用，但是当我尝试使用ASP时，它并没有与asp：textbox连接。
my code is: 我的代码是：
<head runat="server">
<title></title>
<link rel="stylesheet" media="screen" type="text/css" href="DatePicker/cssdatepicker.css" />
<script type="text/javascript" src="DatePicker/js/datepicker.js"></script>
<script type="text/javascript">
$('#TextBox1').DatePicker({
flat: true,
date: '2008-07-31',
current: '2008-07-31',
calendars: 1,
starts: 1
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"> </asp:TextBox>
</div>
</form>
</body>
4 个解决方案
解决方案1
0 2013-01-29 10:27:51
Try moving the Scripts tags below your HTML elements. 尝试将Scripts标记移到HTML元素下方。 Also add a $(function(){ ... }); 还添加一个$(function(){ ... }); around the script. 在脚本周围。 Read up on this at jQuery .ready() 在jQuery .ready（）上阅读此内容
The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.
Then use <%=(TextBox1.ClientID)%> to ensure that you are always getting the correct ID. 然后使用<%=(TextBox1.ClientID)%>来确保您始终获得正确的ID。 This wont make much difference in your project, but is good to know. 这不会对您的项目产生太大影响，但是很高兴知道。
Also make sure you are including the version of jQuery, before the plugin, that is compatible with the plugin. 还要确保在插件之前包含与插件兼容的jQuery版本。
<head runat="server">
<title></title>
<link rel="stylesheet" media="screen" type="text/css" href="DatePicker/cssdatepicker.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"> </asp:TextBox>
</div>
<script type="text/javascript" src="{PATH TO YOUR jQuery file}"></script>
<script type="text/javascript" src="DatePicker/js/datepicker.js"></script>
<script type="text/javascript">
$(function(){
$('#<%=(TextBox1.ClientID)%>').DatePicker({
flat: true,
date: '2008-07-31',
current: '2008-07-31',
calendars: 1,
starts: 1
});
});
</script>
</form>
</body>
解决方案2
0 2013-01-29 10:44:35
A workaround.It seems this datepicker loves an input field to be present on the form.Strange.So I performed a little trick.Create a dummy input box , with an id and a class and hide it via css and voila your textbox can be attached to the datepicker. 一个变通办法。似乎这个日期选择器喜欢在表单上显示一个输入字段。奇怪，所以我做了一个小把戏。创建一个带有id和一个类的虚拟输入框，并通过css和voila隐藏它，您的文本框可以是附加到日期选择器。 I still don't have an explanation why it has to work when forced this way.It should just work by default since a textbox is rendered as an input box.Your homework to figure that out.... 我仍然没有解释为什么在强制使用这种方法时它必须工作。由于文本框被渲染为输入框，因此默认情况下它应该只工作。
<link rel="stylesheet" media="screen" type="text/css" href="css/datepicker.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/datepicker.js"></script>
<script type="text/javascript" src="js/eye.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/layout.js?ver=1.0.2"></script>
$('.inputDate').DatePicker({
format: 'm/d/Y',
date: $('.inputDate').val(),
current: $('.inputDate').val(),
starts: 1,
position: 'r',
onBeforeShow: function () {
$('.inputDate').DatePickerSetDate($('.inputDate').val(), true);
},
onChange: function (formated, dates) {
$('.inputDate').val(formated);
if ($('#closeOnSelect input').attr('checked')) {
$('.inputDate').DatePickerHide();
}
}
});
<form id="form1" runat="server">
<div>
<input id="inputDate2" class="inputDate" type="text" value="06/14/2008" style="display:none" />
<asp:TextBox ID="inputDate" runat="server" CssClass="inputDate" Text="06/14/2008" > </asp:TextBox>
<label id="closeOnSelect"><input type="checkbox" /> Close on selection</label>
</div>
</form>
解决方案3
-1 2013-01-29 09:15:51
Try using the below code 尝试使用以下代码
$("#MainContent_txtCopyrightYear").datepicker({
dateFormat: 'yy',
changeMonth: true,
changeYear: true,
showOn: 'button',
readonly: 'true',
buttonImage: 'References/Images/calendar.gif',
buttonImageOnly: true
});
What you have to do is go into source of your page in browser and find its id and just replace MainContent_txtCopyrightYear with that id. 您要做的是在浏览器中进入页面的源并找到其ID，然后用该ID替换MainContent_txtCopyrightYear。
解决方案4
-1 2013-01-29 09:54:25
根据您的代码，您似乎没有包含任何jquery文件。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.