jquery.datetimepicker日期时间控件点击弹出日期时间选择器代码



290 1157 386



特效描述:jquery.datetimepicker 日期时间控件 点击弹出 日期时间选择器,日期时间控件点击弹出日期时间选择器代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/>

2. 引入JS

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.datetimepicker.js"></script>

3. HTML代码

<div style="width:960px;margin:0 auto;">
	<h3>DateTimePicker</h3>
	<input type="text" value="2014/03/15 05:06" id="datetimepicker"/><br><br>
	<h3>Mask DateTimePicker</h3>
	<input type="text" value="" id="datetimepicker_mask"/><br><br>
	<h3>TimePicker</h3>
	<input type="text" id="datetimepicker1"/><br><br>
	<h3>DatePicker</h3>
	<input type="text" id="datetimepicker2"/><br><br>
	<h3>Inline DateTimePicker</h3>
	<input type="text" id="datetimepicker3"/><input type="button" onClick="$('#datetimepicker3').datetimepicker({value:'2011/12/11 12:00'})" value="set inline value 2011/12/11 12:00"/><br><br>
	<h3>Button Trigger</h3>
	<input type="text" value="2013/12/03 18:00" id="datetimepicker4"/><input id="open" type="button" value="open"/><input id="close" type="button" value="close"/><input id="reset" type="button" value="reset"/>
	<h3>TimePicker allows time</h3>
	<input type="text" id="datetimepicker5"/><br><br>
	<h3>Destroy DateTimePicker</h3>
	<input type="text" id="datetimepicker6"/><input id="destroy" type="button" value="destroy"/>
	<h3>Set options runtime DateTimePicker</h3>
	<input type="text" id="datetimepicker7"/>
	<p>If select day is Saturday, the minimum set 11:00, otherwise 8:00</p>
	<h3>onGenerate</h3>
	<input type="text" id="datetimepicker8"/>
	<h3>disable all weekend</h3>
	<input type="text" id="datetimepicker9"/>
</div>	
<script type="text/javascript">
$('#datetimepicker_mask').datetimepicker({
	mask:'9999/19/39 29:59'
});
$('#datetimepicker').datetimepicker();
$('#datetimepicker').datetimepicker({value:'2015/04/15 05:03',step:10});
$('#datetimepicker1').datetimepicker({
	datepicker:false,
	format:'H:i',
	step:5
});
$('#datetimepicker2').datetimepicker({
	yearOffset:222,
	lang:'ch',
	timepicker:false,
	format:'d/m/Y',
	formatDate:'Y/m/d',
	minDate:'-1970/01/02', // yesterday is minimum date
	maxDate:'+1970/01/02' // and tommorow is maximum date calendar
});
$('#datetimepicker3').datetimepicker({
	inline:true
});
$('#datetimepicker4').datetimepicker();
$('#open').click(function(){
	$('#datetimepicker4').datetimepicker('show');
});
$('#close').click(function(){
	$('#datetimepicker4').datetimepicker('hide');
});
$('#reset').click(function(){
	$('#datetimepicker4').datetimepicker('reset');
});
$('#datetimepicker5').datetimepicker({
	datepicker:false,
	allowTimes:['12:00','13:00','15:00','17:00','17:05','17:20','19:00','20:00']
});
$('#datetimepicker6').datetimepicker();
$('#destroy').click(function(){
	if( $('#datetimepicker6').data('xdsoft_datetimepicker') ){
		$('#datetimepicker6').datetimepicker('destroy');
		this.value = 'create';
	}else{
		$('#datetimepicker6').datetimepicker();
		this.value = 'destroy';
	}
});
var logic = function( currentDateTime ){
	if( currentDateTime.getDay()==6 ){
		this.setOptions({
			minTime:'11:00'
		});
	}else
		this.setOptions({
			minTime:'8:00'
		});
};
$('#datetimepicker7').datetimepicker({
	onChangeDateTime:logic,
	onShow:logic
});
$('#datetimepicker8').datetimepicker({
	onGenerate:function( ct ){
		$(this).find('.xdsoft_date')
			.toggleClass('xdsoft_disabled');
	},
	minDate:'-1970/01/2',
	maxDate:'+1970/01/2',
	timepicker:false
});
$('#datetimepicker9').datetimepicker({
	onGenerate:function( ct ){
		$(this).find('.xdsoft_date.xdsoft_weekend')
			.addClass('xdsoft_disabled');
	},
	weekends:['01.01.2014','02.01.2014','03.01.2014','04.01.2014','05.01.2014','06.01.2014'],
	timepicker:false
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 自动滚动图片轮播 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 切换按钮 日期时间 时钟 日历 时间 日历插件 时间日期插件 表单 表单美化 表单插件 表单美化插件 滚动切换 滚动条切换 日历选择器 时间选择器 提示框/弹出层 时间日期插件 时间日期 下拉框 select下拉菜单 select美化 select美化框 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到