웹 프론트엔드 JS 튜토리얼 jQuery 날짜 선택기_jquery에 대한 심층 분석

jQuery 날짜 선택기_jquery에 대한 심층 분석

May 16, 2016 pm 05:31 PM
jquery 날짜 선택자

1: 기본적으로 날짜 입력 텍스트 상자가 페이지 포커스를 받으면 날짜 선택기 구성 요소는 날짜 입력 텍스트가 있을 때 오버레이 에서 달력 선택 패널을 엽니다. box 상자가 초점을 잃거나 날짜를 선택하면 달력 선택 패널이 자동으로 닫힙니다.
$(selector).datepicker([options]);
간단한 예:

코드 복사 코드는 다음과 같습니다.


< ;html xmlns="http ://www.w3.org/1999/xhtml">

DatePicker 로컬


<스크립트 유형 ="text/javascript" src="JS/jquery.ui.core.js">

< style>
*{font-size:12px; }



날짜를 입력하세요.
< input type="text" id="inputDate" />



렌더링:


2: 팝업 날짜 선택기의 그림 버튼 지정
응답 리소스 파일 추가 필요:
코드 복사 코드는 다음과 같습니다.

$(document).ready(function() {
$("#datepicker" ).datepicker({
showOn: "button",
buttonImage: "Images/calendar.gif",
buttonImageOnly: true
});
});

코드 복사 코드는 다음과 같습니다.





DatePickerIcon







请选择一个日期:



效果图:
  

3:显示带年,月份下拉列表및按钮板적日期选择器
复代代码 代码如下:




< ;meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
DatePicker Local





<스타일>
*{ 글꼴 크기:12px; }



请输入一个日期:



效果图:
  
4:同时显示多个月份的日期选择器
复主代码 代码如下:





DatePickerButton







날짜를 선택하세요:



렌더링:


5: 날짜 선택기의 일부 방법
dialog, isDisabled, hide, show, Refresh, getDate, setDate
코드 복사 코드는 다음과 같습니다.





DatePicker 대화 상자</ 제목> <br><link rel="stylesheet" type="text/css" href="themes/ui-lightness/jquery.ui.all.css"/><br><script type="text /javascript " src="JS/jquery-1.4.2.min.js"></script><br><script type="text/javascript" src="JS/jquery.ui.core.js "> ;</script><br><script type="text/javascript" src="JS/jquery.ui.datepicker.js"></script><br><script type=" text/ javascript"><br>$(document).ready(function(){<br> $("#inputDate").datepicker(); <br> $("#showDialog").click(function( ){ <br> $("#inputDate").datepicker("dialog","",function(dateText, inst){<br> $("#inputDate").val(dateText);<br> }) ;<br> });<br>});<br></script><br><style><br>*{ 글꼴 크기:12px }<br></style><br>< ;/head><br><body><br>날짜를 입력하세요: <br><input type="text" id="inputDate" /><br><button id="showDialog "> ;표시</button><br></body><br></html><br> </div> <br><strong>렌더링: <br></strong> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201306/2013061916185926.png" class="lazy" alt=""><br> <br><strong><font style="max-width:90%">6: 날짜 선택기의 일부 이벤트<br></font></strong>6.1 beforeShow 이벤트: 이 이벤트는 날짜 선택기가 표시되기 전에 트리거됩니다. <br>6.2 beforeShowDay 이벤트: 이 이벤트는 날짜 선택기 함수에서 각 날짜가 선택되기 전에 트리거됩니다(date). {}<br>6.3 onChangeMonthYear: 이 이벤트는 날짜 선택기가 새로운 연도 또는 월 함수를 선택할 때 트리거됩니다( year , Month, inst);<br>6.4 onClose 이벤트: 이 이벤트는 날짜 선택 컨트롤이 닫힐 때 트리거됩니다. function(dataText, inst) {}<br>6.5 onSelect 이벤트: 이 이벤트는 날짜 선택기가 날짜를 선택할 때 트리거됩니다. function(dataText, inst) {} //dataText는 선택한 날짜의 문자열이고 inst는 날짜 선택기 인스턴스입니다<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="29229" class="copybut" id="copybut29229" onclick="doCopy('code29229')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다. </div> <div class="codebody" id="code29229"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><br><html xmlns="http://www.w3.org/1999/xhtml"><br><head><br><meta http-equiv="Content-Type" 콘텐츠 ="text/html; charset=gb2312" /><br><title>DatePicker 대화상자















