日历插件

最新推荐文章于 2018-07-05 10:48:49 发布

原创最新推荐文章于 2018-07-05 10:48:49 发布 · 330 阅读

0 ·

CC 4.0 BY-SA版权

java小知识点专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个HTML和JavaScript结合使用的日期选择组件。该组件使用了HTML5的输入框与图标配合JavaScript的日期选择插件实现日期的便捷选择，并通过jQuery进行事件绑定与交互。文中展示了具体的HTML结构与JavaScript配置代码。

html:

	<div class="input-group date form_date_start " data-date-format="yyyy-mm-dd"  data-link-format="yyyy-mm-dd" style="margin-top:0px;">
		<input type="text" class="form-control" data-mask="9999-99-99"  name="crtSourceStartDate" id="crtSourceStartDate" readonly  value="${recentReport.crtSourceStartDate}"> 
		<span class="input-group-addon"><i class="fa fa-calendar"></i></span>	//日历的图标
	</div>



js:
	$('.form_date_start').datetimepicker({
		language:  'fr',
		weekStart: 1,
		todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		minView: 2,
		forceParse: 0
	 }).on('changeDate', function(ev){
		//对时间进行判断是否符合 	
	});



注：需先引用jQuery的js