<!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. HI3531例子程序说明

    Hisilicon Hi35xx 样例程序使用说明 1. 样例程序文件结构说明    sample            # MPP 样例程序     |-- common       # hi35x ...

  2. weblogic部署web项目出现错误

    1.错误描述 <2015-3-15 下午02时13分01秒 CST> <Info> <Security> <BEA-090905> <Disabl ...

  3. Hibernate【映射】知识要点

    前言 前面的我们使用的是一个表的操作,但我们实际的开发中不可能只使用一个表的...因此,本博文主要讲解关联映射 集合映射 需求分析:当用户购买商品,用户可能有多个地址. 数据库表 我们一般如下图一样设 ...

  4. freemarker基本数据类型（十一）

    freemarker基本数据类型 1.基本数据类型 (1)字符串 (2)数字 (3)布尔值 (4)日期 2.展示示例 <html> <head> <meta http-e ...

  5. sqoop将mysql连表查询结果导入hdfs文件

    sqoop import --connect jdbc:mysql://ip/数据库 --username 用户名 --password 密码 --query " select p.bidN ...

  6. 【BZOJ2049】洞穴勘测（Link-Cut Tree）

    [BZOJ2049]洞穴勘测(Link-Cut Tree) 题面 题目描述 辉辉热衷于洞穴勘测. 某天,他按照地图来到了一片被标记为JSZX的洞穴群地区.经过初步勘测,辉辉发现这片区域由n个洞穴(分别 ...

  7. 【BZOJ1207】【HNOI2004】打鼹鼠（动态规划）

    [BZOJ1207][HNOI2004]打鼹鼠 题面 BZOJ题面 题解 考虑到m的范围只有10000 O(m^2)的复杂度是可以接受的 所以直接暴力DP 每次枚举前面出现的鼹鼠 检查是否能够转移过来 ...

  8. chkconfig命令核心案列及核心原理

    chkconfig sshd on  设置sshd开机自启动 chkconfig sshd off  设置sshd开机不启动 chkconfig --level 35 sshd on    设置ssh ...

  9. 【2016北京集训测试赛】river

    HINT 注意是全程不能经过两个相同的景点,并且一天的开始和结束不能用同样的交通方式. [吐槽] 嗯..看到这题的想法的话..先想到了每个点的度为2,然后就有点不知所措了 隐隐约约想到了网络流,但并没 ...

  10. C# 委托Delegate的使用 笔记

    使用delegate总是一头雾水,记录一下笔记,备忘. 主要用于线程间操作UI上的控件,以便使用.或者是大家统一操作入口使用. using System.Windows.Forms; namespac ...