`
luck_stone
  • 浏览: 10432 次
  • 性别: 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>
附上源文件,供大家下载,详细查看。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics