Jquery 날짜 제어를 사용하는 방법

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

말할 필요도 없이 jQuery 코어 파일을 다운로드하세요. Datepicker는 경량 플러그인입니다. 그런 다음 공식 웹사이트로 이동하여 jquery-ui 압축 패키지를 다운로드하세요. datepicker에 대한 지원이 포함되어 있습니다. 물론 ui.core.js 및 ui.datepicker.js를 포함하여 공식 웹사이트에서 datepicker를 다운로드할 수도 있습니다.

추천 과정: jQuery Tutorial.

jquery.ui.datepicker-zh-CN.js 내용은 다음과 같습니다.

jQuery(function($){
    $.datepicker.regional['zh-CN'] = {
        closeText: '关闭',
        prevText: '',
        currentText: '今天',
        monthNames: ['一月','二月','三月','四月','五月','六月',
        '七月','八月','九月','十月','十一月','十二月'],
        monthNamesShort: ['一','二','三','四','五','六',
        '七','八','九','十','十一','十二'],
        dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
        dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
        dayNamesMin: ['日','一','二','三','四','五','六'],
        weekHeader: '周',
        dateFormat: 'yy-mm-dd',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: true,
        yearSuffix: '年'};
    $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
});

Instance:

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

 
 <meta>
  <title>日期控件datepicker</title>
    
    <!-- 引入 jQuery -->
    <script></script>

    <!--添加datepicker支持-->
    <script></script>
    <script></script>
    <!-- 或者引入jquery ui包，其中也包含对datepicker的支持
    <mce:script src="js/jquery-ui-1.7.3.custom.min.js" mce_src="js/jquery-ui-1.7.3.custom.min.js" type="text/javascript"></mce:script>
    -->

    <!--引入样式css-->
    <link>

    <!-- 添加中文支持-->
    <script></script>

    <script><!--
    //等待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);
            }
            });
        });
    
// --></script>
 
 
  <input>
 

Note: jquery datepicker는 최신 버전이 아니므로 새 버전의 jquery를 다운로드하면 -ui-1.8.13 의 CSS 파일로 인해 날짜 제어가 표시되지 않게 되므로 여기서는 1.7.3의 UI를 사용합니다. 더 간단한 방법은 jquery-ui를 사용하여 js를 압축하는 것입니다.

위 내용은 Jquery 날짜 제어를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!