<!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. 导出CSV格式文件，用Excel打开乱码的解决办法

    导出CSV格式文件,用Excel打开乱码的解决办法 1.治标不治本的办法 将导出CSV数据文件用记事本打开,然后另存为"ANSI"编码格式,再用Excel打开,乱码解决. 但是,这 ...

  2. NetBeans部署项目（Extjs）报错（一）

    NetBeans部署项目(Extjs)报错(一) 1.用NetBeans将项目部署到Tomcat中,报错. 具体如下: ant -f D:\\NetBeans\\workspace\\Foundati ...

  3. hdu5904 LCIS

    这题惩罚我这种经常不管常数的懒人 直接 1e6 TLE 如果1e5对数组枚举过 诶其实很想吐槽些伤心事,但是还是不想在博客上吐口水 不管今年比赛结果如何 请享受比赛 #include<bits/ ...

  4. spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发

     前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...

  5. java创建自定义类的数组

    今天在学图论的最小生成树,开始一直在想是用邻接矩阵还是关联矩阵来表示图,但是发现这样都会有好多空间浪费.于是我就自定义一个边的类,里面包含了权值,关联的端点1,端点2,和图的表示字母.发现我想创建11 ...

  6. 异常-----freemarker.core.NonStringException

    一,案例一 1.1.错误描述 <html> <head> <meta http-equiv="content-type" content=" ...

  7. 【视频编解码·学习笔记】10. 序列参数集（SPS）介绍

    一.SPS 相关概念: SPS即 "Sequence Paramater Set",又称作序列参数集. SPS中保存了一组编码视频序列(Coded video sequence)的 ...

  8. 使用myeclipse出现中文乱码的情况以及解决办法

    一:在jsp页面使用中文在浏览器中显示的时候出现乱码,解决问题的办法: 1)直接在<mete>标签中修改charset属性为"utf-8"或者为"gb2312 ...

  9. [Baltic2004]数字序列

    原题请见<左偏树的特点及其应用>BY 广东省中山市第一中学 黄源河 题意 给出序列\(a[1...n]\),要求构造序列\(b[1...n]\)使得\(\sum_{i=1}^{n}|a_i ...

  10. [Luogu3345][ZJOI2015]幻想乡战略游戏

    Luogu 题意: 动态维护带权重心. sol 这是一道写起来很舒服的动态点分治.(不像某些毒瘤题) 我们考虑,如果你选择的补给点不是当前的带权重心,那么带权重心就在补给点的一个子树中(你把补给点当做 ...