1.download latest jqury http://jquery.com/download/
Site.Master
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="KLSTest.Site" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type=.min.js") %>"></script>
<script type=.custom/jquery-ui.min.js")%>"></script>
<script type=.custom/zh-CN/jquery.ui.datepicker-zh-CN.js")%>"></script>
<script type="text/javascript" src="<%=ResolveClientUrl("~/Script/common_ui.js")%>"></script>
<link rel=.custom/jquery-ui.min.css")%>" />
<asp:ContentPlaceHolder ID="scripts" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div>
<asp:ContentPlaceHolder ID="bodyContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Child Page
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="DatePickerTest.aspx.cs" Inherits="KLSTest.DatePickerTest" %>
<asp:Content ID="Content1" ContentPlaceHolderID="scripts" runat="server">
<script type="text/javascript">
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="bodyContent" runat="server">
<asp:TextBox ID="dateSelect" runat="server" CssClass="jDatePicker"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</asp:Content>
DatePicker-zh-CN
jQuery(function ($) {
$.datepicker.regional['zh-CN'] = {
closeText: '关闭',
prevText: '<上月',
nextText: '下月>',
currentText: '今天',
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月'],
monthNamesShort: ['一', '二', '三', '四', '五', '六',
'七', '八', '九', '十', '十一', '十二'],
dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
weekHeader: '周',
dateFormat: 'yy-mm-dd',
firstDay: ,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: '年'
};
$.datepicker.setDefaults($.datepicker.regional['zh-CN']);
});
DatePicker Initalization common_ui.js
$(function () {
/*-------------------- Date Picker --------------------------------------------*/
/*---- how to use: <asp:TextBox ID="TextBox1" runat="server" CssClass="jDatePicker"></asp:TextBox>---*/
if (!$('.jDatePicker').hasClass('readonly_submit')) {
$('.jDatePicker').addClass('readonly_submit');
}
$('.jDatePicker').datepicker({
showButtonPanel: true,
beforeShow: function (input) {
setTimeout(function () {
var buttonPane = $(input)
.datepicker("widget")
.find(".ui-datepicker-buttonpane");
$("<button>", {
text: "清除",
click: function () {
$.datepicker._clearDate(input);
}
}).appendTo(buttonPane).addClass("ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all");
}, );
},
onChangeMonthYear: function (year, month, instance) {
setTimeout(function () {
var buttonPane = $(instance)
.datepicker("widget")
.find(".ui-datepicker-buttonpane");
$("<button>", {
text: "清除",
click: function () {
$.datepicker._clearDate(instance.input);
}
}).appendTo(buttonPane).addClass("ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all");
}, );
}
});
/*-------------------- Input : Readonly but can be submit --------------------------------------------*/
/*---- how to use: <asp:TextBox ID="TextBox1" runat="server" CssClass="readonly_submit"></asp:TextBox>---*/
$('.readonly_submit').on('paste', function (e) { e.preventDefault(); return false; });
$('.readonly_submit').on('keydown', function (e) { e.preventDefault(); return false; });
$('.readonly_submit').attr('autoComplete', 'off');
});