效果图:

  

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

웨이보에서 이전 웨이보를 날짜별로 검색하는 방법_웨이보에서 이전 웨이보를 날짜별로 검색하는 방법 웨이보에서 이전 웨이보를 날짜별로 검색하는 방법_웨이보에서 이전 웨이보를 날짜별로 검색하는 방법 Mar 30, 2024 pm 07:26 PM

1. 먼저 모바일 웹브라우저를 열고, 웨이보 웹버전을 검색한 후, 입장 후 좌측 상단의 아바타 버튼을 클릭하세요. 2. 그런 다음 오른쪽 상단에 있는 설정을 클릭하세요. 3. 설정에서 버전 전환 옵션을 클릭하세요. 4. 그런 다음 버전 스위치에서 컬러 버전 옵션을 선택합니다. 5. 검색을 클릭하여 검색 페이지로 들어갑니다. 6. 키워드를 입력한 후 사람찾기를 클릭하세요. 7. 검색 완료 화면이 나타나면 필터를 클릭하세요. 8. 마지막으로 릴리스 시간 열에 특정 날짜를 입력하고 필터를 클릭합니다.

PPT 유인물에서 인쇄할 때 자동으로 나타나는 날짜를 제거하는 방법 PPT 유인물에서 인쇄할 때 자동으로 나타나는 날짜를 제거하는 방법 Mar 26, 2024 pm 08:16 PM

