jquery UI Datepicker 시간 제어 사용 및 문제 해결-JS 튜토리얼-php.cn

jquery UI Datepicker 시간 제어 사용 및 문제 해결

PHPz

풀어 주다： 2021-05-28 16:03:14

앞으로

2496명이 탐색했습니다.

jquery UI Datepicker 시간 제어 사용 및 문제 해결

이 기사의 예에서는 jqueryUI의 datepicker 사용을 공유하여 asp.net의 UpdatePanel과 함께 사용할 때 실패 문제를 해결합니다.

1. jqueryUI의 날짜 선택기 사용 방법

--> jqueryUI 공식 홈페이지 시스템 테마에 맞는 스타일 다운로드 , jqueryUI 테마 다운로드 주소 (http://jqueryui.com/themeroller/#themeGallery)

jquery UI Datepicker 시간 제어 사용 및 문제 해결

-->다운로드된 파일
jquery-ui-1.10.3.custom 폴더마다 다른 테마의 차이점은 서로 다른 CSS를 참조한다는 것입니다
다운로드됨 기본 스타일은 다음과 같습니다.

jquery UI Datepicker 시간 제어 사용 및 문제 해결

다른 스타일(예: 내가 다운로드한 스타일):

jquery UI Datepicker 시간 제어 사용 및 문제 해결

다운로드한 스타일 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[&#39;zh-CN&#39;] = {
    closeText: &#39;关闭&#39;,
    prevText: &#39;<上月&#39;,
    nextText: &#39;下月>&#39;,
    currentText: &#39;今天&#39;,
    monthNames: [&#39;一月&#39;, &#39;二月&#39;, &#39;三月&#39;, &#39;四月&#39;, &#39;五月&#39;, &#39;六月&#39;,
        &#39;七月&#39;, &#39;八月&#39;, &#39;九月&#39;, &#39;十月&#39;, &#39;十一月&#39;, &#39;十二月&#39;],
    monthNamesShort: [&#39;一&#39;, &#39;二&#39;, &#39;三&#39;, &#39;四&#39;, &#39;五&#39;, &#39;六&#39;,
        &#39;七&#39;, &#39;八&#39;, &#39;九&#39;, &#39;十&#39;, &#39;十一&#39;, &#39;十二&#39;],
    dayNames: [&#39;星期日&#39;, &#39;星期一&#39;, &#39;星期二&#39;, &#39;星期三&#39;, &#39;星期四&#39;, &#39;星期五&#39;, &#39;星期六&#39;],
    dayNamesShort: [&#39;周日&#39;, &#39;周一&#39;, &#39;周二&#39;, &#39;周三&#39;, &#39;周四&#39;, &#39;周五&#39;, &#39;周六&#39;],
    dayNamesMin: [&#39;日&#39;, &#39;一&#39;, &#39;二&#39;, &#39;三&#39;, &#39;四&#39;, &#39;五&#39;, &#39;六&#39;],
    weekHeader: &#39;周&#39;,
    dateFormat: &#39;yy-mm-dd&#39;,
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: true,
    yearSuffix: &#39;年&#39;
  };
  $.datepicker.setDefaults($.datepicker.regional[&#39;zh-CN&#39;]);
});

로그인 후 복사

(4) 일부 날짜 선택기 속성 및 메소드에 대한 자세한 사용법은 해당 API 문서를 참조하세요.

--> ; 다른 트릭 공유

$("[id$=txtASN]") 사용

정의된 텍스트 상자 컨트롤 ID asp.net은 txtASN이지만 $("#txtASN")은 텍스트 상자의 dom 요소를 가져올 수 없습니다. 그 이유는 소스 코드를 확인한 후 컨트롤이 패널에 배치된 경우 컨트롤 ID가 변경된 것으로 나타났기 때문입니다. 또는 마스터, 생성된 html 컨트롤 입력 ID는 pnlBaseInfo_txtASN
과 같이 변경됩니다. 솔루션: $("[id$=txtASN]"), 의미는 ID가 txtASN

으로 끝나는 dom 요소를 가져오는 것입니다.

-- >완전효과

jquery UI Datepicker 시간 제어 사용 및 문제 해결

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)

위 내용은 이 글의 전체 내용이므로 모든 분들께 도움이 되기를 바랍니다. 학습.