框架重构
清除多余的业务
This commit is contained in:
644
WebFirst/wwwroot/vendors/bootstrap-datetimepicker/docs/index.md
vendored
Normal file
644
WebFirst/wwwroot/vendors/bootstrap-datetimepicker/docs/index.md
vendored
Normal file
@@ -0,0 +1,644 @@
|
||||
#Bootstrap 3 Datepicker v4 Docs
|
||||
|
||||
<div class="alert alert-info">
|
||||
<strong>Note</strong>
|
||||
All functions are accessed via the <code>data</code> attribute e.g. <code>$('#datetimepicker').data("DateTimePicker").FUNCTION()</code>
|
||||
</div>
|
||||
|
||||
### Minimum Setup
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class='col-sm-6'>
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='datetimepicker1'>
|
||||
<input type='text' class="form-control" />
|
||||
<span class="input-group-addon">
|
||||
<span class="glyphicon glyphicon-calendar"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#datetimepicker1').datetimepicker();
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code
|
||||
|
||||
```
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class='col-sm-6'>
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='datetimepicker1'>
|
||||
<input type='text' class="form-control" />
|
||||
<span class="input-group-addon">
|
||||
<span class="glyphicon glyphicon-calendar"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#datetimepicker1').datetimepicker();
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
----------------------
|
||||
|
||||
### Using Locales
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class='col-sm-6'>
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='datetimepicker2'>
|
||||
<input type='text' class="form-control" />
|
||||
<span class="input-group-addon">
|
||||
<span class="glyphicon glyphicon-calendar"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#datetimepicker2').datetimepicker({
|
||||
locale: 'ru'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code
|
||||
|
||||
```
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class='col-sm-6'>
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='datetimepicker2'>
|
||||
<input type='text' class="form-control" />
|
||||
<span class="input-group-addon">
|
||||
<span class="glyphicon glyphicon-calendar"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#datetimepicker2').datetimepicker({
|
||||
locale: 'ru'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
----------------------
|
||||
|
||||
### Time Only
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class='col-sm-6'>
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='datetimepicker3'>
|
||||
<input type='text' class="form-control" />
|
||||
<span class="input-group-addon">
|
||||
<span class="glyphicon glyphicon-time"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#datetimepicker3').datetimepicker({
|
||||
format: 'LT'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code
|
||||
|
||||
```
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class='col-sm-6'>
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='datetimepicker3'>
|
||||
<input type='text' class="form-control" />
|
||||
<span class="input-group-addon">
|
||||
<span class="glyphicon glyphicon-time"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#datetimepicker3').datetimepicker({
|
||||
format: 'LT'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
----------------------
|
||||
|
||||
### Date Only
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class='col-sm-6'>
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='datetimepicker3'>
|
||||
<input type='text' class="form-control" />
|
||||
<span class="input-group-addon">
|
||||
<span class="glyphicon glyphicon-time"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#datetimepicker3').datetimepicker({
|
||||
format: 'L'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code
|
||||
|
||||
```
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class='col-sm-6'>
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='datetimepicker3'>
|
||||
<input type='text' class="form-control" />
|
||||
<span class="input-group-addon">
|
||||
<span class="glyphicon glyphicon-time"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#datetimepicker3').datetimepicker({
|
||||
format: 'LT'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
----------------------
|
||||
|
||||
### No Icon (input field only):
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class='col-sm-6'>
|
||||
<input type='text' class="form-control" id='datetimepicker4' />
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#datetimepicker4').datetimepicker();
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code
|
||||
|
||||
```
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class='col-sm-6'>
|
||||
<input type='text' class="form-control" id='datetimepicker4' />
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#datetimepicker4').datetimepicker();
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
----------------------
|
||||
|
||||
### Enabled/Disabled Dates
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class='col-sm-6'>
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='datetimepicker5'>
|
||||
<input type='text' class="form-control" />
|
||||
<span class="input-group-addon">
|
||||
<span class="glyphicon glyphicon-calendar"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#datetimepicker5').datetimepicker({
|
||||
defaultDate: "11/1/2013",
|
||||
disabledDates: [
|
||||
moment("12/25/2013"),
|
||||
new Date(2013, 11 - 1, 21),
|
||||
"11/22/2013 00:53"
|
||||
]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
#### Code
|
||||
|
||||
```
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class='col-sm-6'>
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='datetimepicker5'>
|
||||
<input type='text' class="form-control" />
|
||||
<span class="input-group-addon">
|
||||
<span class="glyphicon glyphicon-calendar"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#datetimepicker5').datetimepicker({
|
||||
defaultDate: "11/1/2013",
|
||||
disabledDates: [
|
||||
moment("12/25/2013"),
|
||||
new Date(2013, 11 - 1, 21),
|
||||
"11/22/2013 00:53"
|
||||
]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
----------------------
|
||||
|
||||
### Linked Pickers
|
||||
|
||||
<div class="container">
|
||||
<div class='col-md-5'>
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='datetimepicker6'>
|
||||
<input type='text' class="form-control" />
|
||||
<span class="input-group-addon">
|
||||
<span class="glyphicon glyphicon-calendar"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='col-md-5'>
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='datetimepicker7'>
|
||||
<input type='text' class="form-control" />
|
||||
<span class="input-group-addon">
|
||||
<span class="glyphicon glyphicon-calendar"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#datetimepicker6').datetimepicker();
|
||||
$('#datetimepicker7').datetimepicker({
|
||||
useCurrent: false
|
||||
});
|
||||
$("#datetimepicker6").on("dp.change", function (e) {
|
||||
$('#datetimepicker7').data("DateTimePicker").minDate(e.date);
|
||||
});
|
||||
$("#datetimepicker7").on("dp.change", function (e) {
|
||||
$('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
#### Code
|
||||
|
||||
```
|
||||
<div class="container">
|
||||
<div class='col-md-5'>
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='datetimepicker6'>
|
||||
<input type='text' class="form-control" />
|
||||
<span class="input-group-addon">
|
||||
<span class="glyphicon glyphicon-calendar"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='col-md-5'>
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='datetimepicker7'>
|
||||
<input type='text' class="form-control" />
|
||||
<span class="input-group-addon">
|
||||
<span class="glyphicon glyphicon-calendar"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#datetimepicker6').datetimepicker();
|
||||
$('#datetimepicker7').datetimepicker({
|
||||
useCurrent: false //Important! See issue #1075
|
||||
});
|
||||
$("#datetimepicker6").on("dp.change", function (e) {
|
||||
$('#datetimepicker7').data("DateTimePicker").minDate(e.date);
|
||||
});
|
||||
$("#datetimepicker7").on("dp.change", function (e) {
|
||||
$('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
----------------------
|
||||
|
||||
### Custom Icons
|
||||
|
||||
<div class="container">
|
||||
<div class="col-sm-6" style="height:130px;">
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='datetimepicker8'>
|
||||
<input type='text' class="form-control" />
|
||||
<span class="input-group-addon">
|
||||
<span class="fa fa-calendar">
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#datetimepicker8').datetimepicker({
|
||||
icons: {
|
||||
time: "fa fa-clock-o",
|
||||
date: "fa fa-calendar",
|
||||
up: "fa fa-arrow-up",
|
||||
down: "fa fa-arrow-down"
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
#### Code
|
||||
|
||||
```
|
||||
<div class="container">
|
||||
<div class="col-sm-6" style="height:130px;">
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='datetimepicker8'>
|
||||
<input type='text' class="form-control" />
|
||||
<span class="input-group-addon">
|
||||
<span class="fa fa-calendar">
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#datetimepicker8').datetimepicker({
|
||||
icons: {
|
||||
time: "fa fa-clock-o",
|
||||
date: "fa fa-calendar",
|
||||
up: "fa fa-arrow-up",
|
||||
down: "fa fa-arrow-down"
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
```
|
||||
|
||||
----------------------
|
||||
|
||||
### View Mode
|
||||
|
||||
<div class="container">
|
||||
<div class="col-sm-6" style="height:130px;">
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='datetimepicker9'>
|
||||
<input type='text' class="form-control" />
|
||||
<span class="input-group-addon">
|
||||
<span class="glyphicon glyphicon-calendar">
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#datetimepicker9').datetimepicker({
|
||||
viewMode: 'years'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
#### Code
|
||||
|
||||
```
|
||||
<div class="container">
|
||||
<div class="col-sm-6" style="height:130px;">
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='datetimepicker9'>
|
||||
<input type='text' class="form-control" />
|
||||
<span class="input-group-addon">
|
||||
<span class="glyphicon glyphicon-calendar">
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#datetimepicker9').datetimepicker({
|
||||
viewMode: 'years'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
```
|
||||
|
||||
----------------------
|
||||
|
||||
### Min View Mode
|
||||
|
||||
<div class="container">
|
||||
<div class="col-sm-6" style="height:130px;">
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='datetimepicker10'>
|
||||
<input type='text' class="form-control" />
|
||||
<span class="input-group-addon">
|
||||
<span class="glyphicon glyphicon-calendar">
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#datetimepicker10').datetimepicker({
|
||||
viewMode: 'years',
|
||||
format: 'MM/YYYY'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
#### Code
|
||||
|
||||
```
|
||||
<div class="container">
|
||||
<div class="col-sm-6" style="height:130px;">
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='datetimepicker10'>
|
||||
<input type='text' class="form-control" />
|
||||
<span class="input-group-addon">
|
||||
<span class="glyphicon glyphicon-calendar">
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#datetimepicker10').datetimepicker({
|
||||
viewMode: 'years',
|
||||
format: 'MM/YYYY'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
----------------------
|
||||
|
||||
### Disabled Days of the Week
|
||||
|
||||
<div class="container">
|
||||
<div class="col-sm-6" style="height:130px;">
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='datetimepicker11'>
|
||||
<input type='text' class="form-control" />
|
||||
<span class="input-group-addon">
|
||||
<span class="glyphicon glyphicon-calendar">
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#datetimepicker11').datetimepicker({
|
||||
daysOfWeekDisabled: [0, 6]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
#### Code
|
||||
|
||||
```
|
||||
<div class="container">
|
||||
<div class="col-sm-6" style="height:130px;">
|
||||
<div class="form-group">
|
||||
<div class='input-group date' id='datetimepicker11'>
|
||||
<input type='text' class="form-control" />
|
||||
<span class="input-group-addon">
|
||||
<span class="glyphicon glyphicon-calendar">
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#datetimepicker11').datetimepicker({
|
||||
daysOfWeekDisabled: [0, 6]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
```
|
||||
|
||||
----------------------
|
||||
|
||||
### Inline
|
||||
|
||||
<div style="overflow:hidden;">
|
||||
<div class="form-group">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div id="datetimepicker12"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#datetimepicker12').datetimepicker({
|
||||
inline: true,
|
||||
sideBySide: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
#### Code
|
||||
|
||||
```
|
||||
<div style="overflow:hidden;">
|
||||
<div class="form-group">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div id="datetimepicker12"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#datetimepicker12').datetimepicker({
|
||||
inline: true,
|
||||
sideBySide: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
```
|
||||
Reference in New Issue
Block a user