效果图:      下载地址: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. ReactNative实现图集功能

    需求描述: 图片缩放.拖动.长按保存等基础图片查看的功能: 展示每张图片文本描述: 实现效果,如图: 实现步骤 使用第三方插件:react-native-image-zoom-viewer 插件Git ...

  2. java中可变长参数

    ** * Created by Lenovo on 2017/12/10. * java中可变长参数 */ public class reflect04 { //m1有一个int类型的可比变长参数 / ...

  3. Eclipse Pydev添加MySQLdb模块,Windows下安装MySQL-python

    1.首先确保Windows下已经安装Python.Eclipse并且Eclipse已经集成Pydev能成功运行Python 2.下载MySQL-python 地址:http://www.codegoo ...

  4. 如何去除本地文件与svn服务器的关联

    1.每个目录逐个去删除.svn文件夹 .svn属于隐藏文件夹,可通过操纵Windows文件资源管理器使隐藏文件可视,删除该文件,即可. 2.首先建立一个新文件,文件命名为remove-svn-fold ...

  5. C++中double类型的数字如何保留三位小数点详解

    我们知道C语言中,如果要求输出结果保留三位小数,我们可以使用pritf()函数轻松的解决.但是C++的输出运算符<<并没有直接实现这个功能,怎么办呢?之前在找答案的过程中各路大神给出了千姿 ...

  6. php中const与define的区别

    1 版本差异: const 要求php的版本>5.3.0 define 可以兼容php4,php5 等版本 2 定义的位置区别: const关键字定义的常量是在编译时定义的,因此const关键字 ...

  7. C# 全选中数字文本框内容

    /// <summary>        /// 全选中数字文本框内容        /// </summary>        /// <param name=&quo ...

  8. Android studio Error:org.gradle.api.internal.tasks.DefaultTaskInputs$TaskInputUnionFileCollection cannot be cast to

    http://blog.csdn.net/FlyRabbit_1/article/details/74536317 Error:org.gradle.api.internal.tasks.Defaul ...

  9. 分布式监控系统Zabbix3.2添加自动发现磁盘IO并注册监控

     zabbix并没有给我们提供这么一个模板来完成在Linux中磁盘IO的监控,所以我们需要自己来创建一个,在此还是在Linux OS中添加. 由于一台服务器中磁盘众多,如果只一两台可以手动添加,但服务 ...

  10. Python环境安装及编辑器配置(一)

    在2018年决定写一些关于Python的文章,其实写博客这件事在2016年就有了,但是因为个人的一些原因一直被耽搁.所以2018年的目标之一就是写多一点的博客,不管是是生活还是工作.好吧,废话不多说, ...