`
luck_stone
  • 浏览: 11132 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Simple jQuery Date-picker Plugin做jQuery的日历控件

阅读更多
   最近开发用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 使用

    对于“simple jQuery date-picker plugin”,它是基于jQuery的一个日期选择插件,它提供了基本的日期选择功能,适用于那些不需要复杂日历功能的项目。以下是使用这个插件的关键步骤: 1. **引入资源**:在HTML文件...

    修改后的simple jQuery date-picker plugin,支持中文

    在众多的`jQuery`日期选择器插件中,`simple jQuery date-picker plugin`因其简洁易用而受到欢迎。这个插件提供了基本的日期选择功能,并且可以轻松地自定义样式和行为,满足开发者不同的需求。 **中文支持** 在...

    再次修改的jQuery日期弹出层Simple jQuery Date-picker Plugin

    上次已经传过一个,这次修改更加彻底,更加方便,更加符合国内开发者使用。具体修改如下: 1、修改星期几为中文显示 2、修改日期显示,由之前的月/日/年,改为年/月/日 3、新增参数sign,可修改中间的间隔符。...

    elementui elementUI - date-picker.zip

    :picker-options="{ 步步长: 15 }" placeholder="选择日期时间"&gt; &lt;/el-date-picker&gt; ``` 这里的 `step` 属性就是用于设置时间选择器的时间步长,值为15表示每点击一次,时间会增加或减少15分钟。 除了 `step`...

    vue element-ui el-date-picker限制选择时间为当天之前的代码

    本文的核心知识点是探讨如何使用`el-date-picker`组件,并通过`picker-options`属性来限制选择的日期必须是当天之前的时间。我们将会深入解析代码示例、API用法以及实现原理。 首先,`el-date-picker`组件是Element...

    最全 element UI el-date-picker组件换色(less)

    element UI el-date-picker组件样式更改 popper-class="down-time" 原码是body下的弹出器

    el-date-picker 英文改中文.doc

    https://blog.csdn.net/xuelang532777032/article/details/121287203,内有博客截图,方便没有vip的小伙伴下载

    date-picker 基本jquery的时间插件

    "date-picker 基本jquery的时间插件"是一款在网页中用于输入日期的jQuery插件,它极大地简化了用户在Web应用中选择日期的过程。这款插件提供了多种操作模式,适用于各种网页场景,如预订系统、日历应用等,使得日期...

    前端项目-tiny-date-picker.zip

    - 在`tiny-date-picker-master`目录下,我们可能看到源码文件、示例文件、测试用例、构建脚本等,这些都是了解项目结构和开发流程的重要资源。 10. **版本控制与更新**: - 开源项目通常使用Git进行版本控制,...

    jQuery省市区三级联动插件city-picker

    **jQuery省市区三级联动插件city-picker详解** 在网页开发中,经常需要实现省市区三级联动的效果,即用户选择一个省份后,相应的城市列表自动更新,再选择城市时,对应的区县列表也会随之变化。这种功能可以提升...

    jquery-date-range-picker:一个jQuery插件,允许用户选择日期范围

    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

    date-picker_date-picker_时间选择_

    时间选择器,可以选择时间段内的时间,有效提高jsp代码

    date-picker

    在"date-picker-master"这个压缩包中,我们可以预见到包含了该开源项目的源代码、文档、示例和可能的测试用例。通过阅读源码和相关文档,开发者可以学习到如何配置和使用这个组件,以及如何在自己的项目中实现类似的...

    jquery-date-range-picker-master

    jQuery Date Range Picker是一款允许用户选择一个日期时间范围的jQuery日期选择器插件。整个日期选择器插件使用CSS来渲染样式,可以非常容易的使用CSS来定制它的皮肤。它的兼容性非常好,支持IE6+的IE浏览器。

    jQuery Date Range Picker

    文件`jquery-date-range-picker-master`很可能包含了插件的主要文件,如`jquery.daterangepicker.js`和相关的CSS样式文件`daterangepicker.css`。 ```html &lt;link rel="stylesheet" type="text/css" href="path/to/...

    city-picker城市选择插件

    下载的“city-picker-master”压缩包通常包含了源码、示例、文档等内容。开发者可以研究源码,根据项目需求进行定制化开发,或者直接使用提供的API进行功能调整。 总的来说,city-picker城市选择插件以其易用性、...

    vue-date-picker-master.zip

    Vue.js 是一款非常流行的前端JavaScript框架,...总之,"vue-date-picker-master.zip"包含了一个基于Vue.js的日历组件的完整实现,你可以根据项目需求进行集成和定制,同时利用Vue的特性实现高效且灵活的日期选择功能。

    jquery Date Range Picker

    **jQuery-UI-Date-Range-Picker-Plugin-Daterange** 这个文件名可能指的是这个插件的源代码包,包含了插件的JavaScript文件、CSS样式表、示例代码和可能的文档。开发者在下载后,可以参考其中的示例和文档来快速理解...

    vue+element-ui DateTimePicker组件分钟设置步长step

    在这里,`:picker-options`属性是一个对象,用于传递给DateTimePicker的配置项。`step`字段是一个对象,包含`minutes`属性,其值为5表示每5分钟为一个选择间隔。这样,当用户滚动时间选择器时,只会显示5分钟的倍数...

    vue-ctk-date-time-picker:VueJS组件选择日期和时间,包括范围模式

    查找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-...

Global site tag (gtag.js) - Google Analytics