转载:http://codego.net/63433/

jquery-ui 日期选择器datepicker
我想用 jQueryUI 的 DatePicker ,并显示“今天”按钮, 但它不工作,它也不会在演示工作: 我想补今天的输入时,按下此按钮。 是否有可能得到它的工作?
------------------------------------------------------------------------------------------------------------------------- 
1. 他们的代码是不是真的坏了。它只是没有做什么,大多数人会想到它做的。这是今天的日期,进入输入框。它所做的,就是亮点,看看在日历上今天的日期。如果他们离开,再过一个月或一年,日历弹出回到今天的视图 CodeGo.net,而无需取消已选定的日期。 为了使它更加直观,你需要更新插件代码,以满足您的需求。知道如何去。 你需要得到的jQuery UI的JavaScript的版本。我期待在1.7.2版本和“_gotoToday”函数上线6760。只需添加一个调用到该_gotoToday是激发了上线6831的_selectDate()函数。 :)快乐编码。

2. 我不喜欢修改它消除能力的CDN jQuery的源代码的解决方案。相反,你可以通过在你的页面的范围的JavaScript文件的代码(基于@meesterjeeves接听)重新分配_gotoToday函数:

$.datepicker._gotoToday = function(id) {
var target = $(id);
var inst = this._getInst(target[0]);
if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
inst.selectedDay = inst.currentDay;
inst.drawMonth = inst.selectedMonth = inst.currentMonth;
inst.drawYear = inst.selectedYear = inst.currentYear;
}
else {
var date = new Date();
inst.selectedDay = date.getDate();
inst.drawMonth = inst.selectedMonth = date.getMonth();
inst.drawYear = inst.selectedYear = date.getFullYear();
// the below two lines are new
this._setDateDatepicker(target, date);
this._selectDate(id, this._getDateDatepicker(target));
}
this._notifyChange(inst);
this._adjustDate(target);
}

上面的代码基本上是从1.10.1版本的jQuery UI的DatePicker,除了上面标有两行。整个喃喃巨无霸与gotoCurrent因为该选项是没有意义的与我们的“今天”,其实是可以去掉。

3. 就在下面的两行代码添加到_gotoToday函数...

/* Action for current link. */
_gotoToday: function(id) {
var target = $(id);
var inst = this._getInst(target[0]);
if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
inst.selectedDay = inst.currentDay;
inst.drawMonth = inst.selectedMonth = inst.currentMonth;
inst.drawYear = inst.selectedYear = inst.currentYear;
}
else {
var date = new Date();
inst.selectedDay = date.getDate();
inst.drawMonth = inst.selectedMonth = date.getMonth();
inst.drawYear = inst.selectedYear = date.getFullYear();
}
this._notifyChange(inst);
this._adjustDate(target);
/* ### CUSTOMIZATION: Actually select the current date, don't just show it ### */
this._setDateDatepicker(target, new Date());
this._selectDate(id, this._getDateDatepicker(target));
},

4. 虽然我知道这已经被接受,这是我扩展的解决方案基于萨米锌的想法。这个jQuery 1.6.3和jQuery UI 1.8.16,并且工作在Firefox 6。

$('.ui-datepicker-current').live('click', function() {
// extract the unique ID assigned to the text input the datepicker is for
// from the onclick attribute of the button
var associatedInputSelector = $(this).attr('onclick').replace(/^.*'(#[^']+)'.*/gi, '$1');
// set the date for that input to today's date
var $associatedInput = $(associatedInputSelector).datepicker("setDate", new Date());
// (optional) close the datepicker once done
$associatedInput.datepicker("hide");
});

你不妨也blur()该$associatedInput并在接下来的输入/在你的页面中选择,但是这不是容易做到笼统,或者是 作为一个例子,我做了这一个页面我工作表的布局上(不要开始,我知道这是不好的做法!):

$associatedInput.closest('tr').next('tr').find('input,select').first().focus();

5. 我认为处理这一点的最好办法是重写库本身的外侧。这解决的问题

var old_goToToday = $.datepicker._gotoToday
$.datepicker._gotoToday = function(id) {
old_goToToday.call(this,id)
this._selectDate(id)
}

简单,不要求你砍了任何事件或改变任何基础函数

6. 我不喜欢加入额外的代码jQuery的源代码的想法。我不希望覆盖_gotoToday方法,通过在底部复制粘贴其在javascript代码并添加额外的线路。 所以,我调整了这段代码:

(function(){
var original_gotoToday = $.datepicker._gotoToday;
$.datepicker._gotoToday = function(id) {
var target = $(id),
inst = this._getInst(target[0]);
original_gotoToday.call(this, id);
this._selectDate(id, this._formatDate(inst, inst.selectedDay, inst.drawMonth, inst.drawYear));
}
})();

7. 你可以试试下面的代码,以及填补当前日期输入框上点击今天按钮。只要把下面的代码中_gotoToday函数(在函数的末尾)中jquery.ui.datepicker.js。

this._selectDate(id, this._formatDate(inst,
inst.selectedDay, inst.drawMonth, inst.drawYear));

请注意,jQuery的日期选择器的,我1.8.5版本。

8. jQuery UI的DatePicker的今天链接$('button.ui-datepicker-current').live('click', function() { $.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide').blur(); }); 

9. 说什么“今天”按钮,标题可以通过改变

.datepicker('option', 'currentText', 'New Title')

唯一改变显示的月份为电流。这种行为也可以被配置

.datepicker('option', 'gotoCurrent', true);

之后,按下按钮,将显示的月份更改为所选日期的之一。 这似乎提交一个日期与这个按钮是不可能设计。

10. 我添加了一个选项,将日期选择器用于这一目的:selectCurrent。 做你只需要添加下面的js文件: 1)向函数的DatePicker的结束(),添加:

selectCurrent: false // True to select the date automatically when the current button is clicked

2)在_gotoToday函数的末尾,添加:

