效果：

html:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

        <title>时间选择器</title>

        <script type="text/javascript" src="js/jquery.js"></script>

        <script src="js/WdatePicker.js"></script>

        <style>

            input{

                width:20%;

                height:30px;

                margin-top:10px;

                padding-left:10px;

                background:none;

                outline:none;

                border:1px solid gray;

            }

            span{

                display:inline-block;

                width:15%;

            }

        </style>

    </head>

    <body>

        <div>

            <div>

                <label>日期选择:</label>

                <div>

                    <input type="text" placeholder="开始日期" id="start_time" onfocus="WdatePicker({dateFmt: 'yyyy-MM-dd',onpicked:start_change,oncleared:clear_start,maxDate:'#F{$dp.$D(\'end_time\',{d:0});}'});" />

                    &nbsp;至&nbsp;

                    <input type="text" placeholder="截止日期" id="end_time" onfocus="WdatePicker({dateFmt: 'yyyy-MM-dd',onpicked:end_change,oncleared:clear_end,minDate:'#F{$dp.$D(\'start_time\',{d:0});}'});" />

                </div>

                <p>开始日期：<span style="margin-right:60px;" id="start">暂未选择</span>结束日期：<span id="end">暂未选择</span></p>

            </div>

        </div>

        <script type="text/javascript">

            function start_change() { //选中

                var startT = $dp.cal.getNewDateStr();

                $('#start').html(startT);

            }

            function clear_start() { //清空

                $('#start').html('暂未选择');

            }

            function end_change() {

                var endT = $dp.cal.getNewDateStr();

                $('#end').html(endT);

            }

            function clear_end() {

                $('#end').html('暂未选择');

            }

        </script>

    </body>

</html>

wdatapicker 时间选择器——例的更多相关文章

  1. 微信小程序中利用时间选择器和js无计算实现定时器（将字符串或秒数转换成倒计时）

    转载注明出处 改成了一个单独的js文件,并修改代码增加了通用性,点击这里查看 今天写小程序,有一个需求就是用户选择时间,然后我这边就要开始倒计时. 因为小程序的限制,所以直接选用时间选择器作为选择定时 ...

  2. 移动端lCalendar纯原生js日期时间选择器

    网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错 ...

  3. ClockPicker – 时钟风格 Bootstrap 时间选择器

    ClockPicker 是国内前端开发者发布的一个时钟样式 Timepicker,可以用于 Bootstrap 和 jQuery.所有主流浏览器都支持,包括 IE9+,支持移动设备,能够在触摸屏设备很 ...

  4. Android课程---日历选择器和时间选择器

    package com.hanqi.test5; import android.os.Bundle; import android.support.annotation.IdRes; import a ...

  5. 分享一下我封装iOS自定义控件的体会，附上三个好用的控件Demo <时间选择器&多行输入框&日期选择器>

    前段时间有小伙伴问到我:"这样的控件该怎么做呢?",我感觉是个比较简单的控件,可能对于入行不久的同志思路没有很清晰吧.趁着最近工作不忙,就来这里分享一下我封装自定义控件的几点体会吧 ...

  6. bootstrap 时间选择器 datetime

    $("'#datetimepicker").datetimepicker({ format: "yyyy-mm-dd hh:ii:ss",//设置时间格式,默认 ...

  7. 移动端material风格日期时间选择器

    原文 好多时候在移动端需要一个的日期选择器,由于在应用上有可能应用各种框架库(Vue.js, React.js, zepto.js等):所以说一个无依赖的,这样易于上层进行封装.直接开门见山,先来张动 ...

  8. Android日期时间选择器实现以及自定义大小

    本文主要讲两个内容:1.如何将DatePicker和TimePicker放在一个dialog里面:2.改变他们的宽度: 问题1:其实现思路就是自定义一个Dialog,然后往里面同时放入DatePick ...

  9. php时间选择器亲测可以自己修改

    由于前端的离职  造成我需要自己去做后台页面   所以有一个要填写生日的我就用了这个时间选择器 <?php /** * Created by PhpStorm. * User: Administ ...

随机推荐

  1. 【优化】EXPLAIN--type

    EXPLAIN执行计划中type字段分为以下几种: ALL INDEX RANGE REF EQ_REF CONST,SYSTEM NULL 自上而下,性能从最差到最好 type = ALL,全表扫描 ...

  2. CF 398 E（动态规划）

    传送门: http://codeforces.com/problemset/problem/398/E 题解: 首先答案不超过2. 最长环=1时,ans=0 最长环=2时,ans=1 否则,ans=2 ...

  3. JavaWeb学习篇之----容器Request详解

    前篇说到了Response容器对象,这篇我们就来看一下Request容器对象,之前也说过了,这个两个容器对象是相对应的,每次用户请求服务器的时候web容器就会给创建这对容器对象,他们是共存亡的,当然R ...

  4. 二分图hall定理应用+二分+双指针——cf981F(好题)

    /* 二分答案,判mid是否合法 如何判断:如果是在直线上,那么遍历匹配即可 现在在环上,即既可以向前匹配也可以向后匹配,那么将环拆开,扩展成三倍 显然a和b的匹配边是不可能交叉的,因为交叉必定没有不 ...

  5. NX二次开发-NXString转换为char*方法

    NX9+VS2012 #include <uf.h> #include <uf_drf.h> #include <NXOpen/Annotations_Note.hxx& ...

  6. DZY LOVES MATH （莫比乌斯反演）

    OK!开始更新莫比乌斯反演 先看了一下数据范围,嗯,根据\(jiry\)老师的真言,我们一定是可以筛一遍然后用根号或者是\(log\)的算法. 题目思路挺简单,就是把原始的式子化成: \(\sum_{ ...

  7. hdu4126_hdu4756_求最小生成树的最佳替换边_Kruskal and Prim

    目录 Catalog Solution: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 Catalog Problem:  Portal: hdu4126 hdu4756  原题目 ...

  8. Keystone controller.py & routers.py代码解析

    目录 目录 Keystone WSGI 实现 controllerspy routerspy 参考文档 Keystone WSGI 实现 Keystone 项目把每个功能都分到单独的目录下,EXAMP ...

  9. Spark 自定义函数（udf,udaf）

    Spark 版本 2.3 文中测试数据(json) {"name":"lillcol", "age":24,"ip":& ...

  10. Tomcat调优详解

    前言 在这里告诫一下那些感觉自己啥都会的朋友们,其实你会的可能只是皮毛,不要感觉这个东西以前已经做过了,就不想去做了 其实你还远没有达到精通的地步,遇到以前做过的东西,也要用心的再去做一遍,你可能会从 ...