wdatapicker 时间选择器——例
效果:
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});}'});" />
至
<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 时间选择器——例的更多相关文章
- 微信小程序中利用时间选择器和js无计算实现定时器(将字符串或秒数转换成倒计时)
转载注明出处 改成了一个单独的js文件,并修改代码增加了通用性,点击这里查看 今天写小程序,有一个需求就是用户选择时间,然后我这边就要开始倒计时. 因为小程序的限制,所以直接选用时间选择器作为选择定时 ...
- 移动端lCalendar纯原生js日期时间选择器
网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错 ...
- ClockPicker – 时钟风格 Bootstrap 时间选择器
ClockPicker 是国内前端开发者发布的一个时钟样式 Timepicker,可以用于 Bootstrap 和 jQuery.所有主流浏览器都支持,包括 IE9+,支持移动设备,能够在触摸屏设备很 ...
- Android课程---日历选择器和时间选择器
package com.hanqi.test5; import android.os.Bundle; import android.support.annotation.IdRes; import a ...
- 分享一下我封装iOS自定义控件的体会,附上三个好用的控件Demo <时间选择器&多行输入框&日期选择器>
前段时间有小伙伴问到我:"这样的控件该怎么做呢?",我感觉是个比较简单的控件,可能对于入行不久的同志思路没有很清晰吧.趁着最近工作不忙,就来这里分享一下我封装自定义控件的几点体会吧 ...
- bootstrap 时间选择器 datetime
$("'#datetimepicker").datetimepicker({ format: "yyyy-mm-dd hh:ii:ss",//设置时间格式,默认 ...
- 移动端material风格日期时间选择器
原文 好多时候在移动端需要一个的日期选择器,由于在应用上有可能应用各种框架库(Vue.js, React.js, zepto.js等):所以说一个无依赖的,这样易于上层进行封装.直接开门见山,先来张动 ...
- Android日期时间选择器实现以及自定义大小
本文主要讲两个内容:1.如何将DatePicker和TimePicker放在一个dialog里面:2.改变他们的宽度: 问题1:其实现思路就是自定义一个Dialog,然后往里面同时放入DatePick ...
- php时间选择器亲测可以自己修改
由于前端的离职 造成我需要自己去做后台页面 所以有一个要填写生日的我就用了这个时间选择器 <?php /** * Created by PhpStorm. * User: Administ ...
随机推荐
- csp-s模拟测试91
csp-s模拟测试91 倒悬吃屎的一套题. $T1$认真(?)分析题意发现复杂度不能带$n$(?),计划直接维护答案,考虑操作对答案的影响,未果.突然发现可以动态开点权值线段树打部分分,后来$Tm$一 ...
- iOS 获取音频或是视频的时间
AVURLAsset* audioAsset =[AVURLAssetURLAssetWithURL:audioFileURL options:nil]; CMTime audioDuration = ...
- mysql复制以及一主多从等常见集群概述
1 复制概述 Mysql内建的复制功能是构建大型,高性能应用程序的基础.将Mysql的数据分布到多个系统上去,这种分布的机制,是通过将Mysql的某一台主机的 数据复制到其它主机(slaves)上,并 ...
- TensorFlow 与cudnn版本不匹配问题
log:Loaded runtime CuDNN library: 7.1.4 but source was compiled with: 7.2.1. 我安装的事cuda 9.0 cudnn 7. ...
- Slow HTTP POST慢速攻击
测试工具 模拟测试工具:slowhttptest https://github.com/shekyan/slowhttptest 安装: https://github.com/shekyan/slow ...
- <读书笔记>001-以解决问题为导向的python编程实践
以解决问题为导向的python编程实践 0.第0章:计算机科学 思考:计算机科学是否为计算机编程的简称? 编程的困难点:1.同时做2件事(编程语言的语法.语义+利用其解决问题) 2.什么是好程序(解 ...
- Codeforces 479【D】div3
题目链接:http://codeforces.com/problemset/problem/977/D 题意:给你一个数字序列,定了一个游戏规则.你可以对当前数字进行两个操作 1./ 3 如果这个数 ...
- ES6 学习 -- Promise对象
1.promise含义:可以将promise对象看成是一个容器,它保存着未来才会结束的某个事件(一般是异步操作事件)的结果,各 种异步操作都可以用promise对象来处理promise的特点:(1)p ...
- 详解redis服务
http://mp.weixin.qq.com/s?__biz=MzIyMDA1MzgyNw==&mid=2651968327&idx=1&sn=6e6cb01d334d7ae ...
- RabbitMQ学习第一记:用java连接RabbitMQ
1.什么是RabbitMQ MQ(Message Queue):消息队列,是服务端设计的一个可以存储大量消息的队列,并提供客户端操作队列的方法:生产队列(向队列中添加数据).消费队列(从队列中取数据) ...