js实现点击文本框显示日期选择器特效代码分享

为大家分享的JavaScript图片轮播代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js点击文本框显示日期选择器</title>
<link type="text/css" rel="stylesheet" href="calendar.css" >
<script type="text/javascript" src="calendar.js" ></script>
<script type="text/javascript" src="calendar-zh.js" ></script>
<script type="text/javascript" src="calendar-setup.js"></script>
</head>

<body>
选择时间：<input type="text" id="EntTime" name="EntTime" onclick="return showCalendar('EntTime', 'y-mm-dd');" />
</body>
</html>

运行效果图：

初始化：

点击文本框：

选择日期，显示在文本框：

以上就是为大家分享的javascript点击文本框显示日期选择器代码，希望大家可以喜欢。

赞 (0)

相关推荐

  • 浅谈Bootstrap的DatePicker日期范围选择

    用日期插件时,经常会有一种需求.两个input框选择.开始时间小于结束时间,结束时间大于开始时间,开始时间和结束时间都不大于当前时间. 我们当然可以用选择的结果来判断输入正确与否.但是更好的办法是让我们的日期选择插件做出一些限制. Bootstrap搭配了很优秀的日期选择插件.DatePicker和DateTimePicker. 两者功能很类似.使用方法也是差不多的.DatePicker支持更多的事件和设置. 看api知道日期变化的时候会有一个事件changeDate.当选择的日期变化的时候,会

  • bootstrap-datetimepicker实现只显示到日期的方法

    bootstrap-datetimepicker实现只显示到日期的方法

    本文实例讲述了bootstrap-datetimepicker实现只显示到日期的方法.分享给大家供大家参考,具体如下: bootstrap-datetimepicker 一般都是设置到时分秒,有时候并不需要,怎么处理呢? minView: "month", //选择日期后,不会再跳转去选择时分秒 1.引入 <link href="Public/css/bootstrap.min.css" type="text/css" rel="

  • 基于javascript bootstrap实现生日日期联动选择

    本文实例为大家分享了js实现日期联动选择的相关代码,适用于生日的选择,供大家参考,具体内容如下 实现目标:年月日三个select 输入框,以及一个hidden的input,通过js获取input的值,如果有值切是日期格式,年月日select为input中的时间.否则为空.年默认区间段为1900年到当今年份 本人使用了bootstrap,class请参照bootstrap的相关说明 下面是html 内容: <div class="col-sm-9"> <label cl

  • javascript英文日期（有时间）选择器

    var languageCode = 'en';    // Possible values:     en,ge,no,nl,es,pt-br,fr                                 // en = english, ge = german, no = norwegian,nl = dutch, es = spanish, pt-br = portuguese, fr = french, da = danish, hu = hungarian(Use UTF-8 

  • 利用Query+bootstrap和js两种方式实现日期选择器

    利用Query+bootstrap和js两种方式实现日期选择器

    前言 所谓日期选择是在下拉列表中选择年.月.日,年显示前后的五年,12个月,日就是有30.31.29.28天的区别,随着月份的变而变,本文介绍了利用Query+bootstrap和js实现日期选择器的两种方法,下面来一起学习学习吧. 一.js方式的日期选择 (1)首先就是三个下拉列表了,点击年.月.日显示列表中的内容,这样就是要给这三个列表加"点击事件"onclick <select id="nian" onclick="biantian()&quo

  • Js日期选择器并自动加入到输入框中示例代码

    复制代码 代码如下: <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <script type="text/javascript"> var gMonths=new Array("一月&

  • Yii2框架引用bootstrap中日期插件yii2-date-picker的方法

    本文实例讲述了Yii2框架引用bootstrap中日期插件yii2-date-picker的方法.分享给大家供大家参考,具体如下: 最近在学习yii2 框架,发现框架很强大,而且结合了时下许多新的技术在里面. 简单记录一下yii2-date-picker插件的使用方法: 首先先了解一下github中的相关资源:https://github.com/2amigos/yii2-date-picker-widget 其次:在自己的项目中利用上面链接中的相关方法下载此资源,命令为: php compos

  • bootstrap laydate日期组件使用详解

    bootstrap laydate日期组件使用详解

    在日常的网页开发过程中,日期组件已经成为不可或缺的组件之一.同时,随着广大杰出攻城狮的不懈努力,也出现了很多优秀的日期组件,其中我个人觉得 layDate 日期组件是一个非常不错的组件,简洁易用,样式清爽. 此文主要以贤心所作的 layDate 组件进行日期选择的演示,敬请各位小主们参阅,若有不足之处,敬请大神指正,不胜感激! 闲不多言,直接上码. 演示文档的工程目录如下图所示: laydate-demo.html 对应的源代码为: <!DOCTYPE html PUBLIC "-//W3

  • javascript 日期联动选择器 [其中的一些代码值得学习]

    DateSelector body { margin: 0px; padding: 0px; font-size: 12px; } #year, #month, #date{ width: 60px; margin-right: 3px; } var $ = function(id) { return 'string' == typeof id ? document.getElementById(id) : id; }; var Extend = function(destination, so

  • Bootstrap每天必学之日期控制

    Bootstrap每天必学之日期控制

    一个成熟的框架,日期控制是少不了的,在网上也有很多日期控制可以选择,而主框架用了bootstrap,日期控制也当前要用它自己的, 控件地址:http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm GitHub上开源地址:https://github.com/smalot/bootstrap-datetimepicker 在使用datetimepicker之前,先要经过以下几个步骤 1.引用JS脚本库 <script src="

随机推荐