jquery寫日期選擇器

時間 2019-11-16

標籤 jquery 日期選擇器欄目 JQuery 简体版

原文原文鏈接

跟上個人腳步，讓咱們來領略代碼的世界！php

使用jquery作一個日期時間選擇器，最好使用bootstrap彈窗css

實現：html

（1）點擊文本框彈出窗口；jquery

（2）彈窗裏面顯示日期時間選擇下拉編程

（3）年份取當前年份先後五年bootstrap

（4）月份固定12個月ide

（5）天數根據年份與月份的變化而變化ui

（6）點擊肯定，關閉彈窗，文本框裏面的時間編程選中時間spa

1.如果jQuery跟bootstrap彈窗，必須引入文件包；3d

2.寫一個文本框，給他id用來寫事件；

3.去bootstrap裏面找到模態框，複製，黏上就好了；

4.把模態框裏沒用的東西去掉，並加上三個下拉框；

代碼：

<!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="stylesheet" type="text/css" />
</head>

<body>
<!--文本框-->
<input type="text" id="rq"/>

<!--模態框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">日期</h4>
            </div>
            <div class="modal-body">
                <!--                內容-->
                <!--                三個下拉框-->
                <select id="nian"></select>年
                <select id="yue"></select>月
                <select id="ri"></select>日
            </div>
            <div class="modal-footer">

                <!--肯定按鈕加上事件，用來寫點擊事件-->
                <button type="button" class="btn btn-primary" id="queding">肯定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

</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.點擊肯定的事件先不要加，由於還要傳給他東西，先來寫那三個方法吧：

// 寫方法，
//加載年份的方法
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.再來寫肯定按鈕的點擊事件：

先給模態框裏面的肯定按鈕添加上id吧

                <button type="button" class="btn btn-primary" id="queding">肯定</button>

設置好了id，去寫事件：

//最後給肯定按鈕加點擊事件
    $("#queding").click(function(){
        var nian = $("#nian").val();
        var yue = $("#yue").val();
        var tian = $("#tian").val();

        $("#rq").val(nian+"-"+yue+"-"+tian);
        $('#myModal').modal('hide');
    })