最近开发用Simple jQuery Date-picker Plugin做jQuery的日历控件,样式简单,功能强大。但仍有一些不足。比如:控件不是中文;控件必须要有一个input文本框,才能触发事件。而且,获得时间后,缺乏回调函数,不能够进行接下来的操作。.
控件示例如下:
我修改源代码之后,都一一解决了这些问题。示例如下:
1.修改了显示中文问题。这个好改,源文件中找到相应的字符改过来就行。然后导入js时,加入charset="GB2312"。
2.修改了点击文字也能弹出日期。比如显示:2010年11月1日。点击它就可以修改
这里我做了一个隐藏文本框,当日也可以将点击的对象(2010年11月1日)修改成选择的日期。
源文件中加入:
var showname;
var flag;
if(typeof(opts.showname)!='undefined'){
flag = opts.showname;
}else{
flag = 'input';
}
if (jQuery(this).is(''+flag+'')){
var hidetext;
if (dateObj && dateObj.constructor == Date){
if(typeof(opts.hidetext)!='undefined'){
$(''+opts.hidetext+'').val(jQuery.fn.simpleDatepicker.formatOutput(dateObj));
}else{
el.val(jQuery.fn.simpleDatepicker.formatOutput(dateObj));
}
}
加入回调函数
if(typeof(opts.submit)!='undefined')opts.submit();
页面调用时:js这样写
$('#kk').simpleDatepicker({showname:'#kk',hidetext:'#one',submit:subDate});
function subDate(){
var nowDate = $('#one').val();
if(nowDate!="")alert(nowDate);
}
HTML页面:
<div style="width:300px;height:30px;color:blue;">
<span style="cursor:pointer;" id="kk">点击此行文字获得日期<input class="one" id="one" type="hidden" name="date1" value="" /></span>
</div>
附上源文件,供大家下载,详细查看。
分享到:
相关推荐
对于“simple jQuery date-picker plugin”,它是基于jQuery的一个日期选择插件,它提供了基本的日期选择功能,适用于那些不需要复杂日历功能的项目。以下是使用这个插件的关键步骤: 1. **引入资源**:在HTML文件...
在众多的`jQuery`日期选择器插件中,`simple jQuery date-picker plugin`因其简洁易用而受到欢迎。这个插件提供了基本的日期选择功能,并且可以轻松地自定义样式和行为,满足开发者不同的需求。 **中文支持** 在...
上次已经传过一个,这次修改更加彻底,更加方便,更加符合国内开发者使用。具体修改如下: 1、修改星期几为中文显示 2、修改日期显示,由之前的月/日/年,改为年/月/日 3、新增参数sign,可修改中间的间隔符。...
:picker-options="{ 步步长: 15 }" placeholder="选择日期时间"> </el-date-picker> ``` 这里的 `step` 属性就是用于设置时间选择器的时间步长,值为15表示每点击一次,时间会增加或减少15分钟。 除了 `step`...
本文的核心知识点是探讨如何使用`el-date-picker`组件,并通过`picker-options`属性来限制选择的日期必须是当天之前的时间。我们将会深入解析代码示例、API用法以及实现原理。 首先,`el-date-picker`组件是Element...
element UI el-date-picker组件样式更改 popper-class="down-time" 原码是body下的弹出器
https://blog.csdn.net/xuelang532777032/article/details/121287203,内有博客截图,方便没有vip的小伙伴下载
"date-picker 基本jquery的时间插件"是一款在网页中用于输入日期的jQuery插件,它极大地简化了用户在Web应用中选择日期的过程。这款插件提供了多种操作模式,适用于各种网页场景,如预订系统、日历应用等,使得日期...
- 在`tiny-date-picker-master`目录下,我们可能看到源码文件、示例文件、测试用例、构建脚本等,这些都是了解项目结构和开发流程的重要资源。 10. **版本控制与更新**: - 开源项目通常使用Git进行版本控制,...
**jQuery省市区三级联动插件city-picker详解** 在网页开发中,经常需要实现省市区三级联动的效果,即用户选择一个省份后,相应的城市列表自动更新,再选择城市时,对应的区县列表也会随之变化。这种功能可以提升...
jQuery Date Range ...g npm安装gulp v3.9.1(全局安装) npm install -g gulp@3.9.1克隆此项目git clone https://github.com/longbill/jquery-date-range-picker.gitcd jquery-date-range-picker安装本地依赖项npm
时间选择器,可以选择时间段内的时间,有效提高jsp代码
在"date-picker-master"这个压缩包中,我们可以预见到包含了该开源项目的源代码、文档、示例和可能的测试用例。通过阅读源码和相关文档,开发者可以学习到如何配置和使用这个组件,以及如何在自己的项目中实现类似的...
jQuery Date Range Picker是一款允许用户选择一个日期时间范围的jQuery日期选择器插件。整个日期选择器插件使用CSS来渲染样式,可以非常容易的使用CSS来定制它的皮肤。它的兼容性非常好,支持IE6+的IE浏览器。
文件`jquery-date-range-picker-master`很可能包含了插件的主要文件,如`jquery.daterangepicker.js`和相关的CSS样式文件`daterangepicker.css`。 ```html <link rel="stylesheet" type="text/css" href="path/to/...
下载的“city-picker-master”压缩包通常包含了源码、示例、文档等内容。开发者可以研究源码,根据项目需求进行定制化开发,或者直接使用提供的API进行功能调整。 总的来说,city-picker城市选择插件以其易用性、...
Vue.js 是一款非常流行的前端JavaScript框架,...总之,"vue-date-picker-master.zip"包含了一个基于Vue.js的日历组件的完整实现,你可以根据项目需求进行集成和定制,同时利用Vue的特性实现高效且灵活的日期选择功能。
**jQuery-UI-Date-Range-Picker-Plugin-Daterange** 这个文件名可能指的是这个插件的源代码包,包含了插件的JavaScript文件、CSS样式表、示例代码和可能的文档。开发者在下载后,可以参考其中的示例和文档来快速理解...
在这里,`:picker-options`属性是一个对象,用于传递给DateTimePicker的配置项。`step`字段是一个对象,包含`minutes`属性,其值为5表示每5分钟为一个选择间隔。这样,当用户滚动时间选择器时,只会显示5分钟的倍数...
查找v1文档暗模式演示版安装纱yarn add vue-ctk-date-time-picker NPM npm i --save vue-ctk-date-time-picker用法ES6模块/ CommonJS import VueCtkDateTimePicker from 'vue-ctk-date-time-picker' ;import 'vue-...