html5初始化时间控件

HTML5提供了一系列时间控件date、time、datetime-local、datetime、month、week ,但是都没有进行控件的初始化。

现在以最常使用的date、time控件为例,进行时间控件的初始化。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
<title>初始化时间控件</title>
</head>
<body>
<input type="date" id="nowDate"/>
<input type="time" id="nowTime" />
<script src="jquery-2.0.3.min.js"></script>
<script>
    //初始化时间控件
    var now = new Date() ;
        
    var nowYear = now.getFullYear() ; //年
    var nowMonth = now.getMonth()+1<10?"0"+(now.getMonth()+1):now.getMonth() ; //月
    var nowDay = now.getDate()<10?"0"+now.getDate():now.getDate() ; //日期
        
    var nowHour = now.getHours()<10?"0"+now.getHours():now.getHours() ; //时
    var nowMinute = now.getMinutes()<10?"0"+now.getMinutes():now.getMinutes() ; //分
        
    var nowDate = nowYear+"-"+nowMonth+"-"+nowDay ;
    var nowTime = nowHour+":"+nowMinute;
        
    $("#nowDate").val(nowDate) ;
    $("#nowTime").val(nowTime) ;
</script>
</div> 
</body>
</html>
时间: 2024-10-11 18:00:05

html5初始化时间控件的相关文章

移动端时间控件 HTML5+ 的 pickDate 和 MUI 的 dtpicker 的使用与对比

本文将介绍两种移动端的时间控件 HTML5+ 的 pickDate 和 MUI 的 dtpicker,API中的内容此文不再赘述,仅从实际应用过程中的遇到的问题进行分析对比与使用方法总结. 对比分析: 1.HTML5+ 的 pickDate http://www.dcloud.io/docs/api/zh_cn/nativeui.html#plus.nativeUI.pickDate 优点:文档容易看,参数清晰,感觉上性能比mui的dtpicker要好一些 缺点:年月日的选择 pickDate

vue小荔枝,时间控件,动态按月份增减。

依赖框架有jq,bootstrap3.0,vue2.0; 自封装(搬运)时间控件,bootstrap-datetimepicker.资源下载:看这里 需求: 默认本地时间,相隔一个月 四个选项:1一个月,一个季度,半年,一年. 如果结束日期不变,那么默认递增即可,如果结束日期改变了,以变更的日期递增月份. html结构: <div id="app"> <div class="col-md-5 form-inline"> <div cla

C# WinForm 时间控件(DEV控件)

此处收集一些关于时间控件(DevExpress.XtraEditors.DateEdit())的一些基本设定方式: 1. 默认显示当前日期: a. 在某些情况下(还未明朗),在 form.Designer.cs 中,将该控件的EditValue赋null值: this.detoBeginTime.EditValue = null; b. 若设定上述方式后,仍无法显示默认时间,可再页面加载.窗体初始化时,初始化控件的值: detoBeginTime.Text = DateTime.Now.ToSt

layui时间控件闪现

初始化了时间控件,点击触发时就一闪就消失了.这种情况主要是出现在弹出窗的时间控件上.解决:初始化时加一个属性trigger: 'click',如 laydate.render({ elem: '#executionTime', format: 'yyyy-MM-dd HH:mm:ss', type: 'datetime', position:'fixed', trigger: 'click', }); 原文地址:https://blog.51cto.com/13764574/2429857

数字时间控件----------WinForm控件开发系列

/// <summary> /// 数字时间控件 /// </summary> [ToolboxItem(true)] [DefaultProperty("Value")] [DefaultEvent("ValueChanged")] [Description("数字时间控件")] public partial class TimeExt : Control { public delegate void EventHand

jquery-ui日期时间控件实现

日期控件和时间控件为独立控件,日期时间控件要同一时候导入日期控件和时间控件的js,然后在日期控件加入时间控件显示參数,没有导入时间控件js.日期控件函数设置的时间控件參将包错 日期控件官网网址:http://jqueryui.com/ 日期控件js:jquery-ui.js 相应函数及默认属性设置:function Datepicker() 时间控件官网网址:http://plugins.jquery.com/jt.timepicker/ 时间控件js:jquery-ui-timepicker-

从零开始学_JavaScript_系列(九)——dojo(2)(AJAX、时间控件、鼠标事件、样式修改、事件移除、消息发布订阅)

(21)和(22)写的不好,跳过. (23)AJAX异步加载 插件:dojo/request 参数:request 语法(get): request.get(URL).then(成功回调函数,失败回调函数); 第一个回调函数是成功的,参数用response:(也可以用其他的) 第二个回调函数是失败的,参数用error:(也可以用其他的) 注: ①读取本地比较简单,直接填写本地的url即可: ②如果读取服务器端(比如数据库),那么需要相应的支持,例如python脚本等(我自己目前对python.和

My97DatePicker时间控件

之前一直使用easyui控件无法实现只显示yyyy年MM月格式或者显示yyyyMM格式.相比My97DatePicker时间控件更为强大些. 只要在页面引用如下脚本,WdatePicker.js内部会引用其它js. <script type="text/javascript" src="<%=root%>/Common/My97DatePicker/WdatePicker.js"></script> 然后在input中编写oncl

DatePicker日期与时间控件

DatePicker日期与时间控件 一.简介 二.方法 三.代码实例 四.收获