誰もが jQuery で日付ピッカーを実装する方法を知っていますか?この記事では、参考値の高いjqueryでの日付ピッカーの実装手順と書き方を中心に紹介します。この記事を読んだ後、エディターと一緒に見てみましょう。独自の日付ピッカーを実装できることを願っています。
jquery を使用して日付と時刻のセレクターを作成します。実装するにはブートストラップ ポップアップ ウィンドウ
を使用するのが最適です。
(1) テキスト ボックスのポップアップ ウィンドウをクリックします
(2)ポップアップウィンドウの日時選択ドロップダウン
(3) 年は現在の年の前後5年です
(4) 月は12ヶ月に固定されています
(5) 日数年と月の変化に応じて変化します
(6) [OK] をクリックしてポップアップ ウィンドウを閉じ、テキスト ボックスに時間をプログラムします 時間を選択します
1. jQuery とブートストラップのポップアップ ウィンドウの場合、ファイル パッケージを導入する必要があります。
2. テキスト ボックスを作成し、イベントを書き込むための ID を指定します。
4. ブートストラップに移動してモーダル ボックスを見つけ、コピーして貼り付けます。モーダル ボックス内の不要なものを削除し、3 つのドロップダウン ボックスを追加します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="dist/js/jquery-1.11.2.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<link href="dist/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css" />
</head>
<body>
<!--文本框-->
<input type="text" id="rq"/>
<!--模态框-->
<p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<p class="modal-dialog">
<p class="modal-content">
<p class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">日期</h4>
</p>
<p class="modal-body">
<!-- 内容-->
<!-- 三个下拉框-->
<select id="nian"></select>年
<select id="yue"></select>月
<select id="ri"></select>日
</p>
<p class="modal-footer">
<!--确定按钮加上事件，用来写点击事件-->
<button type="button" class="btn btn-primary" id="queding">确定</button>
</p>
</p><!-- /.modal-content -->
</p><!-- /.modal -->
</p>
</body>
</html> ログイン後にコピー
ホームページ上のすべてが完了しました。js コードを書きましょう。js コードは script タグに記述できますが、わかりやすくするために将来の利便性と実用性を考慮して、新しい js ファイルを作成します:
5. まずテキスト ボックスに現在時刻を表示させます:
そして、次のように書きます:
//文本框内显示当前时间：
// 准备好：
$(document).ready(function(e){
// 来获取时间：
var date = new Date();
//获取年
var nian = date.getFullYear();
//获取月，记得加1
var yue = date.getMonth()+1;
//获取天：
var tian = date.getDate();
//打印，拼接字符串
$("#rq").val(nian+"-"+yue+"-"+tian);
}); ログイン後にコピー
メイン ページで引用することを忘れないでください。画像を見てください:
6. テキスト ボックスのクリック イベントを記述して、テキスト ボックスをクリックしたときにモーダル ボックスをポップアップさせましょう:
//文本框点击事件：
$("#rq").click(function(){
// 手动打开模态框的方法：找到模态框的id，根据Bookstrap里面的方法
$('#myModal').modal('show');
// 执行三个方法
fnian();
fyue();
ftian();
}) ログイン後にコピー
テキスト ボックスをクリックすると次のようになります。写真を見てください:
7 .彼に何かを送信する必要があるため、確認のためにクリックしたイベントは追加しないでください。最初に 3 つのメソッドを書きましょう:
// 写方法，
//加载年份的方法
function Fnian()
{
//先来取当前年份
var date = new Date();
var nian = date.getFullYear();
// 定义个变量来接收：
var str = "";
//for循环走起：
for(var i=nian-5;i<nian+6;i++)
{
//判断若是当前年份，设为value
if(i==nian)
{
str = str + "<option selected='selected' value='" + i + "'>" + i + "</option>";
}
else
{
//若不是，正常显示
str = str +"<option value='"+i+"'>"+i+"</option>";
}
}
$("#nian").html(str);
}
//加载月份的方法：
function Fyue()
{
var date = new Date();
//获取月，记得加1
var yue = date.getMonth()+1;
//先取当前月份：
var date = new Date();
var yue = data.getMonth()+1;
// 定义个变量来接收：
var str = "";
// for循环走
for(var i=1;i<13;i++)
{
//判断若是当前月份，设为value
if(i==yue)
{
str = str+"<option selected='selected' value='"+i+"'>"+i+"</option>";
}
else
{
//若不是，正常显示
str = str +"<option value='"+i+"'>"+i+"</option>";
}
}
$("#yue").html(str);
// document.getElementById("yue").innerHTML=str;
}
//加载天的方法
function Ftian()
{
//获取当天；
var date = new Date();
var tian = date.getDate();
//把月份与年份取过来,用于判断：
var nian = $("#nian").val();
var yue = $("#yue").val();
//设一个总数，判断完成后更改他就好
var zs = 31;
//判断来了！
if(yue==4||yue==6||yue==9||yue==11)
{
//若是4.6.9.11月，每月三十天
zs = 30;
}
else if(yue==2)
{
//若是2月，再判断，是否为闰年
if((nian%4==0 && nian%100!=0) || nian%400==0 )
{
//若是闰年，2月29天
zs = 29;
}
else
{
//否则2月为28天
zs = 28;
}
}
// for循环搞起
// 定义个变量来接收：
var str = "";
//for循环走起：
for(i=1;i<zs+1;i++)
{
//判断若是当天，设为value
if(i==tian)
{
str = str + "<option selected='selected' value='" + i + "'>" + i + "</option>";
}
else
{
//若不是，正常显示
str = str +"<option value='"+i+"'>"+i+"</option>";
}
}
$("#tian").html(str);
} ログイン後にコピー
わかりました。年、月、日を読み込むためのメソッドが記述され、上記が実行されました
下の図を見てください:
8. 次に、OK ボタンのクリックイベントを記述します。モーダルボックスに OK ボタンを追加します。 ID に移動します
OK
ID を設定したら、イベントを書き込みます:
//最后给确定按钮加点击事件
$("#queding").click(function(){
var nian = $("#nian").val();
var yue = $("#yue").val();
var tian = $("#tian").val();
$("#rq").val(nian+"-"+yue+"-"+tian);
$('#myModal').modal('hide');
}) ログイン後にコピー
クリックしてモーダル ボックスを閉じ、データを渡します。
完成図:
[OK] をクリックします:
皆さんは学びましたか?急いで試してみてください。
関連する推奨事項:
jQuery UI Datepicker Datepicker の詳細な説明
WeChat アプレット用の日付ピッカーを開発する方法
jQuery date picker_jquery の詳細な分析
以上がjqueryを使用した日付ピッカーの作成に関するチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
コード: 
テキスト ボックスをクリックすると次のようになります。写真を見てください:
7 .彼に何かを送信する必要があるため、確認のためにクリックしたイベントは追加しないでください。最初に 3 つのメソッドを書きましょう:
わかりました。年、月、日を読み込むためのメソッドが記述され、上記が実行されました 
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
