<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-list"></span>Goal
<div class="pull-right action-buttons">
<div class="btn-group pull-right">
<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-cog" style="margin-right: 0px;"></span>
</button>
<ul class="dropdown-menu slidedown">
<li><a href="#" data-toggle="modal" data-target="#t_and_c_m"><span class="glyphicon glyphicon-plus"></span>Add</a></li>
<li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-pencil"></span>Edit</a></li>
<li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-trash"></span>Delete</a></li>
<li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-flag"></span>Flag</a></li>
</ul>
</div>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">
<div class="checkbox">
<input type="checkbox" id="checkbox" />
<label for="checkbox">
Milestone 1
</label>
</div>
<div class="pull-right action-buttons">
<a href="#" data-toggle="modal" data-target="#t_and_c_m"><span class="glyphicon glyphicon-calendar"></span></a>
<a href=""><span class="glyphicon glyphicon-pencil"></span></a>
<a href="" class="trash"><span class="glyphicon glyphicon-trash"></span></a>
<a href="" class="flag"><span class="glyphicon glyphicon-flag"></span></a>
</div>
</li>
<li class="list-group-item">
<div class="checkbox">
<input type="checkbox" id="checkbox2" />
<label for="checkbox2">
Milestone 2
</label>
</div>
<div class="pull-right action-buttons">
<a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-pencil"></span></a>
<a href="http://www.jquery2dotnet.com" class="trash"><span class="glyphicon glyphicon-trash"></span></a>
<a href="http://www.jquery2dotnet.com" class="flag"><span class="glyphicon glyphicon-flag"></span></a>
</div>
</li>
<li class="list-group-item">
<div class="checkbox">
<input type="checkbox" id="checkbox3" />
<label for="checkbox3">
Milestone 3
</label>
</div>
<div class="pull-right action-buttons">
<a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-pencil"></span></a>
<a href="http://www.jquery2dotnet.com" class="trash"><span class="glyphicon glyphicon-trash"></span></a>
<a href="http://www.jquery2dotnet.com" class="flag"><span class="glyphicon glyphicon-flag"></span></a>
</div>
</li>
<li class="list-group-item">
<div class="checkbox">
<input type="checkbox" id="checkbox4" />
<label for="checkbox4">
Milestone 4
</label>
</div>
<div class="pull-right action-buttons">
<a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-pencil"></span></a>
<a href="http://www.jquery2dotnet.com" class="trash"><span class="glyphicon glyphicon-trash"></span></a>
<a href="http://www.jquery2dotnet.com" class="flag"><span class="glyphicon glyphicon-flag"></span></a>
</div>
</li>
<li class="list-group-item">
<div class="checkbox">
<input type="checkbox" id="checkbox5" />
<label for="checkbox5">
Milestone 5
</label>
</div>
<div class="pull-right action-buttons">
<a href="http://bootsnipp.com/user/snippets/DVpOz"><span class="glyphicon glyphicon-pencil"></span></a>
<a href="http://www.jquery2dotnet.com" class="trash"><span class="glyphicon glyphicon-trash"></span></a>
<a href="http://www.jquery2dotnet.com" class="flag"><span class="glyphicon glyphicon-flag"></span></a>
</div>
<div class="col-xs-8 col-sm-9 col-md-9">
</li>
</ul>
</div>
<div class="panel-footer">
<div class="row">
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="t_and_c_m" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="container">
<div class="row">
<div class="col-xs-12 show-focus-status">
<div class="alert alert-success hidden">
<strong>You can use your left and right arrow keys to change the date of the first date picker.</strong>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-20">
<div class="alert alert-info">
<h2>Choose a deadline to finish milestone</h2>
</div>
<hr/>
<div class="date-picker" data-date="2014/09/02" data-keyboard="true">
<div class="date-container pull-left">
<h4 class="weekday">Monday</h4>
<h2 class="date">Februray 4th</h2>
<h4 class="year pull-right">2014</h4>
</div>
<span data-toggle="datepicker" data-type="subtract" class="fa fa-angle-left"></span>
<span data-toggle="datepicker" data-type="add" class="fa fa-angle-right"></span>
<div class="input-group input-datepicker">
<input type="text" class="form-control" data-format="YYYY/MM/DD" placeholder="YYYY/MM/DD">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<span data-toggle="calendar" class="fa fa-calendar"></span>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</div>
.trash { color:rgb(209, 91, 71); }
.flag { color:rgb(248, 148, 6); }
.panel-body { padding:0px; }
.panel-footer .pagination { margin: 0; }
.panel .glyphicon,.list-group-item .glyphicon { margin-right:5px; }
.panel-body .radio, .checkbox { display:inline-block;margin:0px; }
.panel-body input[type=checkbox]:checked + label { text-decoration: line-through;color: rgb(128, 144, 160); }
.list-group-item:hover, a.list-group-item:focus {text-decoration: none;background-color: rgb(245, 245, 245);}
.list-group { margin-bottom:0px; }
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
body {
padding: 70px 0px;
}
.fa.pull-right {
margin-left: 0.1em;
}
.date-picker,
.date-container {
position: relative;
display: inline-block;
width: 100%;
color: rgb(75, 77, 78);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.date-container {
padding: 0px 40px;
}
.date-picker h2, .date-picker h4 {
margin: 0px;
padding: 0px;
font-family: 'Roboto', sans-serif;
font-weight: 200;
}
.date-container .date {
text-align: center;
}
.date-picker span.fa {
position: absolute;
font-size: 4em;
font-weight: 100;
padding: 8px 0px 7px;
cursor: pointer;
top: 0px;
}
.date-picker span.fa[data-type="subtract"] {
left: 0px;
}
.date-picker span.fa[data-type="add"] {
right: 0px;
}
.date-picker span[data-toggle="calendar"] {
display: block;
position: absolute;
top: -7px;
right: 45px;
font-size: 1em !important;
cursor: pointer;
}
.date-picker .input-datepicker {
display: none;
position: absolute;
top: 50%;
margin-top: -17px;
width:100%;
}
.date-picker .input-datepicker.show-input {
display: table;
}
@media (min-width: 768px) and (max-width: 1010px) {
.date-picker h2{
font-size: 1.5em;
font-weight: 400;
}
.date-picker h4 {
font-size: 1.1em;
}
.date-picker span.fa {
font-size: 3em;
}
}
$(document).ready(function() {
$(window).on('focus', function(event) {
$('.show-focus-status > .alert-danger').addClass('hidden');
$('.show-focus-status > .alert-success').removeClass('hidden');
}).on('blur', function(event) {
$('.show-focus-status > .alert-success').addClass('hidden');
$('.show-focus-status > .alert-danger').removeClass('hidden');
});
$('.date-picker').each(function () {
var $datepicker = $(this),
cur_date = ($datepicker.data('date') ? moment($datepicker.data('date'), "YYYY/MM/DD") : moment()),
format = {
"weekday" : ($datepicker.find('.weekday').data('format') ? $datepicker.find('.weekday').data('format') : "dddd"),
"date" : ($datepicker.find('.date').data('format') ? $datepicker.find('.date').data('format') : "MMMM Do"),
"year" : ($datepicker.find('.year').data('year') ? $datepicker.find('.weekday').data('format') : "YYYY")
};
function updateDisplay(cur_date) {
$datepicker.find('.date-container > .weekday').text(cur_date.format(format.weekday));
$datepicker.find('.date-container > .date').text(cur_date.format(format.date));
$datepicker.find('.date-container > .year').text(cur_date.format(format.year));
$datepicker.data('date', cur_date.format('YYYY/MM/DD'));
$datepicker.find('.input-datepicker').removeClass('show-input');
}
updateDisplay(cur_date);
$datepicker.on('click', '[data-toggle="calendar"]', function(event) {
event.preventDefault();
$datepicker.find('.input-datepicker').toggleClass('show-input');
});
$datepicker.on('click', '.input-datepicker > .input-group-btn > button', function(event) {
event.preventDefault();
var $input = $(this).closest('.input-datepicker').find('input'),
date_format = ($input.data('format') ? $input.data('format') : "YYYY/MM/DD");
if (moment($input.val(), date_format).isValid()) {
updateDisplay(moment($input.val(), date_format));
}else{
alert('Invalid Date');
}
});
$datepicker.on('click', '[data-toggle="datepicker"]', function(event) {
event.preventDefault();
var cur_date = moment($(this).closest('.date-picker').data('date'), "YYYY/MM/DD"),
date_type = ($datepicker.data('type') ? $datepicker.data('type') : "days"),
type = ($(this).data('type') ? $(this).data('type') : "add"),
amt = ($(this).data('amt') ? $(this).data('amt') : 1);
if (type == "add") {
cur_date = cur_date.add(date_type, amt);
}else if (type == "subtract") {
cur_date = cur_date.subtract(date_type, amt);
}
updateDisplay(cur_date);
});
if ($datepicker.data('keyboard') == true) {
$(window).on('keydown', function(event) {
if (event.which == 37) {
$datepicker.find('span:eq(0)').trigger('click');
}else if (event.which == 39) {
$datepicker.find('span:eq(1)').trigger('click');
}
});
}
});
});
