71 lines
2.0 KiB
HTML
71 lines
2.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Period Picker Demo</title>
|
|
<link rel="stylesheet" href="build/jquery.periodpicker.min.css">
|
|
<link rel="stylesheet" href="build/jquery.timepicker.min.css">
|
|
<script src="jquery.min.js"></script>
|
|
<script src="build/jquery.periodpicker.full.with.tp.min.js"></script>
|
|
<style>
|
|
pre {
|
|
font-family: Consolas, 'Liberation Mono', Courier, monospace;
|
|
color: #f0f0f0;
|
|
background: #3f3f3f;
|
|
border-radius: 3px;
|
|
white-space: pre-wrap;
|
|
tab-size: 2em;
|
|
padding:10px;
|
|
font-family: Menlo, Monaco, monospace, sans-serif;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Period Picker is so good!</h1>
|
|
<pre></pre>
|
|
<pre></pre>
|
|
<div id="htmlexample">
|
|
<div style="width:100%">
|
|
<div style="float:right;">
|
|
<input type="text" value="2009-12-11" id="1"/>
|
|
<input type="text" value="2009-12-11" id="periodpickerstart"/>
|
|
<input type="text" value="2009-12-11" id="2"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <input type="text" id="end" />-->
|
|
<script>
|
|
document.getElementsByTagName('pre')[0].innerText = $.trim(document.getElementById('htmlexample').innerHTML);
|
|
</script>
|
|
<script>
|
|
//jQuery('#periodpickerstart').periodpicker();
|
|
var periodpickerOptionsRange = {
|
|
timepicker: true,
|
|
tabIndex: 0,
|
|
formatDate: 'YYYY-MM-DD',
|
|
formatDateTime: 'YYYY-MM-DD',
|
|
norange: false,
|
|
cells: [1, 3],
|
|
animation: false,
|
|
lang: "ru",
|
|
i18n: {
|
|
ru: {
|
|
'Clear': 'Очистить'
|
|
}
|
|
},
|
|
clearButtonInButton: true
|
|
};
|
|
jQuery('#periodpickerstart')
|
|
.periodpicker(periodpickerOptionsRange)
|
|
.on('change', function () {
|
|
console.log(this.value)
|
|
})
|
|
</script>
|
|
<script>
|
|
document.getElementsByTagName('pre')[1].innerText = $.trim(document.getElementsByTagName('script')[3].innerHTML);
|
|
</script>
|
|
<p>
|
|
<a href="http://xdsoft.net/jqplugins/periodpicker/">Documentation</a>
|
|
</p>
|
|
</body>
|
|
</html> |