jquery-uiの日付プラグインの使用
4743 ワード
HTMLは
readonlyプロパティを設定すると、入力ボックスは書き込み不可になります.
必要なjsファイルとcssファイルを導入
中国語を使用する場合は、以下のjsファイルを導入します.
ページのロード後にプラグインを初期化する必要があります
開始時間を今日から制限するには、昨日以前のものは選択できません.初期化後も追加できます.
時間分秒のタイムプラグインのみを使用するには、次のjsファイルとcssファイルを導入する必要があります.
未完、追加を続行...
<input type="text" id="starttime" readonly />
<input type="text" id="endtime" readonly />
readonlyプロパティを設定すると、入力ボックスは書き込み不可になります.
必要なjsファイルとcssファイルを導入
<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
中国語を使用する場合は、以下のjsファイルを導入します.
<script type="text/javascript" src="datepicker_cn.js"></script>
ページのロード後にプラグインを初期化する必要があります
1 $(function(){
2 /*
3 *
4 */
5 $('#starttime').datepicker({
6 onSelect : function(dateText, inst) {
7 $("#endtime").datepicker("option", "minDate", dateText);
8 },
9 showButtonPanel : true,
10 inline : true
11 });
12
13 $('#endtime').datepicker({
14 onSelect : function(dateText, inst) {
15 $("#starttime").datepicker("option", "maxDate", dateText);
16 },
17 showButtonPanel : true,
18 inline : true
19 });
20 });
開始時間を今日から制限するには、昨日以前のものは選択できません.初期化後も追加できます.
1 //
2 $('#txtbegintime').datepicker('option', 'minDate', '0');
時間分秒のタイムプラグインのみを使用するには、次のjsファイルとcssファイルを導入する必要があります.
<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-zh-CN.js"></script> //
1 $(function(){
2 $("#starttime").timepicker();
3 $(".timeinput").timepicker();
4 });
//
未完、追加を続行...