<!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" rel="external nofollow" />
<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>
