You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
272 lines
7.6 KiB
272 lines
7.6 KiB
<html>
|
|
<head>
|
|
<title>Bootstrap-Material DateTimePicker</title>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
|
|
|
|
<link rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/css/bootstrap-material-design.min.css"/>
|
|
<link rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/css/ripples.min.css"/>
|
|
|
|
<link rel="stylesheet" href="./css/bootstrap-material-datetimepicker.css" />
|
|
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
|
|
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
|
|
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/js/ripples.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/js/material.min.js"></script>
|
|
<script type="text/javascript" src="https://rawgit.com/FezVrasta/bootstrap-material-design/master/dist/js/material.min.js"></script>
|
|
<script type="text/javascript" src="http://momentjs.com/downloads/moment-with-locales.min.js"></script>
|
|
<script type="text/javascript" src="./js/bootstrap-material-datetimepicker.js"></script>
|
|
|
|
<style>
|
|
body
|
|
{
|
|
padding-top: 70px;
|
|
font-family: 'Roboto', sans-serif;
|
|
}
|
|
h2
|
|
{
|
|
padding: 0 20px 10px 20px;
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
}
|
|
.form-control-wrapper
|
|
{
|
|
margin: 10px 20px;
|
|
}
|
|
code
|
|
{
|
|
padding: 10px;
|
|
background: #eee!important;
|
|
display: block;
|
|
color: #000;
|
|
}
|
|
code > p
|
|
{
|
|
font-weight: bold;
|
|
color: #000;
|
|
font-size: 1.5em;
|
|
}
|
|
@media(max-width: 300px)
|
|
{
|
|
.well { margin : 0}
|
|
}
|
|
</style>
|
|
<script>
|
|
(function(i, s, o, g, r, a, m) {
|
|
i['GoogleAnalyticsObject'] = r;
|
|
i[r] = i[r] || function() {
|
|
(i[r].q = i[r].q || []).push(arguments)
|
|
}, i[r].l = 1 * new Date();
|
|
a = s.createElement(o),
|
|
m = s.getElementsByTagName(o)[0];
|
|
a.async = 1;
|
|
a.src = g;
|
|
m.parentNode.insertBefore(a, m)
|
|
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
|
|
|
|
ga('create', 'UA-60343429-1', 'auto');
|
|
ga('send', 'pageview');
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="container well">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h1>Bootstrap Material DatePicker</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container well">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h2>Date Picker</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-control-wrapper">
|
|
<input type="text" id="date" class="form-control floating-label" placeholder="Date">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<code>
|
|
<p>Code</p>
|
|
$('#date').bootstrapMaterialDatePicker({ weekStart : 0, time: false });
|
|
</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container well">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h2>Time Picker</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-control-wrapper">
|
|
<input type="text" id="time" class="form-control floating-label" placeholder="Time">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<code>
|
|
<p>Code</p>
|
|
$('#time').bootstrapMaterialDatePicker({ date: false });
|
|
</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container well">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h2>Date Time Picker</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-control-wrapper">
|
|
<input type="text" id="date-format" class="form-control floating-label" placeholder="Begin Date Time">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<code>
|
|
<p>Code</p>
|
|
$('#date-format').bootstrapMaterialDatePicker({ format : 'dddd DD MMMM YYYY - HH:mm' });
|
|
</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container well">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h2>French Locales (Week starts at Monday)</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-control-wrapper">
|
|
<input type="text" id="date-fr" class="form-control floating-label" value="18/03/2015 08:00" placeholder="Date de début">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<code>
|
|
<p>Code</p>
|
|
$('#date-fr').bootstrapMaterialDatePicker({ format : 'DD/MM/YYYY HH:mm', lang : 'fr', weekStart : 1, cancelText : 'ANNULER' });
|
|
</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container well">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h2>Min Date set</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-control-wrapper">
|
|
<input type="text" id="min-date" class="form-control floating-label" placeholder="Start Date">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<code>
|
|
<p>Code</p>
|
|
$('#min-date').bootstrapMaterialDatePicker({ format : 'DD/MM/YYYY HH:mm', minDate : new Date() });
|
|
</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container well">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h2>Events</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="form-control-wrapper">
|
|
<input type="text" id="date-start" class="form-control floating-label" placeholder="Start Date">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="form-control-wrapper">
|
|
<input type="text" id="date-end" class="form-control floating-label" placeholder="End Date">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<code>
|
|
<p>Code</p>
|
|
$('#date-end').bootstrapMaterialDatePicker({ weekStart : 0 });<br />
|
|
$('#date-start').bootstrapMaterialDatePicker({ weekStart : 0 }).on('change', function(e, date)<br />
|
|
{<br />
|
|
$('#date-end').bootstrapMaterialDatePicker('setMinDate', date);<br />
|
|
});
|
|
</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
$(document).ready(function()
|
|
{
|
|
$('#date').bootstrapMaterialDatePicker
|
|
({
|
|
time: false,
|
|
clearButton: true
|
|
});
|
|
|
|
$('#time').bootstrapMaterialDatePicker
|
|
({
|
|
date: false,
|
|
shortTime: false,
|
|
format: 'HH:mm'
|
|
});
|
|
|
|
$('#date-format').bootstrapMaterialDatePicker
|
|
({
|
|
format: 'dddd DD MMMM YYYY - HH:mm'
|
|
});
|
|
$('#date-fr').bootstrapMaterialDatePicker
|
|
({
|
|
format: 'DD/MM/YYYY HH:mm',
|
|
lang: 'fr',
|
|
weekStart: 1,
|
|
cancelText : 'ANNULER',
|
|
nowButton : true,
|
|
switchOnClick : true
|
|
});
|
|
|
|
$('#date-end').bootstrapMaterialDatePicker
|
|
({
|
|
weekStart: 0, format: 'DD/MM/YYYY HH:mm'
|
|
});
|
|
$('#date-start').bootstrapMaterialDatePicker
|
|
({
|
|
weekStart: 0, format: 'DD/MM/YYYY HH:mm', shortTime : true
|
|
}).on('change', function(e, date)
|
|
{
|
|
$('#date-end').bootstrapMaterialDatePicker('setMinDate', date);
|
|
});
|
|
|
|
$('#min-date').bootstrapMaterialDatePicker({ format : 'DD/MM/YYYY HH:mm', minDate : new Date() });
|
|
|
|
$.material.init()
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|