js 日期插件 datepicker

点击图片出现  时间 ,增加一个点击事件

 1 <label for="" class="width80">创建日:</label>
 2                         <div class="input-group">
 3                             <div class="date">
 4                                 <?= Html::TextInput(‘search[begin_date]‘,
 5                                     isset($searchParams[‘begin_date‘]) ? $searchParams[‘begin_date‘] : ‘‘,
 6                                     [‘id‘ => ‘begin_date‘, ‘class‘ => ‘form-control border0 border-radius0‘, ‘style‘ => "width: 115px;"])
 7                                 ?>
 8                             </div>
 9                             <div class="input-group-addon white border0 border-radius0">
10                                     <i class="iconfont"></i>
11                             </div>
12                         </div>

引入

<?php $this->registerCssFile(‘@web/assets/datepicker/css/bootstrap-datepicker3.min.css‘, [‘position‘ => View::POS_BEGIN]) ?>
<?php $this->registerJsFile(‘@web/assets/datepicker/js/bootstrap-datepicker.min.js‘, [‘position‘ => View::POS_BEGIN]) ?>
<?php $this->registerJsFile(‘@web/assets/datepicker/locales/bootstrap-datepicker.zh-CN.min.js‘, [‘position‘ => View::POS_BEGIN]) ?>

1 $("#begin_date").datepicker({
2             format: ‘yyyy-mm-dd‘,
3             language: ‘zh-CN‘,
4             autoclose: true,
5         }).on(‘show‘, function () {
6             var $datepick = $(".datepicker");
7             var bottom = $datepick.position().bottom;
8         });

增加点击事件

1 /* datepicker bind icon show*/
2 $(function(){
3     $(".input-group-addon").click(function(){
4         $(this).prev().find("input").focus();
5     })
6 });
时间: 2024-10-11 23:52:08

js 日期插件 datepicker的相关文章

js日期插件

推荐一款贤心写的js日期插件,调用非常方便:顺手写了一个demo. 先列举下这款插件的优点:日期范围限制.开始日期设定.自定义日期格式.时间戳转换.当天的前后若干天返回.时分秒选择.智能响应.自动纠错.节日识别.快捷键操作.更换皮肤等. 当然还有很重要的一点是使用简单: 代码如下: <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>data_

jquery日期插件datePicker

index.html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g

laydate JS日期插件

原文出处 简要介绍 你是时候换一款日期控件了,而layDate非常愿意和您成为工作伙伴.她致力于成为全球最用心的web日期支撑,为国内外所有从事web应用开发的同仁提供力所能及的动力.她基于原生JavaScript精心雕琢, 兼容了包括IE6在内的所有主流浏览器.她具备优雅的内部代码,良好的性能体验,和完善的皮肤体系,并且完全开源,你可以任意获取开发版源代码,一扫某些 传统日期控件的封闭与狭隘.layDate本着资源共享的开发者精神和对网页日历交互无穷的追求,延续了layui一贯的简单与易用.她

date.plugin.js 日期插件

//定义命名空间 var DatePlugin; if (!DatePlugin) DatePlugin = {}; /*整理时间:2015-05-28*/ var defaultFormat = "yyyy-MM-dd"; //默认的日期格式 var totalDefaultFormat = "yyyy-MM-dd hh:mm:ss"; var pointFormat = "yyyy.MM.dd"; var slashFormat = &quo

Bootstrap日期插件中文实现

Bootstrap的相关JS和CSS直接跳过. <script type="text/javascript" src="static/js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="static/js/bootstrap.min.js"></script> <script type=

jquery日期插件jquery.datePicker参数

1.效果图 2.引入JS.CSS文件 jquery-ui.min.css和jquery-ui.min.js文件 Includes: core.js, widget.js, mouse.js, position.js, accordion.js, autocomplete.js, button.js, datepicker.js, dialog.js, draggable.js, droppable.js, effect.js, effect-blind.js, effect-bounce.js,

原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org

js的富文本框与日期插件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

jquery-ui里日期插件的使用

HTML为 <input type="text" id="starttime" readonly /> <input type="text" id="endtime" readonly /> 设置readonly属性,则输入框不可写: 引入必要的js文件和css文件 <link rel="stylesheet" type="text/css" href=&q