ホームページ > 記事 > ウェブフロントエンド > JQuery日付プラグインdatepicker_jqueryの使い方

JQuery日付プラグインdatepicker_jqueryの使い方

PHP中文网オリジナル: 2018-05-15 10:05:473343ブラウズ

JQuery は非常に優れたスクリプトフレームワークであり、その豊富なコントロールは非常に使いやすく、構成は非常に柔軟です。以下は、日付プラグインデータピッカーの使用例です。

1. 言うまでもなく、Datepicker は軽量のプラグインです。次に、公式 Web サイト http://jqueryui にアクセスします。 com/downloaddatepicker のサポートを含む jquery-ui 圧縮パッケージをダウンロードします (好みのテーマを選択できます)。もちろん、ui.core.js と ui.datepicker.js を含む datepicker をダウンロードすることもできます。

2. ダウンロードした js ファイルを HTML で参照します。

<!-- 引入 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"/>

注:新しいバージョンの jquery をダウンロードすると、jquery datepicker ホームページの ui.core.js および ui.datepicker.js が最新バージョンではありません。ui-1.8.13 の CSS ファイルにより、日付コントロールが使用できなくなります。と表示されるので、ここでは1.7.3のuiを使用します。より簡単な方法は、jquery-ui を使用して js を圧縮することです。

上記はこの記事の全内容です。JQuery 日付プラグイン datepicker について詳しく説明します。詳細については、PHP 中国語 Web サイト (www.php.cn) を参照してください。）！

php jquery css html JS 样式表 http ui

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Webpack は AngularJS_AngularJS の遅延読み込みを実装します次の記事：Webpack は AngularJS_AngularJS の遅延読み込みを実装します

続きを見る

JQuery日付プラグインdatepicker_jqueryの使い方

関連記事