if (this._get(inst, 'selectCurrent'))
this._selectDate(id, this._formatDate(inst, inst.selectedDay, inst.drawMonth, inst.drawYear));

11. 在日期选择器被重构为至少10多个新版本将解决这个问题。

12. 你也可以尝试把它添加到你的脚本:

$('.ui-datepicker-current').live('click', function() {
$(".datepicker").datepicker("setDate", date);
});

(使用。生活函数,而不是。点击)

13. 我刚摆脱它。 在CSS文件,这就是你的页面的一部分:

.ui-datepicker-current {
visibility:hidden
}

14. 这是曾在datepicker的beforeShow回调函数,而不是活()方法是一个hacker。

  ,beforeShow: function(input, datepicker) {
setTimeout(function() {
datepicker.dpDiv.find('.ui-datepicker-current')
.text('Select Today')
.click(function() {
$(input)
.datepicker('setDate', new Date())
.datepicker('hide');
});
}, 1);
return {};
}

jQuery中的DatePicker今天按钮不起作用的更多相关文章

  1. jquery中使用datepicker限制开始日期小于结束日期

    这里是使用Jquery插件实现的,这段代码来自于网络.感觉很实用,就做笔记记录下来. 原文:http://blog.csdn.net/tianyacao8025/article/details/707 ...

  2. jquery中实现全选按钮

    <html>   <head>   <script type='text/javascript' src='js/jquery-1.5.1.js'></scr ...

  3. jquery中div悬浮嵌套按钮效果

    <div class="btn_sure_cai" style="margin-left: 0px;" onmouseover="show_hi ...

  4. Jquery中$.load(),$.get(),$.post(),$.ajax(),$.getJSON()的作用与不同

    这个五个都是获取页面或者数据的方法.. 都是基于Ajax协议的..   $.get(url,[data],[callback])     //描述: 从服务器加载数据,请求方式为GET.  url   ...

  5. JQuery中$(document)是什么意思有什么作用

    $(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数,因为它可以极大地提高web应用程序的响应速度 首先我解释一下jQuery jQuery有一个用来作为D ...

  6. 【转】jquery 中scrollTop在Firefox下不起作用

    原文链接:http://stackoverflow.com/questions/8149155/animate-scrolltop-not-working-in-firefox Animate scr ...

  7. Jquery UI的datepicker插件使用方法

    原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,并且UI的各部分插件可以独自分离出来使用,这是其他很多Jquery插件没有的 ...

  8. Jquery UI的datepicker插件使用

    原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,而且UI的各部分插件能够独自分离出来使用.这是其它非常多Jquery插件没有 ...

  9. [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...

随机推荐

  1. 一、简介 ELO商户类别推荐有助于了解客户忠诚度

    Elo Merchant Category Recommendation Help understand customer loyalty (ELO商户类别推荐有助于了解客户忠诚度) 竞赛描述: 想象 ...

  2. 最快理解 - IO多路复用:select / poll / epoll 的区别.

    目录 第一个解决方案(多线程) 第二个解决方案(select) 第三个解决方案(poll) 最终解决方案(epoll) 客栈遇到的问题 从开始学习编程后,我就想开一个 Hello World 餐厅,由 ...

  3. 《黑白团团队》第七次作业:团队项目设计完善&编码

    项目 内容 作业课程地址 任课教师首页链接 作业要求 团队项目 填写团队名称 黑白团团队 填写具体目标 认真负责,完成项目 任务1:团队软件项目设计完善 Github仓库上传<软件设计方案说明书 ...

  4. Vue -- element-ui el-table 的合计在第一行显示并可点击

    使用element-ui el-table 中有这样一个需求,需要将合计放在表格内容的第一行,并且点击合计可跳转到其它页面! 框架中提供了合计的属性方法,这样可以进行数值求和及自定义求和,但是,合计那 ...

  5. IDEA解决中文乱码问题

    idea在使用过程中经常会遇到各种乱码问题,网上也有很多解决办法,今天所讲的就是终极解决办法: (1)首先,全局搜索文件 idea64.exe.vmoptions 找到之后,将该行代码复制进去即可   ...

  6. applicationContext-solr.xml

    一.动态切换单机和集群 spring-solr 的配置 <!-- 单机版 solrj --> <bean id = "httpSolrServer" class= ...

  7. JavaScript(DOM编程补充一)

    HTML属性的直接调用: 还可以通过getAttribute方法获取属性的值: setAttribute方法: removeAttribute ---------------------------- ...

  8. 带有public static void main方法的类,其中的成员变量必须是static的,否则main方法没法调用。除非是main里的局部变量。因为main方法就是static的啊。

    带有public static void main方法的类,其中的成员变量必须是static的,否则main方法没法调用.除非是main里的局部变量.因为main方法就是static的啊.

  9. java多线程具体总结

    一.Thread.start()与Thread.run()的差别 通过调用Thread类的start()方法来启动一个线程.这时此线程是处于就绪状态,并没有运行.然后通过此Thread类调用方法run ...

  10. iOS推送 (百度推送)

    近期在使用推送,所以与大家分享一下我所遇到的问题,与解决这个问题的方法.! 1.首先生成CertificateSigningRequest文件. 点击钥匙串訪问-->从证书颁发机构请求证书--& ...