1. 먼저 제가 처음에 사용했던 방법을 말씀드리자면, 아마 다들 사용하고 계실 텐데요. 먼저 [보기]——]비고 템플릿[. 2. 개봉 후 실제로 날짜를 확인할 수 있는 곳. 3. 먼저 선택 후 삭제하세요. 4. 삭제 후 [마스터 뷰 닫기]를 클릭하세요. 5. 인쇄 미리보기를 다시 열고 날짜가 아직 남아 있는지 확인합니다. 6. 사실 여기서는 이 날짜가 삭제된 것이 아닙니다. [유인물 마스터]에 있어야 합니다. 아래 그림을보세요. 7. 날짜를 찾은 후 삭제하세요. 8. 이제 미리보기를 열어서 살펴보니 날짜가 더 이상 없습니다. 참고: 사실 이 방법도 기억하기 매우 쉽습니다. 인쇄된 유인물은 유인물이기 때문에 [유인물 마스터]를 찾아보셔야 합니다.

Excel에서 날짜를 파운드 기호로 변경하는 방법 Excel에서 날짜를 파운드 기호로 변경하는 방법 Mar 20, 2024 am 11:46 AM

엑셀 소프트웨어에는 매우 강력한 데이터 처리 기능이 있습니다.우리는 종종 엑셀 소프트웨어를 사용하여 다양한 데이터를 처리합니다.엑셀 셀에 날짜를 입력하면 데이터가 정상적으로 표시됩니다. 아래에서 해결 방법을 살펴보겠습니다. 1. 먼저 아래 그림과 같이 AB 열 사이의 열 너비 선에 마우스를 놓고 두 번 클릭하여 열 너비를 조정합니다. 2. 열을 확장한 후 셀에 날짜 대신 숫자가 표시되는 것을 발견했습니다. 이는 확실히 잘못된 것입니다. 그러면 아래 그림과 같이 셀 형식을 확인해야 합니다. 3. 아래 그림과 같이 "홈" 탭에서 "숫자" 옵션을 클릭하고 드롭다운 메뉴에서 "기타 숫자 형식"을 클릭합니다.

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? Feb 28, 2024 pm 03:12 PM

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? jQuery에서 PUT 요청을 보내는 방법은 다른 유형의 요청을 보내는 것과 유사하지만 몇 가지 세부 사항과 매개 변수 설정에 주의해야 합니다. PUT 요청은 일반적으로 데이터베이스의 데이터 업데이트 또는 서버의 파일 업데이트와 같은 리소스를 업데이트하는 데 사용됩니다. 다음은 jQuery에서 PUT 요청 메소드를 사용하는 구체적인 코드 예제입니다. 먼저 jQuery 라이브러리 파일을 포함했는지 확인한 다음 $.ajax({u를 통해 PUT 요청을 보낼 수 있습니다.

jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. Feb 28, 2024 pm 09:06 PM

제목: jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. 웹 개발에서는 페이지의 요소를 수정하고 조작해야 하는 경우가 많습니다. jQuery를 사용할 때 페이지에 있는 모든 태그의 텍스트 내용을 한 번에 수정해야 하는 경우가 있는데, 이는 시간과 에너지를 절약할 수 있습니다. 다음은 jQuery를 사용하여 페이지의 모든 태그 텍스트를 빠르게 수정하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 jQuery 라이브러리 파일을 도입하고 다음 코드가 페이지에 도입되었는지 확인해야 합니다. &lt

jQuery를 사용하여 모든 태그의 텍스트 내용 수정 jQuery를 사용하여 모든 태그의 텍스트 내용 수정 Feb 28, 2024 pm 05:42 PM

제목: jQuery를 사용하여 모든 태그의 텍스트 내용을 수정합니다. jQuery는 DOM 작업을 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. 웹 개발을 하다 보면 페이지에 있는 링크 태그(태그)의 텍스트 내용을 수정해야 하는 경우가 종종 있습니다. 이 기사에서는 jQuery를 사용하여 이 목표를 달성하는 방법을 설명하고 구체적인 코드 예제를 제공합니다. 먼저 페이지에 jQuery 라이브러리를 도입해야 합니다. HTML 파일에 다음 코드를 추가합니다.

Go 언어에서 날짜가 전날인지 확인하는 방법은 무엇입니까? Go 언어에서 날짜가 전날인지 확인하는 방법은 무엇입니까? Mar 24, 2024 am 10:09 AM

질문: Go 언어에서 날짜가 전날인지 어떻게 확인하나요? 일상적인 개발에서 날짜가 전날인지 확인해야 하는 상황에 자주 직면합니다. Go 언어에서는 시간 계산을 통해 이 기능을 구현할 수 있습니다. 다음은 Go 언어에서 날짜가 전날인지 확인하는 방법을 보여주기 위해 특정 코드 예제와 결합됩니다. 먼저 Go 언어로 time 패키지를 가져와야 합니다. 코드는 다음과 같습니다. import("time") 그런 다음 IsYest 함수를 정의합니다.

PHP 날짜 처리 팁: 특정 날짜의 요일을 빠르게 결정 PHP 날짜 처리 팁: 특정 날짜의 요일을 빠르게 결정 Mar 20, 2024 am 08:15 AM

PHP는 웹 개발 분야에서 널리 사용되는 프로그래밍 언어로 날짜를 쉽게 연산하고 계산할 수 있는 풍부한 날짜 처리 기능을 제공합니다. 그 중에서도 특정 날짜의 요일을 빠르게 결정하는 것은 일반적이고 실용적인 요구 사항입니다. 이 기사에서는 PHP에서 함수를 사용하여 특정 날짜의 요일을 빠르게 결정하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. PHP의 날짜 처리 함수 소개 PHP에서 날짜 처리를 위한 주요 함수는 date(), strtotime(), str입니다.

See all articles