집 > 기사 > 웹 프론트엔드 > JQuery 날짜 플러그인 datepicker_jquery를 사용하는 방법

JQuery 날짜 플러그인 datepicker_jquery를 사용하는 방법

PHP中文网원래의: 2018-05-15 10:05:473352검색

JQuery는 매우 뛰어난 스크립팅 프레임워크로, 풍부한 컨트롤이 사용하기 매우 간단하고 구성이 매우 유연합니다. 다음은 날짜 플러그인 데이터 선택기를 사용하는 예입니다.

1. 말할 필요도 없이 jQuery 코어 파일을 다운로드하세요. Datepicker는 jQuery의 min 버전만 있으면 됩니다. 그런 다음 공식 웹사이트 http://jqueryui로 이동하세요. com/downloaddatepicker 지원이 포함된 jquery-ui 압축 패키지(원하는 테마 선택 가능)를 다운로드하세요. 물론 ui.core.js 및 ui.datepicker.js를 포함한 datepicker도 다운로드할 수 있습니다.

2. HTML에서 다운로드한 js 파일을 참조합니다.

<!-- 引入 jQuery --> 
<mce:script src="js/jquery.1.4.2.js" mce_src="js/jquery-1.5.1.min.js" type="text/javascript"></mce:script> 
<!--添加datepicker支持--> 
<mce:script src="js/jquery.ui.core.js" mce_src="js/jquery.ui.core.js" type="text/javascript"></mce:script> 
<mce:script src="js/jquery.ui.datepicker.js" mce_src="js/jquery.ui.datepicker.js" type="text/javascript">
</mce:script>

3. ui 압축 패키지에 있는 기본 스타일 시트 파일을 HTML에 도입합니다. 공식 홈페이지에서 다운로드하시면 홈페이지에서 본 CSS 파일을 다운로드 받으실 수 있으며, 다른 스킨에 대해서는 CSS를 선택하실 수도 있습니다.

 
<!--引入样式css--> 
k type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.13.custom.css" 
mce_href="css/jquery-ui-1.7.3.custom.css" />

4. HTML에 텍스트 필드를 삽입하고 형식 혼동을 방지하려면 읽기 전용으로 설정하는 것이 가장 좋습니다.

<input type="text" id="selectDate" readonly="readonly"/>

5. 최종 효과를 얻으려면 js 코드를 작성하세요.

$(document).ready(function() {   
   $(&#39;#selectDate&#39;).datepicker();   
 });

효과는 다음과 같습니다.

JQuery 날짜 플러그인 datepicker_jquery를 사용하는 방법

여기서 기본적인 날짜 컨트롤도 중국어로 표시하고 날짜를 제한해야 합니다. 선택 범위. 수요를 기다리고 js 코드를 약간 수정합니다.

<mce:script type="text/javascript"><!-- 
  //等待dom元素加载完毕. 
    $(function(){ 
      $("#selectDate").datepicker({//添加日期选择功能 
      numberOfMonths:1,//显示几个月 
      showButtonPanel:true,//是否显示按钮面板 
      dateFormat: &#39;yy-mm-dd&#39;,//日期格式 
      clearText:"清除",//清除日期的按钮名称 
      closeText:"关闭",//关闭选择框的按钮名称 
      yearSuffix: &#39;年&#39;, //年的后缀 
      showMonthAfterYear:true,//是否把月放在年的后面 
      defaultDate:&#39;2011-03-10&#39;,//默认日期 
      minDate:&#39;2011-03-05&#39;,//最小日期 
      maxDate:&#39;2011-03-20&#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;], 
      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;], 
      onSelect: function(selectedDate) {//选择日期后执行的操作 
        alert(selectedDate); 
      } 
      }); 
    }); 
    
// --></mce:script>

효과는 다음과 같습니다.

JQuery 날짜 플러그인 datepicker_jquery를 사용하는 방법

이것은 기본적으로 우리의 요구 사항을 충족합니다. datepicker 컨트롤은 기본적으로 영어로 되어 있습니다. datepicker 구성 시 MonthNames 및 dayNames 속성을 통해 월 및 일의 중국어 표시 값을 지정할 수 있지만 이러한 속성을 사용할 때마다 구성하는 것은 너무 번거롭습니다. js 파일을 추가하여 중국어 값을 모두 넣어서 매번 직접 인용하면 됩니다. 여기에 내용은 다음과 같습니다. >

jQuery(function($){ 
  $.datepicker.regional[&#39;zh-CN&#39;] = { 
    closeText: &#39;关闭&#39;, 
    prevText: &#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;]); 
});

6. 페이지에 중국어 플러그인을 도입합니다

<!-- 添加中文支持-->
  <mce:script src="js/jquery.ui.datepicker-zh-CN.js" mce_src="js/jquery.ui.datepicker-zh-CN.js" 
  type="text/javascript"></mce:script>

전체 페이지 코드는 다음과 같습니다.

 
 
  
  
 日期控件datepicker 
    
  
   
  
  
   
  
   
  
  
  
   
  
  <!-- 添加中文支持-->
  <mce:script src="js/jquery.ui.datepicker-zh-CN.js" mce_src="js/jquery.ui.datepicker-zh-CN.js" 
  type="text/javascript"></mce:script> 
  
   
  
  
 <input type="text" id="selectDate" readonly="readonly"/>

참고: ui.core부터 jquery datepicker 홈페이지의 .js, ui.datepicker.js가 최신 버전이 아니므로 jquery 새 버전을 다운로드할 경우 -ui-1.8.13의 CSS 파일로 인해 날짜 제어가 표시되지 않으므로 여기에는 1.7.3의 UI가 사용됩니다. 더 간단한 방법은 jquery-ui를 사용하여 js를 압축하는 것입니다.

위 내용은 이 글의 전체 내용입니다. JQuery 날짜 플러그인 datepicker에 대해 자세히 설명하겠습니다. 더 많은 관련 내용은 PHP 중국어 웹사이트(www.php.cn)를 참고하세요. )!

php jquery css html JS 样式表 http ui

성명：

이전 기사：Webpack은 AngularJS_AngularJS의 지연 로딩을 구현합니다.다음 기사：Webpack은 AngularJS_AngularJS의 지연 로딩을 구현합니다.

JQuery 날짜 플러그인 datepicker_jquery를 사용하는 방법

관련 기사