<!doctype html>

<html >

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <title>

    KNOCKOUT LESSON

  </title>

  <link rel="stylesheet" type="text/css" href="css/main.css" />

  <style>

  #content1{padding:16px;}

  </style>

  <script type="text/javascript" src="scripts/knockout30.js"></script>

</head>

<body>

    <div id="content1">

        Year:<input data-bind="value:Year"><br/>

        Month:<input data-bind="value:Month"><br/>

        Day:<input data-bind="value:Day"><br/>

        Date:<span data-bind="html: Date " ></span><br/>

        <!--Date:<span data-bind="html:Year()+'-'+Month()+'-'+Day()"></span>-->

        <input data-bind="value:Date" />

    </div>

    <script type="text/javascript" src="scripts/jQuery183.js"></script>

    <script>

        $(document).ready(function(){

            var  ViewModel = function(){

                var self = this;

                self.Year = ko.observable("");

                self.Month = ko.observable("");

                self.Day = ko.observable("");

//                self.Date = ko.computed(function(){

//                    return self.Year()+'年'+self.Month()+'月'+self.Day()+'日';

//                });

                self.Date = ko.pureComputed({

                    write: function(value){

                        var indexOfYear = value.indexOf('年');

                        var indexOfMonth=value.indexOf('月');

                        var indexOfDay=value.indexOf('日');

                        self.Year(value.substring(,indexOfYear));

                        self.Month(value.substring(indexOfYear+,indexOfMonth));

                        self.Day(value.substring(indexOfMonth+,indexOfDay));

                    },

                    read: function(){

                        return self.Year()+'年'+self.Month()+'月'+self.Day()+'日';

                    },

                    owner:self

                });

            };

            var  currentViewModel = new ViewModel();

            ko.applyBindings(currentViewModel);

        });

    </script>

</body>

</html>

使用正则过滤：当输入的是不符合规则的日期时：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style>

            #content1{padding: 20px;}

        </style>

    </head>

    <body>

        <div id="content1">

            Year:<input data-bind="value:Year" /><br />

            Month:<input data-bind="value:Month" /><br />

            Day:<input data-bind="value:Day" /><br />

            Date:<span data-bind="html:Date"></span><br />

            <input data-bind="value:Date" />

        </div>

        <script src="scripts/jQuery183.js"></script>

        <script src="scripts/knockout30.js"></script>

    <script>

        $(document).ready(function(){

            var  ViewModel = function(){

                var self = this;

                self.Year = ko.observable("");

                self.Month = ko.observable("");

                self.Day = ko.observable("");

//                self.Date = ko.computed(function(){

//                    return self.Year()+'年'+self.Month()+'月'+self.Day()+'日';

//                });

                self.Date = ko.pureComputed({

                    write: function(value){

                        var indexOfYear = value.indexOf('年');

                        var indexOfMonth=value.indexOf('月');

                        var indexOfDay=value.indexOf('日');

                        var year = value.substring(,indexOfYear);

                        self.Year(year);

                        if(!/^\d()$/.test(year)){

                            alert('请输入四位阿拉伯数字的年份');

                            return false;

                        }

                        var month = value.substring(indexOfYear+,indexOfMonth);

                        self.Month(month);

                        if(!/^[-][-]$/.test(month)){

                            alert('请输入合法月份数字');

                            return false;

                        }

                        var day = value.substring(indexOfMonth+,indexOfDay);

                        self.Day(day);

                        if(!/^[-][-]$/.test(day)){

                            alert('请输入合法天数数字');

                            return false;

                        }

                    },

                    read: function(){

                        return self.Year()+'年'+self.Month()+'月'+self.Day()+'日';

                    },

                    owner:self

                });

            };

            var  currentViewModel = new ViewModel();

            ko.applyBindings(currentViewModel);

        });

    </script>

    </body>

</html>

Konckout第四个实例：组合类型数据绑定 -- 日期双向绑定显示的更多相关文章

  1. Windows 8实例教程系列 - 数据绑定基础实例

    原文:Windows 8实例教程系列 - 数据绑定基础实例 数据绑定是WPF,Silverlight以及Windows Phone应用开发中最为常用的开发技术,在基于XAML的Windows Stor ...

  2. Windows 8实例教程系列 - 数据绑定高级实例

    原文:Windows 8实例教程系列 - 数据绑定高级实例 上篇Windows 8实例教程系列 - 数据绑定基础实例中,介绍Windows 8应用开发数据绑定基础,其中包括一些简单的数据绑定控件的使用 ...

  3. 【转】四、可空类型Nullable<T>到底是什么鬼

    [转]四.可空类型Nullable<T>到底是什么鬼 值类型为什么不可以为空 首先我们都知道引用类型默认值都是null,而值类型的默认值都有非null. 为什么引用类型可以为空?因为引用类 ...

  4. c# (ENUM)枚举组合类型的谷歌序列化Protobuf

    c# (ENUM)枚举组合类型的谷歌序列化Protobuf,必须在序列化/反序列化时加上下面: RuntimeTypeModel.Default[typeof(Alarm)].EnumPassthru ...

  5. Effective Objective-C 2.0 — 第四条：多用类型常量，少用#define预处理指令

    第四条:多用类型常量,少用#define预处理指令 使用#define 预处理的坏处:定义出来的常量没有类型信息,编译器只是会在编译前据此执行查找与替换操作.即使有人重新定义了常量值,编译器也不会产生 ...

  6. LoaderManager使用详解（四）---实例：AppListLoader

    实例:AppListLoader   这篇文章将是我的第四篇,也就是最后一篇该系列的文章.请在评论里面告诉我他们是否有用.前面几篇文章的链接如下:   一:Loaders之前世界 二:了解Loader ...

  7. WCF分布式开发步步为赢(9):WCF服务实例激活类型编程与开发

    .Net Remoting的激活方式也有三种:SingleTon模式.SingleCall模式.客户端激活方式,WCF服务实例激活类型包括三种方式:单调服务(Call Service),会话服务(Se ...

  8. { MySQL基础数据类型}一 介绍 二 数值类型 三 日期类型 四 字符串类型 五 枚举类型与集合类型

    MySQL基础数据类型 阅读目录 一 介绍 二 数值类型 三 日期类型 四 字符串类型 五 枚举类型与集合类型 一 介绍 存储引擎决定了表的类型,而表内存放的数据也要有不同的类型,每种数据类型都有自己 ...

  9. Mybatis 实用篇（四）返回值类型

    Mybatis 实用篇(四)返回值类型 一.返回 List.Map List<User> getUsers(); <select id="getUsers" re ...

随机推荐

  1. Android HTTP请求用HttpUrlConnection与HttpClient比较

    在安卓和JAVA应用开发中需要访问网络,少不了要提交HTTP请求,而基本上目前有两个实现方式:HttpUrlConnection(即URL.openConnection)和HttpClient. 网上 ...

  2. R语言︱排序问题

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 数据排序 1.sort(),rank(),or ...

  3. 碎片︱R语言与深度学习

    笔者:受alphago影响,想看看深度学习,但是其在R语言中的应用包可谓少之又少,更多的是在matlab和python中或者是调用.整理一下目前我看到的R语言的材料: ---------------- ...

  4. JSP标签c:forEach报错（一）

    1.jsp标签c:forEach报错,具体错误如下: 三月 31, 2014 9:31:14 下午 org.apache.catalina.core.StandardWrapperValve invo ...

  5. Error 1313: RETURN is only allowed in a FUNCTION SQL Statement

    1.错误描述 14:07:26 Apply changes to rand_string Error 1313: RETURN is only allowed in a FUNCTION SQL St ...

  6. java.sql.SQLException:ORA-01861:文字和格式字符串不匹配

    1.错误描述 java.sql.SQLException:ORA-01861:文字和格式字符串不匹配 2.错误原因 字段名为statis_date在数据库中存储的数据类型是Date,而在Java中拼接 ...

  7. IIS易混概念小结

    IIS连接数 常识: 虚拟主机会限制IIS连接数,关于其含义,差不多每个主机供应商都有一套自己的说法,微软也没有给出很明确的解释: 含义: IIS服务器可以同时容纳客户请求的最高连接数,准确的说应该叫 ...

  8. Hibernate最全面试题

    Hibernate常见面试题 Hibernate工作原理及为什么要用? Hibernate工作原理及为什么要用? 读取并解析配置文件 读取并解析映射信息,创建SessionFactory 打开Sess ...

  9. CF#462 div1 D：A Creative Cutout

    CF#462 div1 D:A Creative Cutout 题目大意: 原网址戳我! 题目大意: 在网格上任选一个点作为圆中心,然后以其为圆心画\(m\)个圆. 其中第\(k\)个圆的半径为\(\ ...

  10. 【BZOJ1189】紧急疏散（二分答案，最大流）

    [BZOJ1189]紧急疏散(二分答案,最大流) 题面 Description 发生了火警,所有人员需要紧急疏散!假设每个房间是一个N M的矩形区域.每个格子如果是'.',那么表示这是一块空地:如果是 ...