zoukankan      html  css  js  c++  java
  • jquery-ui日期时间控件实现

    日期控件和时间控件为独立控件,日期时间控件要同一时候导入日期控件和时间控件的js,然后在日期控件加入时间控件显示參数,没有导入时间控件js。日期控件函数设置的时间控件參将包错

    日期控件官网网址:http://jqueryui.com/

    日期控件js:jquery-ui.js

    相应函数及默认属性设置:function Datepicker()


    时间控件官网网址:http://plugins.jquery.com/jt.timepicker/

    时间控件js:jquery-ui-timepicker-addon.js

    相应函数及默认属性设置:function Timepicker()



    $(function(){
    	
    	/**
    	 * 为时间字段设置时间格式 TODO  需考虑优化选择器。排除hidden类型的
    	 */
    	 
    	//日期带时间(放在time前面避免被覆盖)
    	//$('input[id$=DateTime],[id$=dateTime],[id$=Datetime],[id$=datetime],[class$=DateTime]').datetimepicker({showSecond: true,hourGrid:4,minuteGrid: 10, timeFormat: 'hh:mm:ss'});
    	$('input[id$=DateTime],[id$=dateTime],[id$=Datetime],[id$=datetime],[class$=DateTime],[class$=dateTime],[class$=datetime],[class$=DateTime]').datetimepicker({ 
    		dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],// 设置控件的星期名称显示
    		firstDay: 1, //设置排在第一列的是星期几,星期天为0。星期一为1,以此类推。
    		changeMonth: true,  //改变月份下拉框
    		changeYear: true,    //改变年份下拉框
    		showSecond: true,    //显示毫秒
    		monthNamesShort:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
    		timeFormat: 'hh:mm:ss',  //设置时间格式
    		dateFormat: 'yy-mm-dd', //设置日期格式
    		hourGrid: 4,//显示时间标尺
    		minuteGrid: 10,
    		secondGrid:10
    		
    	});
    	
    	//日期
    	$('input[id$=Date],[id$=date],[class$=Date],[class$=date]').datepicker({ 
    		dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],// 设置控件的星期名称显示
    		firstDay: 1, //设置排在第一列的是星期几,星期天为0,星期一为1,以此类推。
    		changeMonth: true,  //改变月份下拉框
    		changeYear: true,    //改变年份下拉框
    		monthNamesShort:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
    		dateFormat: 'yy-mm-dd' //设置日期格式
    	});
    	//时间   显示秒   设置格式
    	$('input[id$=Time],[id$=time],[class$=Time]').timepicker({showSecond: true,timeFormat: 'hh:mm:ss',hstep:'2',hourGrid: 4,minuteGrid: 10});
    	
    	
    });
    


    显示效果例如以下:

    日期时间控件


    日期控件


     

    时间控件:





  • 相关阅读:
    在ASP.NET Core中怎么使用HttpContext.Current (转载)
    如何在.Net Core 2.0 App中读取appsettings.json
    ASP.NET CORE MVC 2.0 如何在Filter中使用依赖注入来读取AppSettings,及.NET Core控制台项目中读取AppSettings
    linux中shell变量$#,$@,$0,$1,$2的含义解释<转>
    ijkplayer阅读学习笔记之从代码上看播放流程
    ubuntu命令整理中
    Android SDK Android NDK Android Studio 官方下载地址<转>
    Ubuntu启动 卡在checking battery state 解决方案
    解决 ffmpeg 在avformat_find_stream_info执行时间太长
    ijkplayer阅读笔记系列<转>
  • 原文地址:https://www.cnblogs.com/gccbuaa/p/6921596.html
Copyright © 2011-2022 走看看