jquery dataTimePicker日历插件(精确到小时)
效果图: 下载地址:https://github.com/WangChangyao/jquery-dataTimePicker.git
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.datetimepicker.js" type="text/javascript" charset="utf-8"></script>
</head>
<body ng-app='app' ng-controller='controller'>
<h2>{{selectTime}}</h2>
<input type="text" id="datetimepicker" /><br><br>
<script type="text/javascript">
angular.module('app',[]).controller('controller',function($scope){
$('#datetimepicker').datetimepicker({
lang:'ch',
format:'Y-m-d H:00:00', //可固定秒的时间,如"Y-m-d H:00:10"
onChangeDateTime:function(data,mon,dd){ //时间发生改变回调的方法
$scope.$apply(function(){
$scope.selectTime=mon[0].value;
});
}, });
}); </script>
</body>
</html>
打开js文件的源码可以看到更多的设置属性与回调函数:
value:'',
lang:'en',
format:'Y/m/d H:i',
formatTime:'H:i',
formatDate:'Y/m/d',
step:60,
closeOnDateSelect:0,
closeOnWithoutClick:true,
timepicker:true,
datepicker:true,
minDate:false,
maxDate:false,
minTime:false,
maxTime:false,
allowTimes:[],
opened:false,
inline:false,
onSelectDate:function() {},
onSelectTime:function() {},
onChangeMonth:function() {},
onChangeDateTime:function() {},
onShow:function() {},
onClose:function() {},
onGenerate:function() {},
withoutCopyright:true,
inverseButton:false,
hours12:false,
next: 'xdsoft_next',
prev : 'xdsoft_prev',
dayOfWeekStart:0,
timeHeightInTimePicker:25,
timepickerScrollbar:true,
todayButton:true, // 2.1.0
defaultSelect:true, // 2.1.0
scrollMonth:true,
scrollTime:true,
scrollInput:true,
mask:false,
validateOnBlur:true,
allowBlank:false,
yearStart:1950,
yearEnd:2050,
style:'',
id:'',
roundTime:'round', // ceil, floor
className:'',
weekends : [],
yearOffset:0
jquery dataTimePicker日历插件(精确到小时)的更多相关文章
- 一款简洁大气的jquery日期日历插件
本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址:http://keleyi.com/a/bjad/em ...
- 基于jQuery的日历插件
上个星期看到同事做一个有关日历提醒功能的需求,为了找个插件也是费了不少心思,然后刚好有时间就试着写了一个简单demo 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制 ...
- jQuery简单日历插件版
先来看demo:http://codepen.io/jonechen/pen/xOgZMz 插件代码: ; (function($) { var Calendar = function(ele, op ...
- jquery日历插件FullCalendar使用技巧
原文链接:http://blog.csdn.net/u013493957/article/details/44920341 FullCalendar是一款基于jquery的日历控件,它有着很强大的 ...
- 被逼着写的jquery工作日管理日历插件
因为工作原因,在我刚进入新公司之后,立马要求让我做一个jquery的插件demo.我的天,我面试的可是.net工程师啊.虽然以前接触过js,jquery,但也只是接触过一丢丢啊,没办法,只好硬着头皮上 ...
- 一款基于jQuery日历插件的开发过程
这个插件的设置选项,所有样式都设置成自定义,提供回调函数,方便在外部进行扩展 css设置是可变的 也就是说 日历的样式是定制的: /******************************** ...
- 11个实用jQuery日历插件
1. FullCalendar FullCalendar是很出名的jQuery日历插件,它支持拖拽等功能,整合了Google Calendar,而且可以通过JSON来绑定事件,设计师可以轻松地自定义日 ...
- JQuery日历插件My97DatePicker日期范围限制
My97DatePicker是一个非常优秀的日历插件,不仅支持多种调用模式,还支持日期范围限制. 常规的调用比较简单,如下所示: 1 <input class="Wdate" ...
- jQuery插件实战之fullcalendar(日历插件)Demo
jQuery的插件许多,应用的场景也很丰富,今天我这里给大家介绍一款很有用的日历页面开发插件 - fullcalendar,眼下最新版本号是1.5.1,使用这款插件可以高速帮助你高速编程实现基于web ...
随机推荐
- geoserver安装部署步骤
方式一:直接在geoserver官网下载zip源代码解压包,直接部署在tomcat里面运行geoserver: 方式二:下载安装包方式 以GeoServer2.8.5版本为准,安装之前必须要保证你机子 ...
- bzoj 4765: 普通计算姬
Description "奋战三星期,造台计算机".小G响应号召,花了三小时造了台普通计算姬.普通计算姬比普通计算机要厉害一些 .普通计算机能计算数列区间和,而普通计算姬能计算树中 ...
- Linux(CentOS6.5)下修改Nginx初始化配置
本文地址http://comexchan.cnblogs.com/,作者Comex Chan,尊重知识产权,转载请注明出处,谢谢! 首先备份相关文件: cp /comexHome/nginx/conf ...
- JMeter参数化实现
参数化:指对每次发起的请求,参数名称相同,参数值进行替换,如登录三次系统,每次用不同的用户名和密码. 1.1.1. 从csv文件读取(CSV Data Set Config) 步骤: 1)新建一个文 ...
- flask 部署后并发测试
部署后看下flask支持的并发,来个300并发看看,上代码 import threading, time, requests url = "http://www.baidu.com" ...
- 《MYSQL》----字符串的复杂函数,检索的七-天-排-重
接到了一个新的需求,拿到需求的时候瞬间有点头大,因为实在是有些棘手. 我们这个系统本身是个接口系统,总接口数大概在200个左右.外部会有很多用户在 不同的时间拿着不同参数去调我们的这些接口,用户的调集 ...
- Head First设计模式之代理模式
一.定义 定义:为其他对象提供一种代理以控制对这个对象的访问 在代理模式中,我们创建具有现有对象的对象,以便向外界提供功能接口. 二.结构 代理模式一般会有三个角色: 抽象角色(Subject):指代 ...
- Java内存分配以及GC
转自http://www.cnblogs.com/hnrainll/archive/2013/11/06/3410042.html 写的太棒了,简单易懂 Java垃圾回收概况 Java GC(Gar ...
- Android OpenGL ES 入门系列(一) --- 了解OpenGL ES的前世今生
转载请注明出处 本文出自Hansion的博客 OpenGL ES (OpenGL for Embedded Systems) 是 OpenGL 三维图形 API 的子集,针对手机.PDA和游戏主机等嵌 ...
- TPYBoard读取芯片上的温度传感器
转载请以链接形式注明文章来源,公众号:MicroPython玩家汇 一.STM32内部温度传感器概要 STM32芯片内部一项独特的功能就是内部集成了一个温度传感器,因为是内置,所以测试的是芯片内部的温 ...