跟上我的脚步，让我们来领略代码的世界！

使用jquery做一个日期时间选择器，最好使用bootstrap弹窗

实现：

（1）点击文本框弹出窗口；

（2）弹窗里面显示日期时间选择下拉

（3）年份取当前年份前后五年

（4）月份固定12个月

（5）天数根据年份与月份的变化而变化

（6）点击确定，关闭弹窗，文本框里面的时间编程选中时间

1.若是jQuery跟bootstrap弹窗，必须引入文件包；

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');

    })

点击关闭模态框，并传去数据；

完成图：

点击确定：

jquery写日期选择器的更多相关文章

  1. jQuery UI 日期选择器（Datepicker）

    设置JqueryUI DatePicker默认语言为中文 <!doctype html><html lang="en"> <head> < ...

  2. jQuery cxCalendar 日期选择器

    简介 cxCalendar 是基于 jQuery 的日期选择器插件. 它灵活自由,你可以自定义外观,日期的范围,返回的格式等. 版本: jQuery v1.7+ jQuery cxCalendar v ...

  3. js 写日期选择器

    <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="con ...

  4. jquery双日历日期选择器bootstrap-daterangepicker日历插件

    这个插件既可以作为双日历也可以作为单日历插件(jquery的插件在jquery插件库中http://www.jq22.com/下载很方便,在CSDN下载真麻烦) 引用 <meta http-eq ...

  5. (网页)jQuery UI 实例 - 日期选择器（Datepicker）

    默认功能 日期选择器(Datepicker)绑定到一个标准的表单 input 字段上.把焦点移到 input 上(点击或者使用 tab 键),在一个小的覆盖层上打开一个交互日历.选择一个日期,点击页面 ...

  6. 用Jquery做一个时间日期选择器

    今天我们就用Jquery做一个时间日期选择器,当打开网页时,文本框里面显示的是当前的日期,点击文本框可以出现年.月.日的下拉菜单,并且可以选择,会根据年份的选择判断是否是闰年,从而改变二月的天数,闰年 ...

  7. jquery.datepair日期时分秒选择器

    jquery.datepair是一个轻量级的jQuery插件,智能选择日期和时间范围,灵感来自于谷歌日历.Datepair将保持开始和结束日期/时间同步,并可以根据用户的操作设置默认值.该插件不提供任 ...

  8. 日期选择器：jquery datepicker的使用

    helloweba.com 作者:月光光 时间:2012-04-08 21:05 标签: jquery  datepicker  jquery ui     在jquery ui中,提供了一个非常实用 ...

  9. jquery ui 常用（一）（自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| ）

    条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...

随机推荐

  1. React快速入门教程

    简介 Facebook官网介绍:React 是一个用来构建用户界面的 JavaScript 库.相当于 MVC 架构的 V 层. React 的核心思想是:封装组件,各个组件维护自己的状态和UI,当状 ...

  2. Docker环境中部署OwnCloud 9.0

    整体思路: 1.官方获取mysql.php+apache镜像: 2.基于php+apache,创建OwnCloud镜像: 3.启动mysql镜像: 4.启动OwnCloud镜像,链接mysql镜像,访 ...

  3. 基于Casperjs的网页抓取技术【抓取豆瓣信息网络爬虫实战示例】

    CasperJS is a navigation scripting & testing utility for the PhantomJS (WebKit) and SlimerJS (Ge ...

  4. tbl.js div实现的表格控件,完全免费,no jquery

    html上现在有比较好用的表格控件是datatable,但是编辑.按钮等部分是收费的,只有基础功能免费.而且尺寸发生变化时需要手工刷新等繁琐操作较多.所以我开发一个免费的供大家使用. 本项目已用于“虚 ...

  5. KB奇遇记(8)：好人难做

    题记:<KB奇遇记>已经更新到第八篇了.这一篇主要是讲项目实施过程中项目组成员之间的关系,也是我最不愿意回忆和讲述的事情. 早在来到KB公司的第一天开始,我就一直兢兢业业,丝毫不敢怠慢.面 ...

  6. SQL Server 安装报错找不到vc_red.msi

    问题描述: 今天给 WIN 7 SP1 操作系统安装 SQL Server 2014 ,报错找不到vc_red.msi   (图片来源网络,请忽略2012字样..)   问题解决: 1.由于安装程序提 ...

  7. asp.net core mvc权限控制：在视图中控制操作权限

    在asp.net core mvc中提供了权限验证框架,前面的文章中已经介绍了如何进行权限控制配置,权限配置好后,权限验证逻辑自动就会执行,但是在某些情况下,我们可能需要在代码里或者视图中通过手工方式 ...

  8. .NET跨平台之旅：博问站点迁移至ASP.NET Core on Linux并发布上线

    Powered by ASP.NET Core on Linux! 我们全站的 .NET Core 迁移工作如火如荼,这是我们今年上半年的重要工作. 今天我们终于完成了博问产品(q.cnblogs.c ...

  9. iOS 图形编程总结

    iOS实现图形编程可以使用三种API(UIKIT.Core Graphics.OpenGL ES及GLKit). 这些api包含的绘制操作都在一个图形环境中进行绘制.一个图形环境包含绘制参数和所有的绘 ...

  10. Synchronize执行过程

    Synchronize执行过程及原理 在windows原生应用程序开发中,经常伴随多线程的使用,多线程开发很简单,难点就是在于线程的同步,在Delphi中提供了VC中不具备的一个过程Synchroni ...