效果图:      下载地址：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日历插件（精确到小时）的更多相关文章

  1. 一款简洁大气的jquery日期日历插件

    本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址:http://keleyi.com/a/bjad/em ...

  2. 基于jQuery的日历插件

    上个星期看到同事做一个有关日历提醒功能的需求,为了找个插件也是费了不少心思,然后刚好有时间就试着写了一个简单demo 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制 ...

  3. jQuery简单日历插件版

    先来看demo:http://codepen.io/jonechen/pen/xOgZMz 插件代码: ; (function($) { var Calendar = function(ele, op ...

  4. jquery日历插件FullCalendar使用技巧

    原文链接:http://blog.csdn.net/u013493957/article/details/44920341   FullCalendar是一款基于jquery的日历控件,它有着很强大的 ...

  5. 被逼着写的jquery工作日管理日历插件

    因为工作原因,在我刚进入新公司之后,立马要求让我做一个jquery的插件demo.我的天,我面试的可是.net工程师啊.虽然以前接触过js,jquery,但也只是接触过一丢丢啊,没办法,只好硬着头皮上 ...

  6. 一款基于jQuery日历插件的开发过程

    这个插件的设置选项,所有样式都设置成自定义,提供回调函数,方便在外部进行扩展 css设置是可变的  也就是说  日历的样式是定制的: /******************************** ...

  7. 11个实用jQuery日历插件

    1. FullCalendar FullCalendar是很出名的jQuery日历插件,它支持拖拽等功能,整合了Google Calendar,而且可以通过JSON来绑定事件,设计师可以轻松地自定义日 ...

  8. JQuery日历插件My97DatePicker日期范围限制

    My97DatePicker是一个非常优秀的日历插件,不仅支持多种调用模式,还支持日期范围限制. 常规的调用比较简单,如下所示: 1 <input class="Wdate" ...

  9. jQuery插件实战之fullcalendar（日历插件）Demo

    jQuery的插件许多,应用的场景也很丰富,今天我这里给大家介绍一款很有用的日历页面开发插件 - fullcalendar,眼下最新版本号是1.5.1,使用这款插件可以高速帮助你高速编程实现基于web ...

随机推荐

  1. 小白的 MySQL 笔记（一）

    来自 stackoverflow 的内容居多. 1- MySQL VARCHAR size? 2- 数据库设计范式 3- What is InnoDB and MyISAM in MySQL ? 4- ...

  2. 扩展Microsoft Graph数据结构（开放扩展）

    作者:陈希章 发表于 2018年1月2日 前言 Microsoft Graph是一张拥有巨大价值的网络,它定义了包括Office 365在内的资源的实体及其关系,它的价值体现在,随着用户积累的数据越来 ...

  3. jmeter通过org.sqlite.JDBC驱动连接db数据库

    最近遇到个项目,默认业务库为内置db数据库,在性能脚本编辑过程中要通过正则表达式提取器(关联)获取对应的id号,通过该id号到db数据库中查找对应的数据源name字段内容,为下一个post请求做par ...

  4. 5.前端基于react,后端基于.net core2.0的开发之路（5） 配置node层，session设置、获取，请求拦截

    1.总结一下 今年,2月份从深圳来到广州,工作到现在,回头看,完成的项目4-5个,公司基本没有懂技术的领导,所以在技术选型上,我们非常的自由,所以内心一直都不满足现状,加上一起工作的小伙伴给力(哈哈哈 ...

  5. 学习时用的软件最新 开发环境为Visual Studio 2010，数据库为SQLServer2005，使用.net 4.0开发。 超市管理系统

    一.源码特点 1.采用典型的三层架构进行开发.模板分离,支持生成静态 伪静态..购物车.登陆验证.div+css.js等技术二.功能介绍 1.本源码是一个超市在线购物商城源码,该网上商城是给超市便利店 ...

  6. 关于recycleview 滑动item变长（item变形）问题

    昨天在做项目的时候出现了bug,表现是在滑动的时候,整个item会被拉长了,松手后就回归正常大小了, 出现这个的主要原因是因为你的item布局中最大的那个根布局是 match_parent状态,因此导 ...

  7. 小谈SQL表的连接

    简述SQL连接 SQL连接呢,主要分为以下几种内连接,左连接,右连接,全连接(当然还有很多官方的说法,这里就讲讲最常用的). 既然都叫连接了,那至少要有两个对象,也就是说,至少要有两个表,要怎么样的表 ...

  8. 【JavaScript 】for 循环进化史

    ECMAScript 6已经逐渐普及,经过二十多年的改进,很多功能也有了更成熟的语句,比如 for 循环 这篇博客将介绍一下从最初的 for 循环,到 ES6 的 for-of 等四种遍历方法 先定义 ...

  9. spark 1.6 完全分布式平台搭建

    软件环境: scala-2.11.4.tgz spark-1.6.2-bin-hadoop2.6.tgz 操作步骤: 一.  安装scala 1. 解压scala (tar –zxvf  filena ...

  10. 【动态规划】洛谷P1006传纸条

    题目描述: 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵,而小渊和小轩被安排在矩阵对角线的两端,因此,他们就无法直接交谈了.幸运的 ...