"onclickmilestone"
Bootstrap 3.1.0 Snippet by hiteshdhanwani

<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'); } }); } }); });

Related: See More


Questions / Comments: