ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery UI DatePickerを使用して月と年だけを表示するにはどうすればよいですか?
jQuery UI DatePickerを使用して月と年だけを表示するにはどうすればよいですか?
- Patricia Arquetteオリジナル
- 2024-11-30 20:51:18357ブラウズ
jQuery UI DatePicker を使用した月と年の表示
jQuery UI DatePicker コンポーネントは、Web アプリケーションでカレンダーを表示するための多用途ツールです。ただし、カレンダー グリッドを省略して、月と年のみを表示することが望ましい場合もあります。これは、賢い回避策で実現できます。
「月、年のみ」表示の作成
次のコード スニペットは、解決策を提供します。
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
});
このスクリプトは、特定の日付ピッカーを構成します設定:
- changeMonth および changeyear: 月と年の変更を有効にします。
- showButtonPanel: ボタンを表示します。月と年のパネルナビゲーション。
- dateFormat: 月と年のみ「MM yy」として希望の形式を指定します。
- onClose: ピッカーを閉じるときに、選択した日付を選択した月の 1 日に設定し、 year.
カレンダー グリッドの非表示
カレンダー グリッドを非表示にするには、次の CSS ルールを追加します:
.ui-datepicker-calendar {
display: none;
}
完全な HTML 例
これは、必要なすべての要素を含む HTML ファイル:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date : < /label>
<input name="startDate">
この改訂されたソリューションでは、ユーザーがカレンダー グリッドを表示せずに月と年を選択できるユーザー インターフェイスが提供されます。
以上がjQuery UI DatePickerを使用して月と年だけを表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。