"MA Registration form"
Bootstrap 3.3.0 Snippet by sucindran88

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Registration Form</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/dcalendar.picker.css" rel="stylesheet">
<style type="text/css">
#deceased{
background-color:#FFF3F5;
padding-top:10px;
margin-bottom:10px;
}
.remove_field{
float:right;
cursor:pointer;
position : absolute;
}
.remove_field:hover{
text-decoration:none;
}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*!Don't remove this!
* jQuery DCalendar and DCalendar Picker plugin styles
*
* Author: Dionlee Uy
* Email: dionleeuy@gmail.com
*
* Date: Mon Mar 2 2013
*/
.calendar {
position: relative;
font-family: 'Century Gothic','Segoe UI', Calibri, Arial;
font-size: 12px;
border-collapse: collapse;
margin: 0; padding: 0;
z-index: 4;
border:1px solid rgba(0,0,0,0.08);
width: 250px;
color: #000;
text-align: center;
background-color: #FFF;
}
.calendar th,
.calendar td {
text-align: center;
-webki-ttransition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.calendar th:first-child,
.calendar td:first-child {
margin-left: 5px;
}
.calendar span {
padding: 6px 4px;
display: block;
}
.calendar .month {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* -- DO NOT REMOVE --
* jQuery DCalendar 1.1 and DCalendar Picker 1.1 plugin
*
* Author: Dionlee Uy
* Email: dionleeuy@gmail.com
*
* Date: Sat Mar 2 2013
*
* @requires jQuery
* -- DO NOT REMOVE --
*/
if (typeof jQuery === 'undefined') { throw new Error('DCalendar.Picker: This plugin requires jQuery'); }
+function ($) {
Date.prototype.getDays = function() { return new Date(this.getFullYear(), this.getMonth() + 1, 0).getDate(); };
var months = ['January','February','March','April','May','June','July','August','September','October','November','December'],
short_months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
daysofweek = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
DCalendar = function(elem, options) {
this.calendar = $(elem);
this.today = new Date(); //system date
this.date = this.today; //current selected date, default is today
this.viewMode = 'days';
this.options = options;
this.selected = (this.date.getMonth() + 1) + "/" + this.date.getDate() + "/" + this.date.getFullYear();
if(options.mode === 'calendar')
this.tHead = $('<thead><tr><th id="prev">‹</th><th colspan="5" id="currM"></th><th id="next">›</th></tr><tr><th>Su</th><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th></tr></thead>');
else if (options.mode === 'datepicker')
this.tHead = $('<thead><tr><th id="prev">‹</th><th colspan="5" id="currM"></th><th id="next">›</th></tr><tr><th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr></thead>');
this.tHead.find('#currM').text(months[this.today.getMonth()] +" " + this.today.getFullYear());
this.calendar.prepend(this.tHead);
var that = this;
this.calendar.on('click', '#next', function() { initCreate('next'); })
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

hi how i can use only YearPicker

Hassan islam () - 7 years ago - Reply 0


how i can customize the date Picker

Hassan islam () - 7 years ago - Reply 0