<!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. dojo表格分页插件报错

    dojo表格分页插件报错 (1)dojo/parser::parse() error ReferenceError {stack:(...),message:"layout is not d ...

  2. Linux以列表格式显示块设备

    Linux以列表格式显示块设备 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ lsblk -l NAME MAJ:MIN RM SIZE RO TYPE MO ...

  3. 下载安装eclipse

    其实在配置好jdk之后,只要下载eclipse压缩包下载完解压就行了.很多人在eclipse官网上下载的安装包版本的,下载完了之后又不知道怎么安装.下面我给大家介绍以下如何下载eclipse的Oxyg ...

  4. TCP/IP资料整理

    一.概念 1. TCP/IP常见帧格式 2. 详解网络嗅探工具的原理 二.API 1. Linux kernel tcp 连接建立详解——由listen系统调用的backlog参数引发的长篇大论

  5. 一篇关于PHP性能的文章

    一篇关于PHP性能的文章 昨晚清理浏览器收藏夹网址时,发现了http://www.phpbench.com/,想起来应该是2015年发现的一个比较性能的文章,我就点进去看了看,发现还是全英文耶,刚好最 ...

  6. View的放大->旋转->还原动画

    以UIButton为例,创建一个类,继承于UIButton /*页面的创建用storyboard*/ .h文件  @interface PTSRecommendButton : UIButton - ...

  7. 【洛谷3047】[USACO12FEB]附近的牛Nearby Cows

    题面 题目描述 Farmer John has noticed that his cows often move between nearby fields. Taking this into acc ...

  8. vue 父组件与子组件的通信

    参考博客地址:http://www.cnblogs.com/okaychen/p/7674211.html,很详细!

  9. Python中的栈溢出及解决办法

    1.递归函数 在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数. 举个例子,我们来计算阶乘n! = 1 x 2 x 3 x ... x n,用函数fact(n)表示, ...

  10. wireshark抓包看ECN

    由于实验需要,要统计ECN信息.为了验证拓扑中是否真的有ECN信息,用了wireshark进行抓包查看. 网上找到的相关有用资料有:http://blog.csdn.net/u011414200/ar ...