ko.bindingHandlers.datepicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {},
$el = $(element); $el.datepicker(options); //handle the field changing
ko.utils.registerEventHandler(element, "change", function () {
var observable = valueAccessor();
observable($el.datepicker("getDate"));
}); //handle disposal (if KO removes by the template binding)
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$el.datepicker("destroy");
}); },
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor()),
$el = $(element); //handle date data coming via json from Microsoft
if (String(value).indexOf('/Date(') == 0) {
value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
} var current = $el.datepicker("getDate"); if (value - current !== 0) {
$el.datepicker("setDate", value);
}
}
};
<input data-bind="datepicker: myDate, datepickerOptions: { minDate: new Date() }" />

http://stackoverflow.com/questions/6399078/knockoutjs-databind-with-jquery-ui-datepicker

js例子

http://jsfiddle.net/rniemeyer/NAgNV/

datepicker的api

http://api.jqueryui.com/datepicker/

knockout 绑定 jquery ui datepicker (转)的更多相关文章

  1. JQuery UI datepicker 使用方法(转)

    官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/. 一个不错的地址,用来DIY ...

  2. 页面日期选择控件--jquery ui datepicker 插件

    日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等.官方地址:http://docs.jquery.com ...

  3. jQuery UI Datepicker使用介绍

    本博客使用Markdown编辑器编写 在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件.jQuery UI带的Datepicker,日历控件能满足大多数场景开发需要.本文就主要讨 ...

  4. jQuery UI Datepicker&Datetimepicker添加 时-分-秒 并且,判断

    jQuery UI Datepicker时间(年-月-日) 相关代码: <input type="text" value="" name="ad ...

  5. 坑爹的jquery ui datepicker

    1.坑爹的jquery ui datepicker 竟然不支持选取时分秒,害的我Format半天 期间尝试了bootstrap的ditepicker,但是不起作用,发现被jquery ui 覆盖了, ...

  6. [转]Using the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVC - Part 4

    本文转自:http://www.asp.net/mvc/overview/older-versions/using-the-html5-and-jquery-ui-datepicker-popup-c ...

  7. jQuery UI datepicker z-index默认为1 怎么处理

    最近在维护一个后台系统的时候遇到这样的一个坑:后台系统中日期控件使用的是jQuery UI datepicker. 这个控件生成的日期选择框的z-index = 1.问题来了.页面上有不少z-inde ...

  8. Jquery UI - DatePicker 在Dialog中无法自动隐藏的解决思路

    通过Jquery UI Dialog模态展示如下的一个员工编辑页面,但是遇到一个奇怪的问题:点击Start Date的input元素后,其无法失去焦点.从而导致DatePicker控件在选择日期后无法 ...

  9. jQuery UI Datepicker

    http://www.runoob.com/try/try.php?filename=jqueryui-example-datepicker-dropdown-month-year <!doct ...

随机推荐

  1. javascript实现暂停

    <!DOCTYPE HTML><html> <head>  <title> New Document </title>  <meta ...

  2. python 实现文件批量拷贝

    场景:某个文件夹下面包含数量巨大的文件,需求需要将这些文件按组(比如5000个一组)存放到不同的目录中去. # Filename: CopyFiles.py import os import os.p ...

  3. .NET基础之自定义泛型

    在.NET中泛型使用非常频繁,在控制台应用程序中,默认的引入了System.Collection.Generics名称空间,其中就提供了我们经常使用的泛型:List<T>和Dictiona ...

  4. EXTJS 4.2 资料 控件textfield中fieldLabel去掉冒号,控件label的长度

    代码: labelSeparator: '', // 去掉laebl中的冒号 labelWidth: 10,//控件label的长度

  5. Sugarcrm Email Integration

    Introdurce http://www.sugarcrm.com/feature/email-integration Tutor http://www.youtube.com/watch?v=BQ ...

  6. submit与button区别提交区别

    提交表单时使用submit会自动提交form表单数据, 如果使用jquery的form表单插件时需要将提交按钮改为button时$("#表单id").ajaxSubmit({}); ...

  7. setPreferredSize和setSize的区别及用法

    我以前很喜欢borderlayout的布局方式,每次想特别调整每个区域的大小,但是每次将一个panel放入到north或者其他4个区域时,总是达不到想要的效果,刚刚才发现原来setPreferredS ...

  8. mybatis的javaType和ofType

    都是指定对象的类型 不同的是当使用反向查询select从另一个maper文件中取出数据时必须用ofType 都可以为collection和association是指定对象的类型, 都不是必须写的, 只 ...

  9. HTML网页中添加音频视频动画...(转)

    在网页中适当嵌入音频和视频能够充分显示网页的多媒体特性,特别是随着宽带网的普及,使得网络广播和网络视频成为现实,网页音频和视频的重要性也日益突显.具体来说,网页音频和视频的嵌入方法主要有三种: 一.b ...

  10. 把Ubuntu打造成Mac Macbuntu

    Macbuntu:把 Ubuntu 一键打造成完整的 Mac 风格 23八 2010 # 作者:riku/ 本文采用CC BY-NC-SA 2.5协议授权,转载请注明本文链接. Macbuntu 是一 ...