jquery UI Datepicker 시간 제어 사용 및 문제 해결
- PHPz앞으로
- 2016-05-16 15:03:122509검색
이 기사의 예에서는 jqueryUI의 datepicker 사용을 공유하여 asp.net의 UpdatePanel과 함께 사용할 때 실패 문제를 해결합니다.
1. jqueryUI의 날짜 선택기 사용 방법
--> jqueryUI 공식 홈페이지 시스템 테마에 맞는 스타일 다운로드 , jqueryUI 테마 다운로드 주소 (http://jqueryui.com/themeroller/#themeGallery)
-->다운로드된 파일
jquery-ui-1.10.3.custom 폴더마다 다른 테마의 차이점은 서로 다른 CSS를 참조한다는 것입니다
다운로드됨 기본 스타일은 다음과 같습니다.
다른 스타일(예: 내가 다운로드한 스타일):
다운로드한 스타일 jqueryUI는 CSS 폴더만 제외하고 나머지 파일은 동일합니다.
--> 페이지에서 datePicker를 사용하는 단계
(1) jquery-ui-1.10.3.custom .min.css 스타일 파일 소개
(2) jquery-1.9.1.js 및 jquery-ui-1.10.3.custom.min.js 스크립트 파일 소개 참고: 첫 번째; jquery 파일 소개
( 3) 시작 시간과 종료 시간을 선택해야 합니다.
코드는 다음과 같습니다:
<script type="text/javascript">
$(function () {
$("#txtStartDate").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
onClose: function (selectedDate) {
$("#txtEndDate").datepicker("option", "minDate", selectedDate);
}
});
$("#txtEndDate").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
onClose: function (selectedDate) {
$("#txtStartDate").datepicker("option", "maxDate", selectedDate);
}
});
$("#ui-datepicker-p").css("font-size", "12px"); //改变大小
});
</script>
</head>
<body>
<label for="from">开始时间：</label>
<input type="text" id="txtStartDate" name="from"/>
<label for="to">结束时间：</label>
<input type="text" id="txtEndDate" name="to"/>
</body>참고:
(1)$("#ui-datepicker-p").css("font-size ", " 12px"); 날짜 컨트롤의 크기를 변경하는 데 사용됩니다
(2) dateFormat: "yy-mm-dd", 날짜 형식 변경
(3) 날짜 컨트롤은 영어 버전, 스크립트를 추가하여 중국어로 변경
/* Chinese initialisation for the jQuery UI date picker plugin. */
/* Written by Cloudream (cloudream@gmail.com). */
jQuery(function ($) {
$.datepicker.regional['zh-CN'] = {
closeText: '关闭',
prevText: '<上月',
nextText: '下月>',
currentText: '今天',
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月'],
monthNamesShort: ['一', '二', '三', '四', '五', '六',
'七', '八', '九', '十', '十一', '十二'],
dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
weekHeader: '周',
dateFormat: 'yy-mm-dd',
firstDay: 1,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: '年'
};
$.datepicker.setDefaults($.datepicker.regional['zh-CN']);
});(4) 일부 날짜 선택기 속성 및 메소드에 대한 자세한 사용법은 해당 API 문서를 참조하세요.
--> ; 다른 트릭 공유
$("[id$=txtASN]") 사용
정의된 텍스트 상자 컨트롤 ID asp.net은 txtASN이지만 $("#txtASN")은 텍스트 상자의 dom 요소를 가져올 수 없습니다. 그 이유는 소스 코드를 확인한 후 컨트롤이 패널에 배치된 경우 컨트롤 ID가 변경된 것으로 나타났기 때문입니다. 또는 마스터, 생성된 html 컨트롤 입력 ID는 pnlBaseInfo_txtASN
과 같이 변경됩니다. 솔루션: $("[id$=txtASN]"), 의미는 ID가 txtASN
-- >완전효과
2. asp.net의 UpdatePanel
문제: 실행 후 "쿼리"를 클릭하면 페이지가 부분적으로 새로 고쳐지고 달력 선택기가 오지 않는 것으로 나타났습니다. out
asp.net의 UpdatePanel 문제에서 비동기 포스트백 후 DatePicker가 실패합니다
페이지를 처음 로드할 때 DatePicker 컨트롤이 정상적으로 표시될 수 있지만 쿼리를 클릭한 후 비동기 포스트백으로 인해 DatePicker가 실패합니다.
--> UpdatePanel 분석
UpdatePanel은 주로 전체 페이지의 Postback을 방지하기 위해 애플리케이션에서 부분 새로 고침에 사용됩니다.
UpdatePanel 부분 새로 고침의 핵심은 MicrosoftAjaxWebForm.js 파일에 있습니다. 부분 새로 고침 프로세스는 서버 코드를 실행한 후 페이지를 서버(ViewState 포함)에 제출하는 것입니다. 렌더링되었습니다.
--> jQuery 분석
UpdatePanel이 부분적으로 새로 고쳐진 후 내부의 텍스트 상자 요소가 다시 작성되기 때문에 전체 DOM 트리가 없습니다. 다시 로드되지 않으므로 jQuery의 준비 이벤트가 트리거되지 않으므로 텍스트 상자 요소는 원래 특수 효과를 잃습니다.
-->해결책
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(evt, args) {});
$(function () {
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function (evt, args) {
$("[id$=txtStartDate]").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
onClose: function (selectedDate) {
$("[id$=txtEndDate]").datepicker("option", "minDate", selectedDate);
}
});
$("[id$=txtEndDate]").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
onClose: function (selectedDate) {
$("[id$=txtStartDate]").datepicker("option", "maxDate", selectedDate);
}
});
$("#ui-datepicker-p").css("font-size", "14px"); //改变大小
});
});에 DatePicker를 초기화하는 코드를 넣으세요. 다음 문서를 참조하여 학습할 수도 있습니다.
jquery UI Datepicker 시간 제어 사용(1)
jquery UI Datepicker 시간 제어 사용(2) )
jquery UI Datepicker 시간 제어 사용 (3)
위 내용은 이 글의 전체 내용이므로 모든 분들께 도움이 되기를 바랍니다. 학습.