001.<!DOCTYPE html>
002.<html>
003.
004.<head>
008. <script type="text/javascript" src="date.js"></script>
009.
010. <style>
011. label {display: inline-block; width: 100px; text-align: right; font-weight: bold; color: blue;}
012. input[type='text'] {width: 250px; padding: 2px; margin: 3px;}
013. </style>
014.
015. <meta charset="utf-8">
016. <title>Calculate Your Age</title>
017.</head>
018.
019.<body>
020. <script type="text/javascript">
021. $(function () {
022. $(document).ready(function () {
023. $('#txtDate').datepicker({
024. changeYear: true,
025. dateFormat: 'd-M-yy',
026. yearRange: "-100:+0",
027. onClose: function () {
028.
029. var txtDate;
030. var sum;
031.
032. if($("#txtDate").val() != '') {
033. txtDate = $("#txtDate").val();
034. sum = cal_workyears(txtDate);
035. $("#txtAge").val(sum);
036. }else {
037.
038. }
039.
040.
041. }
042. });
043. });
044. });
045.
046.
047.function cal_workyears(dateString) {
048.
049. var today = new Date();
050. var yearNow = today.getFullYear();
051. var monthNow = today.getMonth();
052. var dateNow = today.getDate();
053.
054. var dob = Date.parse(dateString);
055.
056. var yearDob = dob.getFullYear();
057. var monthDob = dob.getMonth();
058. var dateDob = dob.getDate();
059. var age = {};
060. var ageString = "";
061. var yearString = "";
062. var monthString = "";
063. var dayString = "";
064.
065.
066. yearAge = yearNow - yearDob;
067.
068. if(monthNow >= monthDob) {
069. var monthAge = monthNow - monthDob;
070. }else {
071. yearAge--;
072. var monthAge = 12 + monthNow - monthDob;
073. }
074.
075. if(dateNow >= dateDob) {
076. var dateAge = dateNow - dateDob;
077. }else {
078. monthAge--;
079. var dateAge = 31 + dateNow - dateDob;
080.
081. if(monthAge < 0) {
082. monthAge = 11;
083. yearAge--;
084. }
085. }
086.
087.
088. age = {years: yearAge, months: monthAge, days: dateAge};
089.
090. if( age.years > 1 ){
091. yearString = " Years";
092. }else {
093. yearString = " Year";
094. }
095.
096. if( age.months> 1 ) {
097. monthString = " Months";
098. }else {
099. monthString = " Month";
100. }
101.
102. if( age.days > 1 ) {
103. dayString = " Days";
104. }else {
105. dayString = " Day";
106. }
107.
108.
109. if( (age.years > 0) && (age.months > 0) && (age.days > 0) ) {
110. ageString = age.years + yearString + " " + age.months + monthString + " " + age.days + dayString;
111. }else if( (age.years == 0) && (age.months == 0) && (age.days > 0) ) {
112. ageString = age.days + dayString;
113. }else if( (age.years > 0) && (age.months > 0) && (age.days == 0) ) {
114. ageString = age.years + yearString + " " + age.months + monthString;
115. }else if( (age.years == 0) && (age.months > 0) && (age.days > 0) ) {
116. ageString = age.months + monthString + " " + age.days + dayString;
117. }else if( (age.years > 0) && (age.months == 0) && (age.days > 0) ) {
118. ageString = age.years + yearString + " " + age.days + dayString;
119. }else if( (age.years == 0) && (age.months > 0) && (age.days == 0) ) {
120. ageString = age.months + monthString;
121. }else {
122. ageString = "";
123. }
124.
125. return ageString;
126.
127.}
128.
129.</script>
130.
131.<div style="display: block;">
132.
133.<div style="text-align: center;">
134.
135.<label>Date :</label>
136. <input type="text" id="txtDate"><br>
137.
138.<label>Total :</label>
139. <input type="text" id="txtAge">
140.
141.</div>
142.
143.</div>
144.
145.</body>
146.
147.</html>
สุดยอดครัช
