Skip to content

Instantly share code, notes, and snippets.

@karmadice

karmadice/datepicker_disable_pastdate.html

Last active August 10, 2017 13:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save karmadice/4fdeec4f9a46ac928005758745459c70 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save karmadice/4fdeec4f9a46ac928005758745459c70 to your computer and use it in GitHub Desktop.
Download ZIP
Javascripts
Raw
datepicker_disable_pastdate.html
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Include Required Prerequisites -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<!-- Include Date Range Picker -->
<link rel="stylesheet" type="text/css" href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" />
<script type="text/javascript" src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
</head>
<body>
<div class="container" id="hidePreviousDates">
<div class="row">
<div class="col-lg-12">
<div class="form-group col-md-2 col-xs-12">
<div class="input-group date">
<input id="DatePicker1" name="Date1" value="2017-07-27" class="form-control pull-right datepicker" data-date-format="yyyy-mm-dd" data-date-end-date="0d" type="text">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div></div>
<label>Date:</label>
<!-- /.input group -->
</div>
<div class="form-group col-md-2 col-xs-12">
<div class="input-group date">
<input id="DatePicker2" name="Date2" value="2017-08-10" class="form-control pull-right datepicker" data-date-format="yyyy-mm-dd" data-date-end-date="0d" type="text">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div></div>
<label>Date:</label>
<!-- /.input group -->
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('.datepicker').datepicker({
autoclose: true,
orientation: "bottom",
//calendarWeeks: true
});
$("#DatePicker1").datepicker().on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#DatePicker2').datepicker('setStartDate', minDate);
});
$("#DatePicker2").datepicker().on('changeDate', function (selected) {
var maxDate = new Date(selected.date.valueOf());
$('#DatePicker1').datepicker('setEndDate', maxDate);
});
</script>
</body>
</html>
Raw
highchart_redraw_ajax.html
//Working Example : http://jsfiddle.net/zwN5w/73/
<!DocType html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<table id="datatable">
<thead>
<tr>
<th></th>
<th>Jane</th>
<th>John</th>
</tr>
</thead>
<tbody>
<tr>
<th>Apples</th>
<td>9</td>
<td>4</td>
</tr>
<tr>
<th>Pears</th>
<td>2</td>
<td>0</td>
</tr>
<tr>
<th>Plums</th>
<td>5</td>
<td>11</td>
</tr>
<tr>
<th>Bananas</th>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th>Oranges</th>
<td>2</td>
<td>4</td>
</tr>
</tbody>
</table>
<button id="refresh">Refresh</button>
<script>
$(function () {
$('#container').highcharts({
data: {
table: document.getElementById('datatable')
},
chart: {
renderTo : document.getElementById('container'),
type: 'column'
},
title: {
text: 'Data extracted from a HTML table in the page'
},
yAxis: {
allowDecimals: false,
title: {
text: 'Units'
}
}
});
});
$("#refresh").click(function () {
var chart = $('#container').highcharts();
var options = chart.options;
chart = new Highcharts.Chart(options);
});
$(function () {
$("#datatable td").dblclick(function () {
var OriginalContent = $(this).text();
$(this).addClass("cellEditing");
$(this).html("<input type='text' value='" + "' />");
$(this).children().first().focus();
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
var newContent = $(this).val();
$(this).parent().text(newContent);
$(this).parent().removeClass("cellEditing");
}
});
$(this).children().first().blur(function () {
$(this).parent().text(OriginalContent);
$(this).parent().removeClass("cellEditing");
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment