<!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. 安装JBoss Tool 出错

    安装JBoss Tool 出错 具体报错如下:

  2. ClientAbortException: java.net.SocketException: Software caused connection abort: socket write erro

    1.错误描述 ClientAbortException: java.net.SocketException: Software caused connection abort: socket writ ...

  3. Hibernate中的条件查询完成类

    Hibernate中的条件查询有以下三个类完成: 1.Criteria:代表一次查询 2.Criterion:代表一个查询条件 3.Restrictions:产生查询条件的工具类

  4. directX根据设备类GUID查询所属的filter

    hr = m_pSysDevEnum->CreateClassEnumerator(*clsid, &pEnumCat, 0);    ASSERT(SUCCEEDED(hr));    ...

  5. 芝麻HTTP：Python爬虫实战之爬取糗事百科段子

    首先,糗事百科大家都听说过吧?糗友们发的搞笑的段子一抓一大把,这次我们尝试一下用爬虫把他们抓取下来. 友情提示 糗事百科在前一段时间进行了改版,导致之前的代码没法用了,会导致无法输出和CPU占用过高的 ...

  6. Visio如何调整锁定图像大小

    在Visio中,比如模板中的UML类图,是不可调整大小的,这可能给我们设计图片带来了一些不便之处,如下图: 可以看到其边框是显示锁定状态无法修改的,当我们在左下角修改器长宽时,也会出现不可修改的情况. ...

  7. PHP 数组模糊查询

    function search() { $a=array( '0' => array('id'=>1,'pid'=>0,'name'=>'水果'), '1' => arr ...

  8. 十年Java开发程序员回答，自学Java，培训Java的利和弊

    最近有一个朋友在群里面问我:是应该去培训Java还是应该自学Java,我想的说的是我并不是想给他一个去培训或者不去培训,我用自己多年对于行业的了解去分析这个问题,然后让他自己去思考,哪种更加适合他.他 ...

  9. 深度学习框架： Keras官方中文版文档正式发布

    今年 1 月 12 日,Keras 作者 François Chollet‏ 在推特上表示因为中文读者的广泛关注,他已经在 GitHub 上展开了一个 Keras 中文文档项目.而昨日,Françoi ...

  10. Luogu 睡觉困难综合征 ([NOI2014]起床困难综合症)

    一.[NOI2014]起床困难综合症 题目描述 网址:https://daniu.luogu.org/problemnew/show/2114 大意: 有一条链,链上每一个节点包含一个位运算f 与 一 ...