• 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
    

      

  • 相关阅读:
    Nexus入门指南(图文)[转]
    java注解[转]
    JS设置IE可信站点及ActiveX设置
    ExtJS 4 树
    SQL大全
    基于Spring aop 和JAVA注解方式添加日志
    Excle自动增长序号
    VS 生成后事件
    Oracle命令分解之正则表达式搜索(一)
    Oracle命令分解之……SOUNDEX
  • 原文地址:https://www.cnblogs.com/changyaoself/p/7342137.html
Copyright © 2020-2023  润新知