JQuery.fn.extend ({
Weektoint:function (week) {
if (week = = = ' Mon ') {
return 1;
}else if (week = = = ' Tue ') {
return 2;
}else if (week = = = ' Wed ') {
return 3;
}else if (week = = = ' Thu ') {
return 4;
}else if (week = = = ' Fri ') {
return 5;
}else if (week = = = ' Sat ') {
return 6;
}else if (week = = ' Sun ') {
return 7;
}
return 0;
},
Fromdate:function (date) {
var rs = {};
var ds = Date.tostring (). Split ("");
Rs.week = This.weektoint (Ds[0]);
Rs.day = ds[2];
Rs.year = ds[3];
Rs.month = Date.getmonth () + 1;
Rs.hour = Date.gethours ();
Rs.minutes = Date.getminutes ();
Rs.seconds = Date.getseconds ();
Return RS;
},
Nextday:function (date) {
var vals = date.valueof ();
var day = 24 * 60 * 60 * 1000;
return new Date (Vals + day);
},
Previousday:function (date) {
var vals = date.valueof ();
var day = 24 * 60 * 60 * 1000;
return new Date (Vals-day);
},
Firstdayofmonth:function (date) {
var ds = this.fromdate (date);
return new Date (Date.parse (ds.year + "-" + Ds.month + "-01"));
},
Getprop:function (config, prop, def) {
if (config! = undefined && config! = null && config[prop]! = undefined && Config[prop]! = null) {
return Config[prop];
}
return def;
},
Datepicker:function (config) {
/* Join the display unit */
var $this = this;
var div = document.createelement ("div");
var table = document.createelement ("table");
var tbody = document.createelement ("tbody");
var ishover = false;
var row = 6;
var col = 7;
$ (div). append (table). AppendTo ($ (this). Parent ()). CSS ({
Position: ' Absolute ',
Display: $this. getprop (config, ' display ', ' none '),
Top: $this. Position (). Top + parseint ($this. css (' height ')) + 7,
Left: $this. Position ().
}). MouseLeave (function () {
Ishover = false;
SetTimeout (function () {
if (!ishover) {
$ (div). css (' Display ', ' none ');
}
}, 1000);
}). mouseover (function () {
Ishover = true;
});
$ (table). CSS ({
Width: $this. getprop (config, ' width ', ' 300px '),
Height: $this. getprop (config, ' height ', ' 200px '),
TextAlign: $this. getprop (config, ' textAlign ', ' center '),
BackgroundColor: $this. getprop (config, ' backgroundcolor ', ' #FFF '),
Font: $this. getprop (config, ' font ', ' 11px Microsoft Ya Black '),
Color: $this. getprop (config, ' color ', ' #000 ')
}). attr ({
cellspacing: ' 0 ',
cellpadding: ' 0 '
}). Append ($ (tbody). CSS ({
Width: ' 100% ',
Height: ' 100% '
}));
for (var i = 0; i < row; i++) {
var tr = document.createelement ("tr");
for (var j = 0; J < Col; J + +) {
var tag = j;
if (j = = 0) {
tag = col;
}
var td = Document.createelement ("TD");
var hidden = document.createelement ("input");
var span = document.createelement ("span");
$ (hidden). attr ({
Name: ' Weektag ',
Type: ' Hidden '
}). val (tag);
$ (TD). Append (Hidden). Live (' click ', function () {
$this. Val (this). Find (' span '). EQ (0). html ());
}). css ({
Width:parseint (parseint ($ (table). css (' width '))/col)-1 + ' px ',
Height:parseint (parseint ($ (table). css (' height '))/row)-1 + ' px ',
Borderleft: $this. getprop (config, ' border ', ' 1px solid '),
BorderTop: $this. getprop (config, ' border ', ' 1px solid '),
BorderColor: $this. getprop (config, ' bordercolor ', ' #0EF '),
Cursor: $this. getprop (config, ' cursor ', ' pointer ')
}). mouseover (function () {
var fontSize = parseint ($ (this). CSS ("fontSize"));
$ (this). CSS ({
FontSize: (fontSize + 6) + ' px '
});
}). MouseLeave (function () {
var fontSize = parseint ($ (this). CSS ("fontSize"));
$ (this). CSS ({
FontSize: (fontSize-6) + ' px '
});
}). Append ($ (span). addclass ("_day"));
if (i = = (row-1)) {
$ (TD). CSS ({
BorderBottom: $this. getprop (config, ' border ', ' 1px solid '),
BorderColor: $this. getprop (config, ' bordercolor ', ' #0EF ')
});
}
if (j = = (Col-1)) {
$ (TD). CSS ({
BorderRight: $this. getprop (config, ' border ', ' 1px solid '),
BorderColor: $this. getprop (config, ' bordercolor ', ' #0EF ')
});
}
$ (TR). Append (TD);
}
$ (tbody). Append (tr);
}
Date Modified
var modifydatepicker = function (date) {
var first = $this. Firstdayofmonth (date);
var firstdate = $this. FromDate ($this. Firstdayofmonth (date));
var next = $this. NextDay (first);
var nextdate = $this. FromDate (next);
var isfoundfirst = false;
var $trs = $ (tbody). Find ("tr");
for (var i = 0; i < $trs. length; i++) {
var $tr = $ ($trs [i]);
var $tds = $tr. Find ("TD");
for (var j = 0; J < $tds. length; j + +) {
var $td = $ ($tds [j]);
var Weektag = $td. Find ("Input[name=weektag]"). EQ (0). Val ();
var span = $td. Find ('. _day '). EQ (0);
if (!isfoundfirst) {
if (parseint (firstdate.week) = = parseint (Weektag)) {
$ (span). HTML (firstdate.day);
Isfoundfirst = true;
}
}else{
if (nextdate.month! = firstdate.month) {
$ (span). CSS ({
Color: ' Gray '
});
}
$ (span). HTML (nextdate.day);
Next = $this. NextDay (next);
Nextdate = $this. FromDate (next);
}
}
}
};
Modifydatepicker (New Date ());
/* Handling Events */
This.live (' click ', function () {
var display = $ (div). css ("display");
if (display = = ' block ') {
display = ' None ';
}else{
display = ' block ';
};
$ (div). css ({
Display:display
});
}). attr ({
ReadOnly: $this. Getprop (config, ' readonly ', ' false ')
}). css ({
Cursor: ' pointer '
}). val ("1989-09-11");
}
});
var MD = Angular.module ("myApp", []);
Md.directive (' Ngdate ', function () {
return {
Restrict: ' A ',
Compile:function (element,attributes) {
$ (Element). DatePicker ({
BorderColor: ' #0AE ',
Readonly:false
});
}
}
}). controller ("Maincontroller", function ($scope) {
$scope. user = {};
$scope. User.username = ' Bond ';
$scope. user.age = 24;
$scope. User.birthday = ' 1989-8-12 ';
});
Angular instruction and jquery combination
