<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Datepicker for Bootstrap</title>
<link href="bootstrap.css" rel="stylesheet">
<link href="datepicker.css" rel="stylesheet">
<style>
.container {
background: #fff;
}
#alert {
display: none;
}
</style>
<link href="prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<section id="typeahead">
<div class="page-header">
<h1>Datepicker for Bootstrap <small>bootstrap-datepicker.js - original idea from <a href="http://www.eyecon.ro/bootstrap-datepicker/">Stefan Petre</a></small></h1>
</div>
<div class="row">
<div class="alert alert-success">
<p>Contrary to the <a href="http://www.eyecon.ro/bootstrap-datepicker/">Stefan's one</a>, this version works with <strong>IE7+</strong> and from <strong>Bootstrap v2.0.2</strong>.</p>
<p>Also added:<ul>
<li>When the field is empty, the selection is done on the current date (instead of 1/1/1970)</li>
<li>When you use tab from fields to fields, then no value is selected by default into the field date</li>
</ul></p>
</div>
<div class="span3 columns">
<h3>About</h3>
<p>Add datepicker picker to field or to any other element.</p>
<ul>
<li>can be used as a component</li>
<li>formats: dd, d, mm, m, yyyy, yy</li>
<li>separators: -, /, .</li>
</ul>
<p><a href="https://github.com/Aymkdn/Datepicker-for-Bootstrap" class="btn">Download</a></p>
</div>
<div class="span9 columns">
<h2>Example</h2>
<p>Attached to a field with the format specified via options.</p>
<div class="well">
<input type="text" class="span2" value="" id="dp1" >
</div>
<p>Attachet to a field with the format specified via data tag.</p>
<div class="well">
<input type="text" class="span2" value="2012-02-12" data-date-format="yyyy-mm-dd" id="dp2" >
</div>
<p>As component.</p>
<div class="well form-inline">
<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
</div>
<p>Attached to other elment then field and using events to work with the date values.</p>
<div class="well">
<div class="alert alert-error" id="alert">
<strong>Oh snap!</strong>
</div>
<table class="table">
<thead>
<tr>
<th>Start date<a href="#" class="btn small" id="dp4" data-date-format="yyyy-mm-dd" data-date="2012-02-20">Change</a></th>
<th>End date<a href="#" class="btn small" id="dp5" data-date-format="yyyy-mm-dd" data-date="2012-02-25">Change</a></th>
</tr>
</thead>
<tbody>
<tr>
<td id="startDate">2012-02-20</td>
<td id="endDate">2012-02-25</td>
</tr>
</tbody>
</table>
</div>
<hr>
<h2>Using bootstrap-datepicker.js</h2>
<p>Call the datepicker via javascript:</p>
<pre class="prettyprint linenums">$('.datepicker').datepicker()</pre>
<h3>Options</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 50px;">type</th>
<th style="width: 100px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>format</td>
<td>string</td>
<td>'mm/dd/yyyy'</td>
<td>the date format, combination of d, dd, m, mm, yy, yyy.</td>
</tr>
<tr>
<td>weekStart</td>
<td>integer</td>
<td>0</td>
<td>day of the week start. 0 for Sunday - 6 for Saturday</td>
</tr>
</tbody>
</table>
<h3>Markup</h3>
<p>Format a component.</p>
<pre class="prettyprint linenums">
<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012">
<span class="add-on"><i class="icon-th"></i></span>
</div>
</pre>
<h3>Methods</h3>
<h4>.datepicker(options)</h4>
<p>Initializes an datepicker.</p>
<h3>Other calls</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 50px;">Action</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>destroy</td>
<td>Remove the Datepicker from the element</td>
</tr>
</tbody>
</table>
<pre class="prettyprint linenums">$('.datepicker').datepicker("destroy")</pre>
<h3>Events</h3>
<p>Datepicker class exposes a few events for manipulating the dates.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>show</td>
<td>This event fires immediately when the date picker is displayed.</td>
</tr>
<tr>
<td>hide</td>
<td>This event is fired immediately when the date picker is hidden.</td>
</tr>
<tr>
<td>changeDate</td>
<td>This event is fired when the date is changed.</td>
</tr>
</tbody>
</table>
<pre class="prettyprint linenums">
$('#dp5').datepicker()
.on('changeDate', function(ev){
if (ev.date.valueOf() < startDate.valueOf()){
....
}
});
</pre>
</div>
</div>
</section>
</div>
<script src="prettify.js"></script>
<script src="jquery.js"></script>
<script src="bootstrap-datepicker.js"></script>
<script>
$(function(){
window.prettyPrint && prettyPrint();
$('#dp1').datepicker({
format: 'mm-dd-yyyy'
});
$('#dp2').datepicker();
$('#dp3').datepicker();
var startDate = new Date(2012,1,20);
var endDate = new Date(2012,1,25);
$('#dp4').datepicker()
.on('changeDate', function(ev){
if (ev.date.valueOf() > endDate.valueOf()){
$('#alert').show().find('strong').text('The start date can not be greater then the end date');
} else {
$('#alert').hide();
startDate = new Date(ev.date);
$('#startDate').text($('#dp4').data('date'));
}
$('#dp4').datepicker('hide');
});
$('#dp5').datepicker()
.on('changeDate', function(ev){
if (ev.date.valueOf() < startDate.valueOf()){
$('#alert').show().find('strong').text('The end date can not be less then the start date');
} else {
$('#alert').hide();
endDate = new Date(ev.date);
$('#endDate').text($('#dp5').data('date'));
}
$('#dp5').datepicker('hide');
});
});
</script>
</script>
</body>
</html>
2万+
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
