mirror of
https://github.com/xdan/datetimepicker.git
synced 2024-11-18 06:24:22 +00:00
Merge pull request #301 from xdan/master
Please allow Date picker to show 2 months
This commit is contained in:
Valeriy
GitHub
commit
a0b527e5f2
60
README.md
60
README.md
@ -1,21 +1,71 @@
|
||||
datetimepicker
|
||||
# PLEASE. Help me update documentation.
|
||||
[Doc.tpl](https://github.com/xdan/datetimepicker/blob/master/doc.tpl)
|
||||
This file will be automatically displayed on the site
|
||||
|
||||
# Installation
|
||||
|
||||
```
|
||||
npm install jquery-datetimepicker
|
||||
OR
|
||||
yarn add jquery-datetimepicker
|
||||
```
|
||||
|
||||
# datetimepicker
|
||||
==============
|
||||
|
||||
**!!! The latest version of the options 'lang' obsolete. The language setting is now global. !!!**
|
||||
|
||||
Use this:
|
||||
```javascript
|
||||
jQuery.datetimepicker.setLocale('en');
|
||||
```
|
||||
[Documentation][doc]
|
||||
|
||||
jQuery Plugin Date and Time Picker
|
||||
|
||||
DateTimePicker
|
||||
|
||||
|
||||
|
||||
|
||||
DatePicker
|
||||
|
||||
|
||||
|
||||
|
||||
TimePicker
|
||||
|
||||
|
||||
|
||||
|
||||
Options to highlight individual dates or periods
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[Documentation][doc]
|
||||
[doc]: http://xdsoft.net/jqplugins/datetimepicker/
|
||||
|
||||
### JS Build help
|
||||
|
||||
**Requires Node and NPM** [Download and install node.js](http://nodejs.org/download/).
|
||||
|
||||
Install:
|
||||
|
||||
1. Install `bower` globally with `npm install -g bower`.
|
||||
2. Run `npm install`. npm will look at `package.json` and automatically install the necessary dependencies.
|
||||
3. Run `bower install`, which installs front-end packages defined in `bower.json`.
|
||||
|
||||
Notice: If you use Bower v1.5.2, you will get error: `The "main" field cannot contain minified files`
|
||||
You can regress to version 1.3.12
|
||||
|
||||
1. `npm uninstall bower -g`
|
||||
2. `npm install -g bower@1.3.12`
|
||||
|
||||
Build:
|
||||
|
||||
- `npm run build`
|
||||
|
||||
When build completed, you'll have the following files:
|
||||
- **build/jquery.datetimepicker.full.js** - browser file
|
||||
- **build/jquery.datetimepicker.full.min.js** - browser minified file
|
||||
- **build/jquery.datetimepicker.min.js** - amd module style minified file
|
||||
|
||||
1
build/jquery.datetimepicker.full.min.js
vendored
Normal file
1
build/jquery.datetimepicker.full.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
build/jquery.datetimepicker.min.css
vendored
Normal file
1
build/jquery.datetimepicker.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -1,20 +1,36 @@
|
||||
{
|
||||
"name": "datetimepicker",
|
||||
"title": "jQuery Date and Time picker",
|
||||
"version": "2.5.4",
|
||||
"title": "jQuery Date and Time picker",
|
||||
"description": "jQuery plugin for date, time, or datetime manipulation in form",
|
||||
"keywords": [
|
||||
"date",
|
||||
"time",
|
||||
"datetime",
|
||||
"datepicker",
|
||||
"timepicker",
|
||||
"datetimepicker"
|
||||
"calendar",
|
||||
"date",
|
||||
"time",
|
||||
"form",
|
||||
"datetime",
|
||||
"datepicker",
|
||||
"timepicker",
|
||||
"datetimepicker",
|
||||
"validation",
|
||||
"ui",
|
||||
"scroller",
|
||||
"picker",
|
||||
"i18n",
|
||||
"input",
|
||||
"jquery",
|
||||
"touch"
|
||||
],
|
||||
"version": "1.0.1",
|
||||
"author": {
|
||||
"name": "Chupurnov Valeriy",
|
||||
"url": "http://xdsoft.net/contacts.html"
|
||||
},
|
||||
"author": {
|
||||
"name": "Chupurnov Valeriy",
|
||||
"email": "chupurnov@gmail.com",
|
||||
"url": "http://xdsoft.net/contacts.html"
|
||||
},
|
||||
"maintainers": [{
|
||||
"name": "Chupurnov Valeriy",
|
||||
"email": "chupurnov@gmail.com",
|
||||
"url": "http://xdsoft.net"
|
||||
}],
|
||||
"licenses": [
|
||||
{
|
||||
"type": "MIT",
|
||||
@ -26,6 +42,6 @@
|
||||
"docs": "http://xdsoft.net/jqplugins/datetimepicker/",
|
||||
"download": "https://github.com/xdan/datetimepicker/archive/master.zip",
|
||||
"dependencies": {
|
||||
"jquery": ">=1.5"
|
||||
"jquery": ">=1.7"
|
||||
}
|
||||
}
|
||||
993
doc.tpl
Normal file
993
doc.tpl
Normal file
@ -0,0 +1,993 @@
|
||||
<h3>DateTimepicker</h3>
|
||||
<p><input id="datetimepicker" type="text" value="2014/03/15 05:06" /></p>
|
||||
<h3>Use mask DateTimepicker</h3>
|
||||
<p><input id="datetimepicker_mask" type="text" value="" /></p>
|
||||
<h3>TimePicker</h3>
|
||||
<p><input id="datetimepicker1" type="text" /></p>
|
||||
<h3>DatePicker</h3>
|
||||
<p><input id="datetimepicker2" type="text" /></p>
|
||||
<h3>Inline DateTimePicker</h3>
|
||||
<p><input id="datetimepicker3" type="text" /></p>
|
||||
<h3>Dark theme</h3>
|
||||
<p><input id="datetimepicker_dark" type="text" /></p>
|
||||
<script type="text/javascript">// <![CDATA[
|
||||
jQuery(function(){
|
||||
jQuery('#datetimepicker_mask').datetimepicker({
|
||||
mask:'9999/19/39 29:59',
|
||||
});
|
||||
jQuery('#datetimepicker').datetimepicker();
|
||||
jQuery('#datetimepicker').datetimepicker({value:'2015/04/15 05:06'});
|
||||
jQuery('#datetimepicker1').datetimepicker({
|
||||
datepicker:false,
|
||||
format:'H:i',
|
||||
value:'12:00'
|
||||
});
|
||||
jQuery('#datetimepicker2').datetimepicker({
|
||||
timepicker:false,
|
||||
format:'d/m/Y'
|
||||
});
|
||||
jQuery('#datetimepicker3').datetimepicker({
|
||||
inline:true,
|
||||
weeks:true
|
||||
});
|
||||
jQuery('#datetimepicker_dark').datetimepicker({
|
||||
inline:true,
|
||||
theme:'dark'
|
||||
});
|
||||
});
|
||||
// ]]></script>
|
||||
[include scripts/pp/reklama1.php]
|
||||
<h2>How do I use it?</h2>
|
||||
<p>First include to page css and js files</p>
|
||||
<pre><code data-language="html"><!-- this should go after your </body> -->
|
||||
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
|
||||
<script src="jquery.js"></script>
|
||||
<script src="build/jquery.datetimepicker.full.min.js"></script></code></pre>
|
||||
<h2>Examples</h2>
|
||||
<hr id="Simple" />
|
||||
<h4>Simple init DateTimePicker Example <a href="#Simple">#</a></h4>
|
||||
<p>HTML</p>
|
||||
<pre><code data-language="html"><input id="datetimepicker" type="text" ></code></pre>
|
||||
<p><strong>javaScript</strong></p>
|
||||
<pre><code data-language="javascript">jQuery('#datetimepicker').datetimepicker();</code></pre>
|
||||
<p><strong>Result</strong></p>
|
||||
<p><input id="_datetimepicker" type="text" value="2014/03/15 05:06" /></p>
|
||||
<script type="text/javascript">// <![CDATA[
|
||||
jQuery(function(){jQuery('#_datetimepicker').datetimepicker();});
|
||||
// ]]></script>
|
||||
<hr id="i18n" />
|
||||
<h4>i18n DatePicker Example <a href="#i18n">#</a></h4>
|
||||
<p>All supported languages <a href="#lang">here</a></p>
|
||||
<p><strong>javaScript</strong></p>
|
||||
<pre><code data-language="javascript">jQuery.datetimepicker.setLocale('de');
|
||||
|
||||
jQuery('#datetimepicker1').datetimepicker({
|
||||
i18n:{
|
||||
de:{
|
||||
months:[
|
||||
'Januar','Februar','März','April',
|
||||
'Mai','Juni','Juli','August',
|
||||
'September','Oktober','November','Dezember',
|
||||
],
|
||||
dayOfWeek:[
|
||||
"So.", "Mo", "Di", "Mi",
|
||||
"Do", "Fr", "Sa.",
|
||||
]
|
||||
}
|
||||
},
|
||||
timepicker:false,
|
||||
format:'d.m.Y'
|
||||
});</code></pre>
|
||||
<p><strong>Result</strong></p>
|
||||
<p><input id="_datetimepicker1" type="text" value="15.08.2013" /></p>
|
||||
<script type="text/javascript">// <![CDATA[
|
||||
jQuery(function(){
|
||||
jQuery('#_datetimepicker1').datetimepicker({
|
||||
lang:'de',
|
||||
i18n:{de:{
|
||||
months:[
|
||||
'Januar','Februar','Marz','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'
|
||||
],
|
||||
dayOfWeek:["So.", "Mo", "Di", "Mi", "Do", "Fr", "Sa."]
|
||||
}},
|
||||
timepicker:false,
|
||||
format:'d.m.Y'
|
||||
});
|
||||
});
|
||||
// ]]></script>
|
||||
<hr id="TimePicker" />
|
||||
<h4>Only TimePicker Example <a href="#TimePicker">#</a></h4>
|
||||
<p><strong>javaScript</strong></p>
|
||||
<pre><code data-language="javascript">jQuery('#datetimepicker2').datetimepicker({
|
||||
datepicker:false,
|
||||
format:'H:i'
|
||||
});</code></pre>
|
||||
<p><strong>Result</strong></p>
|
||||
<p><input id="_datetimepicker2" type="text" value="23:16" /></p>
|
||||
<script type="text/javascript">// <![CDATA[
|
||||
jQuery(function(){
|
||||
jQuery('#_datetimepicker2').datetimepicker({
|
||||
datepicker:false,
|
||||
format:'H:i'
|
||||
});
|
||||
});
|
||||
// ]]></script>
|
||||
<h3 id="startdateex">Date Time Picker start date <a href="#startdateex">#</a></h3>
|
||||
<p><strong>javaScript</strong></p>
|
||||
<pre><code data-language="javascript">jQuery('#datetimepicker_start_time').datetimepicker({
|
||||
startDate:'+1971/05/01'//or 1986/12/08
|
||||
});</code></pre>
|
||||
<p><strong>Result</strong></p>
|
||||
<p><input id="datetimepicker_start_time" type="text" /></p>
|
||||
<script type="text/javascript">// <![CDATA[
|
||||
jQuery(function(){
|
||||
jQuery('#datetimepicker_start_time').datetimepicker({
|
||||
startDate:'+1971/05/01'
|
||||
});
|
||||
});
|
||||
// ]]></script>
|
||||
<h3 id="unixtime">Date Time Picker from unixtime <a href="#unixtime">#</a></h3>
|
||||
<p><strong>javaScript</strong></p>
|
||||
<pre><code data-language="javascript">jQuery('#datetimepicker_unixtime').datetimepicker({
|
||||
format:'unixtime'
|
||||
});</code></pre>
|
||||
<p><strong>Result</strong></p>
|
||||
<p><input id="datetimepicker_unixtime" type="text" /></p>
|
||||
<script type="text/javascript">// <![CDATA[
|
||||
jQuery(function(){
|
||||
jQuery('#datetimepicker_unixtime').datetimepicker({
|
||||
format:'unixtime'
|
||||
});
|
||||
});
|
||||
// ]]></script>
|
||||
<hr id="Inline" />
|
||||
<h4>Inline DateTimePicker Example <a href="#Inline">#</a></h4>
|
||||
<p><strong>javaScript</strong></p>
|
||||
<pre><code data-language="javascript">jQuery('#datetimepicker3').datetimepicker({
|
||||
format:'d.m.Y H:i',
|
||||
inline:true,
|
||||
lang:'ru'
|
||||
});</code></pre>
|
||||
<p><strong>Result</strong></p>
|
||||
<p><input id="_datetimepicker3" type="text" value="10.12.2013 23:45" /></p>
|
||||
<script type="text/javascript">// <![CDATA[
|
||||
jQuery(function(){
|
||||
jQuery('#_datetimepicker3').datetimepicker({
|
||||
format:'d.m.Y H:i',
|
||||
inline:true,
|
||||
lang:'en'
|
||||
});
|
||||
});
|
||||
// ]]></script>
|
||||
<hr id="trigger" />
|
||||
<h4>Icon trigger <a href="#trigger">#</a></h4>
|
||||
<p>Click the icon next to the input field to show the datetimepicker</p>
|
||||
<p><strong>javaScript</strong></p>
|
||||
<pre><code data-language="javascript">jQuery('#datetimepicker4').datetimepicker({
|
||||
format:'d.m.Y H:i',
|
||||
lang:'ru'
|
||||
});</code></pre>
|
||||
<p>and handler onclick event</p>
|
||||
<pre><code data-language="javascript">jQuery('#image_button').click(function(){
|
||||
jQuery('#datetimepicker4').datetimepicker('show'); //support hide,show and destroy command
|
||||
});</code></pre>
|
||||
<p><strong>Result</strong></p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group"><input id="_datetimepicker4" class="form-control" type="text" value="10.12.2013 23:45" /></div>
|
||||
<!-- /input-group --></div>
|
||||
<!-- /.col-lg-6 --></div>
|
||||
<!-- /.row -->
|
||||
<script type="text/javascript">// <![CDATA[
|
||||
jQuery(function(){
|
||||
jQuery('#_datetimepicker4').datetimepicker({
|
||||
format:'d.m.Y H:i',
|
||||
lang:'en'
|
||||
});
|
||||
jQuery('#image_button').click(function(){
|
||||
jQuery('#_datetimepicker4').datetimepicker('show');
|
||||
});
|
||||
});
|
||||
// ]]></script>
|
||||
<hr id="allowTimes" />
|
||||
<h4>allowTimes options TimePicker Example <a href="#allowTimes">#</a></h4>
|
||||
<p><strong>javaScript</strong></p>
|
||||
<pre><code data-language="javascript">jQuery('#datetimepicker5').datetimepicker({
|
||||
datepicker:false,
|
||||
allowTimes:[
|
||||
'12:00', '13:00', '15:00',
|
||||
'17:00', '17:05', '17:20', '19:00', '20:00'
|
||||
]
|
||||
});</code></pre>
|
||||
<p><strong>Result</strong></p>
|
||||
<p><input id="_datetimepicker5" type="text" value="23:45" /></p>
|
||||
<script type="text/javascript">// <![CDATA[
|
||||
jQuery(function(){
|
||||
jQuery('#_datetimepicker5').datetimepicker({
|
||||
datepicker:false,
|
||||
allowTimes:['12:00','13:00','15:00','17:00','17:05','17:20','19:00','20:00']
|
||||
});
|
||||
});
|
||||
// ]]></script>
|
||||
<hr id="onChangeDateTime" />
|
||||
<h4>handler onChangeDateTime Example <a href="#onChangeDateTime">#</a></h4>
|
||||
<p><strong>javaScript</strong></p>
|
||||
<pre><code data-language="javascript">jQuery('#datetimepicker6').datetimepicker({
|
||||
timepicker:false,
|
||||
onChangeDateTime:function(dp,$input){
|
||||
alert($input.val())
|
||||
}
|
||||
});</code></pre>
|
||||
<p><strong>Result</strong></p>
|
||||
<p><input id="_datetimepicker6" type="text" value="" /></p>
|
||||
<script type="text/javascript">// <![CDATA[
|
||||
jQuery(function(){
|
||||
jQuery('#_datetimepicker6').datetimepicker({
|
||||
timepicker:false,
|
||||
onChangeDateTime:function(current_time,$input){
|
||||
alert($input.val())
|
||||
}
|
||||
});
|
||||
});
|
||||
// ]]></script>
|
||||
<hr id="mindate" />
|
||||
<h4>minDate and maxDate Example <a href="#mindate">#</a></h4>
|
||||
<p><strong>javaScript</strong></p>
|
||||
<pre><code data-language="javascript">jQuery('#datetimepicker7').datetimepicker({
|
||||
timepicker:false,
|
||||
formatDate:'Y/m/d',
|
||||
minDate:'-1970/01/02',//yesterday is minimum date(for today use 0 or -1970/01/01)
|
||||
maxDate:'+1970/01/02'//tomorrow is maximum date calendar
|
||||
});</code></pre>
|
||||
<p><strong>Result</strong></p>
|
||||
<p><input id="_datetimepicker7" type="text" value="" /></p>
|
||||
<script type="text/javascript">// <![CDATA[
|
||||
jQuery(function(){
|
||||
jQuery('#_datetimepicker7').datetimepicker({
|
||||
timepicker:false,
|
||||
formatDate:'Y/m/d',
|
||||
minDate:'-1970/01/02', // yesterday is minimum date
|
||||
maxDate:'+1970/01/02' // and tomorrow is maximum date calendar
|
||||
});
|
||||
});
|
||||
// ]]></script>
|
||||
<hr id="mask" />
|
||||
<h4>Use mask input Example <a href="#mask">#</a></h4>
|
||||
<p><strong>javaScript</strong></p>
|
||||
<pre><code data-language="javascript">jQuery('#datetimepicker_mask').datetimepicker({
|
||||
timepicker:false,
|
||||
mask:true, // '9999/19/39 29:59' - digit is the maximum possible for a cell
|
||||
});</code></pre>
|
||||
<p><strong>Result</strong></p>
|
||||
<p><input id="_datetimepicker_mask" type="text" value="" /></p>
|
||||
<script type="text/javascript">// <![CDATA[
|
||||
jQuery(function(){
|
||||
jQuery('#_datetimepicker_mask').datetimepicker({
|
||||
timepicker:false,
|
||||
mask:'9999/19/39',
|
||||
format:'Y/m/d'
|
||||
});
|
||||
});
|
||||
// ]]></script>
|
||||
<hr id="runtime_options" />
|
||||
<h4>Set options runtime DateTimePicker <a href="#runtime_options">#</a></h4>
|
||||
<p>If select day is Saturday, the minimum set 11:00, otherwise 8:00</p>
|
||||
<p><strong>javaScript</strong></p>
|
||||
<pre><code data-language="javascript">var logic = function( currentDateTime ){
|
||||
// 'this' is jquery object datetimepicker
|
||||
if( currentDateTime.getDay()==6 ){
|
||||
this.setOptions({
|
||||
minTime:'11:00'
|
||||
});
|
||||
}else
|
||||
this.setOptions({
|
||||
minTime:'8:00'
|
||||
});
|
||||
};
|
||||
jQuery('#datetimepicker_rantime').datetimepicker({
|
||||
onChangeDateTime:logic,
|
||||
onShow:logic
|
||||
});</code></pre>
|
||||
<p><strong>Result</strong></p>
|
||||
<p><input id="_datetimepicker_runtime" type="text" value="" /></p>
|
||||
<script type="text/javascript">// <![CDATA[
|
||||
jQuery(function(){
|
||||
var logic = function( currentDateTime ){
|
||||
if( currentDateTime.getDay()==6 ){
|
||||
this.setOptions({
|
||||
minTime:'11:00'
|
||||
});
|
||||
}else
|
||||
this.setOptions({
|
||||
minTime:'8:00'
|
||||
});
|
||||
};
|
||||
jQuery('#_datetimepicker_runtime').datetimepicker({
|
||||
onChangeDateTime:logic,
|
||||
onShow:logic
|
||||
});
|
||||
});
|
||||
// ]]></script>
|
||||
<hr id="ongenerate" />
|
||||
<h4>After generating a calendar called the event onGenerate <a href="#ongenerate">#</a></h4>
|
||||
<p>Invert settings minDate and maxDate</p>
|
||||
<p><strong>javaScript</strong></p>
|
||||
<pre><code data-language="javascript">jQuery('#datetimepicker8').datetimepicker({
|
||||
onGenerate:function( ct ){
|
||||
jQuery(this).find('.xdsoft_date')
|
||||
.toggleClass('xdsoft_disabled');
|
||||
},
|
||||
minDate:'-1970/01/2',
|
||||
maxDate:'+1970/01/2',
|
||||
timepicker:false
|
||||
});</code></pre>
|
||||
<p><strong>Result</strong></p>
|
||||
<p><input id="_datetimepicker_ongenerate" type="text" value="" /></p>
|
||||
<script type="text/javascript">// <![CDATA[
|
||||
jQuery(function(){
|
||||
jQuery('#_datetimepicker_ongenerate').datetimepicker({
|
||||
onGenerate:function( ct ){
|
||||
jQuery(this).find('.xdsoft_date')
|
||||
.toggleClass('xdsoft_disabled');
|
||||
},
|
||||
minDate:'-1970/01/2',
|
||||
maxDate:'+1970/01/2',
|
||||
timepicker:false
|
||||
});
|
||||
});
|
||||
// ]]></script>
|
||||
<hr id="weekends_disable" />
|
||||
<h4>disable all weekend <a href="#weekends_disable">#</a></h4>
|
||||
<p><strong>javaScript</strong></p>
|
||||
<pre><code data-language="javascript">jQuery('#datetimepicker9').datetimepicker({
|
||||
onGenerate:function( ct ){
|
||||
jQuery(this).find('.xdsoft_date.xdsoft_weekend')
|
||||
.addClass('xdsoft_disabled');
|
||||
},
|
||||
weekends:['01.01.2014','02.01.2014','03.01.2014','04.01.2014','05.01.2014','06.01.2014'],
|
||||
timepicker:false
|
||||
});</code></pre>
|
||||
<p><strong>Result</strong></p>
|
||||
<p><input id="_datetimepicker_weekends_disable" type="text" value="" /></p>
|
||||
<script type="text/javascript">// <![CDATA[
|
||||
jQuery(function(){
|
||||
jQuery('#_datetimepicker_weekends_disable').datetimepicker({
|
||||
onGenerate:function( ct ){
|
||||
jQuery(this).find('.xdsoft_date.xdsoft_weekend')
|
||||
.addClass('xdsoft_disabled');
|
||||
},
|
||||
weekends:['01.01.2014','02.01.2014','03.01.2014','04.01.2014','05.01.2014','06.01.2014'],
|
||||
timepicker:false
|
||||
});
|
||||
});
|
||||
// ]]></script>
|
||||
<hr id="use_other_date_parser" />
|
||||
<h4>Use another date parser/formatter<a href="#use_other_date_parser">#</a></h4>
|
||||
<p>By default, datetimepicker uses <a href="https://github.com/kartik-v/php-date-formatter">php-date-formatter</a> for parsing and formatting the date and time displayed. You can replace the library by setting a custom DateFormatter. Simply supply an object that implements the <tt>parseDate</tt> and <tt>formatDate</tt> methods. This example uses the popular <a href="http://momentjs.com/">MomentJS</a> library:</p>
|
||||
<pre><code data-language="javascript">$.datetimepicker.setDateFormatter({
|
||||
parseDate: function (date, format) {
|
||||
var d = moment(date, format);
|
||||
return d.isValid() ? d.toDate() : false;
|
||||
},
|
||||
|
||||
formatDate: function (date, format) {
|
||||
return moment(date).format(format);
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
<p>After this, you can init datetimepicker with moment.js <a href="http://momentjs.com/docs/#/parsing/string-format/" target="_blanc" rel="nofollow">format</a></p>
|
||||
<pre><code data-language="javascript">jQuery('#datetimepicker').datetimepicker({
|
||||
format:'DD.MM.YYYY h:mm a',
|
||||
formatTime:'h:mm a',
|
||||
formatDate:'DD.MM.YYYY'
|
||||
});</code></pre>
|
||||
<hr id="range" />
|
||||
<h4>Range between date<a href="#range">#</a></h4>
|
||||
<p><strong>javaScript</strong></p>
|
||||
<pre><code data-language="javascript">jQuery(function(){
|
||||
jQuery('#date_timepicker_start').datetimepicker({
|
||||
format:'Y/m/d',
|
||||
onShow:function( ct ){
|
||||
this.setOptions({
|
||||
maxDate:jQuery('#date_timepicker_end').val()?jQuery('#date_timepicker_end').val():false
|
||||
})
|
||||
},
|
||||
timepicker:false
|
||||
});
|
||||
jQuery('#date_timepicker_end').datetimepicker({
|
||||
format:'Y/m/d',
|
||||
onShow:function( ct ){
|
||||
this.setOptions({
|
||||
minDate:jQuery('#date_timepicker_start').val()?jQuery('#date_timepicker_start').val():false
|
||||
})
|
||||
},
|
||||
timepicker:false
|
||||
});
|
||||
});</code></pre>
|
||||
<p><strong>Result</strong></p>
|
||||
<p>Start <input id="date_timepicker_start" type="text" value="" /> End <input id="date_timepicker_end" type="text" value="" /></p>
|
||||
<script type="text/javascript">// <![CDATA[
|
||||
jQuery(function(){
|
||||
jQuery('#date_timepicker_start').datetimepicker({
|
||||
format:'Y/m/d',
|
||||
onShow:function( ct ){
|
||||
this.setOptions({
|
||||
maxDate:jQuery('#date_timepicker_end').val()?jQuery('#date_timepicker_end').val():false
|
||||
})
|
||||
},
|
||||
timepicker:false
|
||||
});
|
||||
jQuery('#date_timepicker_end').datetimepicker({
|
||||
format:'Y/m/d',
|
||||
onShow:function( ct ){
|
||||
this.setOptions({
|
||||
minDate:jQuery('#date_timepicker_start').val()?jQuery('#date_timepicker_start').val():false
|
||||
})
|
||||
},
|
||||
timepicker:false
|
||||
});
|
||||
});
|
||||
// ]]></script>
|
||||
[include scripts/pp/reklama2.php]
|
||||
{module 147}
|
||||
<h2>Full options list</h2>
|
||||
<table class="table table-condensed table-bordered table-striped">
|
||||
<thead>
|
||||
<tr><th style="text-align: center;"><strong>Name</strong></th><th style="text-align: center;"><strong> default</strong></th><th style="text-align: center;"><strong>Descr</strong></th><th style="width: 200px; text-align: center;"><strong>Ex.</strong></th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr id="lazyInit">
|
||||
<td><a href="#lazyInit">lazyInit</a></td>
|
||||
<td>false</td>
|
||||
<td>Initializing plugin occurs only when the user interacts. Greatly accelerates plugin work with a large number of fields</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr id="value">
|
||||
<td><a href="#value">value</a></td>
|
||||
<td>null</td>
|
||||
<td>Current value datetimepicker. If it is set, ignored input.value</td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">{value:'12.03.2013',
|
||||
format:'d.m.Y'}</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="lang">
|
||||
<td><a href="#lang">lang</a></td>
|
||||
<td>en</td>
|
||||
<td>Language i18n<br />
|
||||
|
||||
<strong>ar</strong> - Arabic
|
||||
<br /><strong>az</strong> - Azerbaijanian (Azeri)
|
||||
<br /><strong>bg</strong> - Bulgarian
|
||||
<br /><strong>bs</strong> - Bosanski
|
||||
<br /><strong>ca</strong> - Català
|
||||
<br /><strong>ch</strong> - Simplified Chinese
|
||||
<br /><strong>cs</strong> - Čeština
|
||||
<br /><strong>da</strong> - Dansk
|
||||
<br /><strong>de</strong> - German
|
||||
<br /><strong>el</strong> - Ελληνικά
|
||||
<br /><strong>en</strong> - English
|
||||
<br /><strong>en-GB</strong> - English (British)
|
||||
<br /><strong>es</strong> - Spanish
|
||||
<br /><strong>et</strong> - "Eesti"
|
||||
<br /><strong>eu</strong> - Euskara
|
||||
<br /><strong>fa</strong> - Persian
|
||||
<br /><strong>fi</strong> - Finnish (Suomi)
|
||||
<br /><strong>fr</strong> - French
|
||||
<br /><strong>gl</strong> - Galego
|
||||
<br /><strong>he</strong> - Hebrew (עברית)
|
||||
<br /><strong>hr</strong> - Hrvatski
|
||||
<br /><strong>hu</strong> - Hungarian
|
||||
<br /><strong>id</strong> - Indonesian
|
||||
<br /><strong>it</strong> - Italian
|
||||
<br /><strong>ja</strong> - Japanese
|
||||
<br /><strong>ko</strong> - Korean (한국어)
|
||||
<br /><strong>kr</strong> - Korean
|
||||
<br /><strong>lt</strong> - Lithuanian (lietuvių)
|
||||
<br /><strong>lv</strong> - Latvian (Latviešu)
|
||||
<br /><strong>mk</strong> - Macedonian (Македонски)
|
||||
<br /><strong>mn</strong> - Mongolian (Монгол)
|
||||
<br /><strong>nl</strong> - Dutch
|
||||
<br /><strong>no</strong> - Norwegian
|
||||
<br /><strong>pl</strong> - Polish
|
||||
<br /><strong>pt</strong> - Portuguese
|
||||
<br /><strong>pt-BR</strong> - Português(Brasil)
|
||||
<br /><strong>ro</strong> - Romanian
|
||||
<br /><strong>ru</strong> - Russian
|
||||
<br /><strong>se</strong> - Swedish
|
||||
<br /><strong>sk</strong> - Slovenčina
|
||||
<br /><strong>sl</strong> - Slovenščina
|
||||
<br /><strong>sq</strong> - Albanian (Shqip)
|
||||
<br /><strong>sr</strong> - Serbian Cyrillic (Српски)
|
||||
<br /><strong>sr-YU</strong> - Serbian (Srpski)
|
||||
<br /><strong>sv</strong> - Svenska
|
||||
<br /><strong>th</strong> - Thai
|
||||
<br /><strong>tr</strong> - Turkish
|
||||
<br /><strong>uk</strong> - Ukrainian
|
||||
<br /><strong>vi</strong> - Vietnamese
|
||||
<br /><strong>zh</strong> - Simplified Chinese (简体中文)
|
||||
<br /><strong>zh-TW</strong> - Traditional Chinese (繁體中文)
|
||||
<br />
|
||||
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">$.datetimepicker.setLocale('ru');</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="format">
|
||||
<td><a href="#format">format</a></td>
|
||||
<td>Y/m/d H:i</td>
|
||||
<td>Format datetime. <a href="http://php.net/manual/ru/function.date.php" target="_blank">More</a> Also there is a special type of <a href="#unixtime"><em>«unixtime»</em></a></td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">{format:'H'}
|
||||
{format:'Y'}{format:'unixtime'}</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="formatDate">
|
||||
<td><a href="#formatDate">formatDate</a></td>
|
||||
<td>Y/m/d</td>
|
||||
<td>Format date for minDate and maxDate</td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">{formatDate:'d.m.Y'}</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="formatTime">
|
||||
<td><a href="#formatTime">formatTime</a></td>
|
||||
<td>H:i</td>
|
||||
<td> Similarly, formatDate . But for minTime and maxTime</td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">{formatTime:'H'}</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="step">
|
||||
<td><a href="#step">step</a></td>
|
||||
<td>60</td>
|
||||
<td>Step time</td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">{step:5}</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="closeOnDateSelect">
|
||||
<td><a href="#closeOnDateSelect">closeOnDateSelect</a></td>
|
||||
<td>0</td>
|
||||
<td> </td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">{closeOnDateSelect:true}</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="closeOnWithoutClick">
|
||||
<td><a href="#closeOnWithoutClick">closeOnWithoutClick</a></td>
|
||||
<td>true</td>
|
||||
<td> </td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">{ closeOnWithoutClick :false}</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="validateOnBlur">
|
||||
<td><a href="#validateOnBlur">validateOnBlur</a></td>
|
||||
<td>true</td>
|
||||
<td>Verify datetime value from input, when losing focus. If value is not valid datetime, then to value inserts the current datetime</td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">{ validateOnBlur:false}</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="timepicker">
|
||||
<td><a href="#timepicker">timepicker</a></td>
|
||||
<td>true</td>
|
||||
<td> </td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">{timepicker:false}</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="datepicker">
|
||||
<td><a href="#datepicker">datepicker</a></td>
|
||||
<td>true</td>
|
||||
<td> </td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">{datepicker:false}</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="weeks">
|
||||
<td><a href="#weeks">weeks</a></td>
|
||||
<td>false</td>
|
||||
<td>Show week number</td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">{weeks:true}</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="theme">
|
||||
<td><a href="#theme">theme</a></td>
|
||||
<td>'default'</td>
|
||||
<td>Setting a color scheme. Now only supported default and dark theme</td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">{theme:'dark'}</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="minDate">
|
||||
<td><a href="#minDate">minDate</a></td>
|
||||
<td>false</td>
|
||||
<td> </td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">{minDate:0} // today
|
||||
{minDate:'2013/12/03'}
|
||||
{minDate:'-1970/01/02'} // yesterday
|
||||
{minDate:'05.12.2013',formatDate:'d.m.Y'}</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="maxDate">
|
||||
<td><a href="#maxDate">maxDate</a></td>
|
||||
<td>false</td>
|
||||
<td> </td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">{maxDate:0}
|
||||
{maxDate:'2013/12/03'}
|
||||
{maxDate:'+1970/01/02'} // tomorrow
|
||||
{maxDate:'05.12.2013',formatDate:'d.m.Y'}</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="startDate">
|
||||
<td><a href="#starDate">startDate</a></td>
|
||||
<td>false</td>
|
||||
<td>calendar set date use starDate</td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">{startDate:'1987/12/03'}
|
||||
{startDate:new Date()}
|
||||
{startDate:'+1970/01/02'} // tomorrow
|
||||
{startDate:'08.12.1986',formatDate:'d.m.Y'}</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="defaultDate">
|
||||
<td><a href="#defaultDate">defaultDate</a></td>
|
||||
<td>false</td>
|
||||
<td>if input value is empty, calendar set date use defaultDate</td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">{defaultDate:'1987/12/03'}
|
||||
{defaultDate:new Date()}
|
||||
{defaultDate:'+1970/01/02'} // tomorrow
|
||||
{defaultDate:'08.12.1986',formatDate:'d.m.Y'}</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="defaultTime">
|
||||
<td><a href="#defaultTime">defaultTime</a></td>
|
||||
<td>false</td>
|
||||
<td>if input value is empty, timepicker set time use defaultTime</td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">{defaultTime:'05:00'}
|
||||
{defaultTime:'33-12',formatTime:'i-H'}</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr id="minTime">
|
||||
<td><a href="#minTime">minTime</a></td>
|
||||
<td>false</td>
|
||||
<td> </td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">{minTime:0,}// now
|
||||
{minTime:new Date()}
|
||||
{minTime:'12:00'}
|
||||
{minTime:'13:45:34',formatTime:'H:i:s'}</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="maxTime">
|
||||
<td><a href="#maxTime">maxTime</a></td>
|
||||
<td>false</td>
|
||||
<td> </td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">{maxTime:0,}
|
||||
{maxTime:'12:00'}
|
||||
{maxTime:'13:45:34',formatTime:'H:i:s'}</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="allowTimes">
|
||||
<td><a href="#allowTimes">allowTimes</a></td>
|
||||
<td>[]</td>
|
||||
<td> </td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">{allowTimes:[
|
||||
'09:00',
|
||||
'11:00',
|
||||
'12:00',
|
||||
'21:00'
|
||||
]}</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="mask">
|
||||
<td><a href="#mask">mask</a></td>
|
||||
<td>false</td>
|
||||
<td>Use mask for input. true - automatically generates a mask on the field 'format', Digit from 0 to 9, set the highest possible digit for the value. For example: the first digit of hours can not be greater than 2, and the first digit of the minutes can not be greater than 5</td>
|
||||
<td>
|
||||
<pre>{mask:'9999/19/39',format:'Y/m/d'}
|
||||
{mask:true,format:'Y/m/d'} // automatically generate a mask 9999/99/99
|
||||
{mask:'29:59',format:'H:i'} //
|
||||
{mask:true,format:'H:i'} //automatically generate a mask 99:99</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="opened">
|
||||
<td><a href="#opened">opened</a></td>
|
||||
<td>false</td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr id="yearoffset">
|
||||
<td><a href="#yearoffset">yearOffset</a></td>
|
||||
<td>0</td>
|
||||
<td>Year offset for Buddhist era</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr id="inline">
|
||||
<td><a href="#inline">inline</a></td>
|
||||
<td>false</td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr id="todayButton">
|
||||
<td><a href="#todayButton">todayButton</a></td>
|
||||
<td>true</td>
|
||||
<td>Show button "Go To Today"</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr id="defaultSelect">
|
||||
<td><a href="#defaultSelect">defaultSelect</a></td>
|
||||
<td>true</td>
|
||||
<td>Highlight the current date even if the input is empty</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr id="allowBlank">
|
||||
<td><a href="#allowBlank">allowBlank</a></td>
|
||||
<td>false</td>
|
||||
<td>Allow field to be empty even with the option <a href="#validateOnBlur">validateOnBlur</a> in true</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr id="timepickerScrollbar">
|
||||
<td><a href="#timepickerScrollbar">timepickerScrollbar</a></td>
|
||||
<td>true</td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr id="onSelectDate">
|
||||
<td><a href="#onSelectDate">onSelectDate</a></td>
|
||||
<td>function(){}</td>
|
||||
<td> </td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">onSelectDate:function(ct,$i){
|
||||
alert(ct.dateFormat('d/m/Y'))
|
||||
}</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="onSelectTime">
|
||||
<td><a href="#onSelectTime">onSelectTime</a></td>
|
||||
<td>function(current_time,$input){}</td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr id="onChangeMonth">
|
||||
<td><a href="#onChangeMonth">onChangeMonth</a></td>
|
||||
<td>function(current_time,$input){}</td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr id="onChangeYear">
|
||||
<td><a href="#onChangeYear">onChangeYear</a></td>
|
||||
<td>function(current_time,$input){}</td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr id="onChangeDateTime">
|
||||
<td><a href="#onChangeDateTime">onChangeDateTime</a></td>
|
||||
<td>function(current_time,$input){}</td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr id="onShow">
|
||||
<td><a href="#onShow">onShow</a></td>
|
||||
<td>function(current_time,$input){}</td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr id="onClose">
|
||||
<td><a href="#onClose">onClose</a></td>
|
||||
<td>function(current_time,$input){}</td>
|
||||
<td> </td>
|
||||
<td><pre><code data-language="javascript">onSelectDate:function(ct,$i){
|
||||
$i.datetimepicker('destroy');
|
||||
}</code></pre></td>
|
||||
</tr>
|
||||
<tr id="onGenerate">
|
||||
<td><a href="#onGenerate">onGenerate</a></td>
|
||||
<td>function(current_time,$input){}</td>
|
||||
<td>trigger after construct calendar and timepicker</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>withoutCopyright</td>
|
||||
<td>true</td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr id="inverseButton">
|
||||
<td><a href="#inverseButton">inverseButton</a></td>
|
||||
<td>false</td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr id="scrollMonth">
|
||||
<td><a href="#scrollMonth">scrollMonth</a></td>
|
||||
<td>true</td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr id="scrollTime">
|
||||
<td><a href="#scrollTime">scrollTime</a></td>
|
||||
<td>true</td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr id="scrollInput">
|
||||
<td><a href="#scrollInput">scrollInput</a></td>
|
||||
<td>true</td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr id="hours12">
|
||||
<td><a href="#hours12">hours12</a></td>
|
||||
<td>false</td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr id="yearStart">
|
||||
<td><a href="#yearStart">yearStart</a></td>
|
||||
<td>1950</td>
|
||||
<td>Start value for fast Year selector</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr id="yearEnd">
|
||||
<td><a href="#yearEnd">yearEnd</a></td>
|
||||
<td>2050</td>
|
||||
<td>End value for fast Year selector</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr id="roundTime">
|
||||
<td><a href="#roundTime">roundTime</a></td>
|
||||
<td>round</td>
|
||||
<td>Round time in timepicker, possible values: round, ceil, floor</td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">{roundTime:'floor'}</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="dayOfWeekStart">
|
||||
<td><a href="#dayOfWeekStart">dayOfWeekStart</a></td>
|
||||
<td>0</td>
|
||||
<td>
|
||||
<p>Star week DatePicker. Default Sunday - 0.</p>
|
||||
<p>Monday - 1 ...</p>
|
||||
</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr id="className">
|
||||
<td>className</td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr id="weekends">
|
||||
<td><a href="#weekends">weekends</a></td>
|
||||
<td>[]</td>
|
||||
<td> </td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">['01.01.2014','02.01.2014','03.01.2014','04.01.2014','05.01.2014','06.01.2014']</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="disabledDates">
|
||||
<td><a href="#disabledDates">disabledDates</a></td>
|
||||
<td>[]</td>
|
||||
<td><p>Disbale all dates in list</p></td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">{disabledDates: ['01.01.2014','02.01.2014','03.01.2014','04.01.2014','05.01.2014','06.01.2014'], formatDate:'d.m.Y'}</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="allowDates">
|
||||
<td><a href="#allowDates">allowDates</a></td>
|
||||
<td>[]</td>
|
||||
<td><p>Allow all dates in list</p></td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">{allowDates: ['01.01.2014','02.01.2014','03.01.2014','04.01.2014','05.01.2014','06.01.2014'], formatDate:'d.m.Y'}</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="allowDateRe">
|
||||
<td><a href="#allowDateRe">allowDateRe</a></td>
|
||||
<td>[]</td>
|
||||
<td><p>Use Regex to check dates</p></td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">{format:'Y-m-d',allowDateRe:'\d{4}-(03-31|06-30|09-30|12-31)' }</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="disabledWeekDays">
|
||||
<td><a href="#disabledWeekDays">disabledWeekDays</a></td>
|
||||
<td>[]</td>
|
||||
<td><p>Disable days listed by index</p></td>
|
||||
<td>
|
||||
<pre><code data-language="javascript">[0, 3, 4]</code></pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="id">
|
||||
<td>id</td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr id="style">
|
||||
<td>style</td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr id="ownerDocument">
|
||||
<td>ownerDocument</td>
|
||||
<td>document</td>
|
||||
<td>The ownerDocument object for the datetimepicker to properly attach events and calc position (iframe support).</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr id="contentWindow">
|
||||
<td>contentWindow</td>
|
||||
<td>window</td>
|
||||
<td>The contentWindow object that contains the datetimepicker to properly attach events (iframe support).</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h2 id="methods">Methods</h2>
|
||||
<h3>show</h3>
|
||||
<p>Show Datetimepicker</p>
|
||||
<pre><code data-language="javascript">$('#input').datetimepicker();
|
||||
$('button.somebutton').on('click', function () {
|
||||
$('#input').datetimepicker('show');
|
||||
});</code></pre>
|
||||
<h3>hide</h3>
|
||||
<p>Hide Datetimepicker</p>
|
||||
<pre><code data-language="javascript">$('#input').datetimepicker();
|
||||
$(window).on('resize', function () {
|
||||
$('#input').datetimepicker('hide');
|
||||
});</code></pre>
|
||||
<h3>toggle</h3>
|
||||
<p>Sgow/Hide Datetimepicker</p>
|
||||
<pre><code data-language="javascript">$('#input').datetimepicker();
|
||||
$('button.trigger').on('click', function () {
|
||||
$('#input').datetimepicker('toggle');
|
||||
});</code></pre>
|
||||
<h3>destroy</h3>
|
||||
<p>Destroy datetimepicker</p>
|
||||
<pre><code data-language="javascript">$('#input').datetimepicker();
|
||||
$('#input').datetimepicker('destroy');
|
||||
</code></pre>
|
||||
<h3>reset</h3>
|
||||
<p>Reset datetimepicker's value</p>
|
||||
<pre><code data-language="javascript">$('#input').datetimepicker();
|
||||
$('#input').val('12/01/2006');
|
||||
$('#input')
|
||||
.datetimepicker('show')
|
||||
.datetimepicker('reset')
|
||||
</code></pre>
|
||||
<h3>validate</h3>
|
||||
<p>Validate datetimepicker's value </p>
|
||||
<pre><code data-language="javascript">$('#input').datetimepicker();
|
||||
$('#input').datetimepicker(validate)
|
||||
</code></pre>
|
||||
<h3>setOptions</h3>
|
||||
<p>Set datetimepicker's options </p>
|
||||
<pre><code data-language="javascript">$('#input').datetimepicker({format: 'd.m.Y'});
|
||||
$('#input').datetimepicker('setOptions', {format: 'd/m/Y'});
|
||||
//or
|
||||
$('#input').datetimepicker({format: 'd/m/Y'});
|
||||
</code></pre>
|
||||
<h3>getValue</h3>
|
||||
<p>Get current datetimepicker's value (Date object) </p>
|
||||
<pre><code data-language="javascript">$('#input').datetimepicker();
|
||||
$('button.somebutton').on('click', function () {
|
||||
var d = $('#input').datetimepicker('getValue');
|
||||
console.log(d.getFullYear());
|
||||
});
|
||||
</code></pre>
|
||||
222
index.html
222
index.html
@ -1,27 +1,225 @@
|
||||
<html>
|
||||
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
|
||||
<link rel="stylesheet" type="text/css" href="./jquery.datetimepicker.css"/>
|
||||
<style type="text/css">
|
||||
|
||||
.custom-date-style {
|
||||
background-color: red !important;
|
||||
}
|
||||
|
||||
.input{
|
||||
}
|
||||
.input-wide{
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<input type="text" value="2014/03/15 05:06" id="datetimepicker"/>
|
||||
<input type="text" id="datetimepicker1"/>
|
||||
<input type="text" id="datetimepicker2"/>
|
||||
<input type="text" id="datetimepicker3"/>
|
||||
|
||||
<p><a href="http://xdsoft.net/jqplugins/datetimepicker/">Homepage</a></p>
|
||||
<h3>DateTimePicker</h3>
|
||||
<input type="text" value="" id="datetimepicker"/><br><br>
|
||||
<h3>DateTimePickers selected by class</h3>
|
||||
<input type="text" class="some_class" value="" id="some_class_1"/>
|
||||
<input type="text" class="some_class" value="" id="some_class_2"/>
|
||||
<h3>Mask DateTimePicker</h3>
|
||||
<input type="text" value="" id="datetimepicker_mask"/><br><br>
|
||||
<h3>TimePicker</h3>
|
||||
<input type="text" id="datetimepicker1"/><br><br>
|
||||
<h3>DatePicker</h3>
|
||||
<input type="text" id="datetimepicker2"/><br><br>
|
||||
<h3>Inline DateTimePicker</h3>
|
||||
<!--<div id="console" style="background-color:#fff;color:red">sdfdsfsdf</div>-->
|
||||
<input type="text" id="datetimepicker3"/><input type="button" onclick="$('#datetimepicker3').datetimepicker({value:'2011/12/11 12:00'})" value="set inline value 2011/12/11 12:00"/><br><br>
|
||||
<h3>Button Trigger</h3>
|
||||
<input type="text" value="2013/12/03 18:00" id="datetimepicker4"/><input id="open" type="button" value="open"/><input id="close" type="button" value="close"/><input id="reset" type="button" value="reset"/>
|
||||
<h3>TimePicker allows time</h3>
|
||||
<input type="text" id="datetimepicker5"/><br><br>
|
||||
<h3>Destroy DateTimePicker</h3>
|
||||
<input type="text" id="datetimepicker6"/><input id="destroy" type="button" value="destroy"/>
|
||||
<h3>Set options runtime DateTimePicker</h3>
|
||||
<input type="text" id="datetimepicker7"/>
|
||||
<p>If select day is Saturday, the minimum set 11:00, otherwise 8:00</p>
|
||||
<h3>onGenerate</h3>
|
||||
<input type="text" id="datetimepicker8"/>
|
||||
<h3>disable all weekend</h3>
|
||||
<input type="text" id="datetimepicker9"/>
|
||||
<h3>Default date and time </h3>
|
||||
<input type="text" id="default_datetimepicker"/>
|
||||
<h3>Show inline</h3>
|
||||
<a href="javascript:void(0)" onclick="var si = document.getElementById('show_inline').style; si.display = (si.display=='none')?'block':'none';return false; ">Show/Hide</a>
|
||||
<div id="show_inline" style="display:none">
|
||||
<input type="text" id="datetimepicker10"/>
|
||||
</div>
|
||||
<h3>Disable Specific Dates</h3>
|
||||
<p>Disable the dates 2 days from now.</p>
|
||||
<input type="text" id="datetimepicker11"/>
|
||||
<h3>Custom Date Styling</h3>
|
||||
<p>Make the background of the date 2 days from now bright red.</p>
|
||||
<input type="text" id="datetimepicker12"/>
|
||||
<h3>Dark theme</h3>
|
||||
<p>thank for this <a href="https://github.com/lampslave">https://github.com/lampslave</a></p>
|
||||
<input type="text" id="datetimepicker_dark"/>
|
||||
<h3>Date time format and locale</h3>
|
||||
<p></p>
|
||||
<select id="datetimepicker_format_locale">
|
||||
<option value="en">English</option>
|
||||
<option value="de">German</option>
|
||||
<option value="ru">Russian</option>
|
||||
<option value="uk">Ukrainian</option>
|
||||
<option value="fr">French</option>
|
||||
<option value="es">Spanish</option>
|
||||
</select>
|
||||
<input type="text" value="D, l, M, F, Y-m-d H:i:s" id="datetimepicker_format_value"/>
|
||||
<input type="button" value="applay =>" id="datetimepicker_format_change"/>
|
||||
<input type="text" id="datetimepicker_format" class="input input-wide"/>
|
||||
</body>
|
||||
<script src="jquery.js"></script>
|
||||
<script src="./jquery.js"></script>
|
||||
<script src="node_modules/php-date-formatter/js/php-date-formatter.min.js"></script>
|
||||
<script src="node_modules/jquery-mousewheel/jquery.mousewheel.js"></script>
|
||||
<script src="jquery.datetimepicker.js"></script>
|
||||
<script>
|
||||
$('#datetimepicker').datetimepicker();
|
||||
$('#datetimepicker').datetimepicker({value:'2015/04/15 05:06'});
|
||||
<script>/*
|
||||
window.onerror = function(errorMsg) {
|
||||
$('#console').html($('#console').html()+'<br>'+errorMsg)
|
||||
}*/
|
||||
|
||||
$.datetimepicker.setLocale('en');
|
||||
|
||||
$('#datetimepicker_format').datetimepicker({value:'2015/04/15 05:03', format: $("#datetimepicker_format_value").val()});
|
||||
console.log($('#datetimepicker_format').datetimepicker('getValue'));
|
||||
|
||||
$("#datetimepicker_format_change").on("click", function(e){
|
||||
$("#datetimepicker_format").data('xdsoft_datetimepicker').setOptions({format: $("#datetimepicker_format_value").val()});
|
||||
});
|
||||
$("#datetimepicker_format_locale").on("change", function(e){
|
||||
$.datetimepicker.setLocale($(e.currentTarget).val());
|
||||
});
|
||||
|
||||
$('#datetimepicker').datetimepicker({
|
||||
dayOfWeekStart : 1,
|
||||
lang:'en',
|
||||
disabledDates:['1986/01/08','1986/01/09','1986/01/10'],
|
||||
startDate: '1986/01/05'
|
||||
});
|
||||
$('#datetimepicker').datetimepicker({value:'2015/04/15 05:03',step:10});
|
||||
|
||||
$('.some_class').datetimepicker();
|
||||
|
||||
$('#default_datetimepicker').datetimepicker({
|
||||
formatTime:'H:i',
|
||||
formatDate:'d.m.Y',
|
||||
//defaultDate:'8.12.1986', // it's my birthday
|
||||
defaultDate:'+03.01.1970', // it's my birthday
|
||||
defaultTime:'10:00',
|
||||
timepickerScrollbar:false
|
||||
});
|
||||
|
||||
$('#datetimepicker10').datetimepicker({
|
||||
step:5,
|
||||
inline:true
|
||||
});
|
||||
$('#datetimepicker_mask').datetimepicker({
|
||||
mask:'9999/19/39 29:59'
|
||||
});
|
||||
|
||||
$('#datetimepicker1').datetimepicker({
|
||||
datepicker:false,
|
||||
format:'H:i',
|
||||
value:'12:00',
|
||||
step:5
|
||||
});
|
||||
$('#datetimepicker2').datetimepicker({
|
||||
yearOffset:222,
|
||||
lang:'ch',
|
||||
timepicker:false,
|
||||
format:'d/m/Y',
|
||||
formatDate:'Y/m/d',
|
||||
minDate:'-1970/01/02', // yesterday is minimum date
|
||||
maxDate:'+1970/01/02' // and tommorow is maximum date calendar
|
||||
});
|
||||
$('#datetimepicker3').datetimepicker({
|
||||
inline:true,
|
||||
inline:true
|
||||
});
|
||||
$('#datetimepicker4').datetimepicker();
|
||||
$('#open').click(function(){
|
||||
$('#datetimepicker4').datetimepicker('show');
|
||||
});
|
||||
$('#close').click(function(){
|
||||
$('#datetimepicker4').datetimepicker('hide');
|
||||
});
|
||||
$('#reset').click(function(){
|
||||
$('#datetimepicker4').datetimepicker('reset');
|
||||
});
|
||||
$('#datetimepicker5').datetimepicker({
|
||||
datepicker:false,
|
||||
allowTimes:['12:00','13:00','15:00','17:00','17:05','17:20','19:00','20:00'],
|
||||
step:5
|
||||
});
|
||||
$('#datetimepicker6').datetimepicker();
|
||||
$('#destroy').click(function(){
|
||||
if( $('#datetimepicker6').data('xdsoft_datetimepicker') ){
|
||||
$('#datetimepicker6').datetimepicker('destroy');
|
||||
this.value = 'create';
|
||||
}else{
|
||||
$('#datetimepicker6').datetimepicker();
|
||||
this.value = 'destroy';
|
||||
}
|
||||
});
|
||||
var logic = function( currentDateTime ){
|
||||
if (currentDateTime && currentDateTime.getDay() == 6){
|
||||
this.setOptions({
|
||||
minTime:'11:00'
|
||||
});
|
||||
}else
|
||||
this.setOptions({
|
||||
minTime:'8:00'
|
||||
});
|
||||
};
|
||||
$('#datetimepicker7').datetimepicker({
|
||||
onChangeDateTime:logic,
|
||||
onShow:logic
|
||||
});
|
||||
$('#datetimepicker8').datetimepicker({
|
||||
onGenerate:function( ct ){
|
||||
$(this).find('.xdsoft_date')
|
||||
.toggleClass('xdsoft_disabled');
|
||||
},
|
||||
minDate:'-1970/01/2',
|
||||
maxDate:'+1970/01/2',
|
||||
timepicker:false
|
||||
});
|
||||
$('#datetimepicker9').datetimepicker({
|
||||
onGenerate:function( ct ){
|
||||
$(this).find('.xdsoft_date.xdsoft_weekend')
|
||||
.addClass('xdsoft_disabled');
|
||||
},
|
||||
weekends:['01.01.2014','02.01.2014','03.01.2014','04.01.2014','05.01.2014','06.01.2014'],
|
||||
timepicker:false
|
||||
});
|
||||
var dateToDisable = new Date();
|
||||
dateToDisable.setDate(dateToDisable.getDate() + 2);
|
||||
$('#datetimepicker11').datetimepicker({
|
||||
beforeShowDay: function(date) {
|
||||
if (date.getMonth() == dateToDisable.getMonth() && date.getDate() == dateToDisable.getDate()) {
|
||||
return [false, ""]
|
||||
}
|
||||
|
||||
return [true, ""];
|
||||
}
|
||||
});
|
||||
$('#datetimepicker12').datetimepicker({
|
||||
beforeShowDay: function(date) {
|
||||
if (date.getMonth() == dateToDisable.getMonth() && date.getDate() == dateToDisable.getDate()) {
|
||||
return [true, "custom-date-style"];
|
||||
}
|
||||
|
||||
return [true, ""];
|
||||
}
|
||||
});
|
||||
$('#datetimepicker_dark').datetimepicker({theme:'dark'})
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,211 +1,568 @@
|
||||
.xdsoft_datetimepicker{
|
||||
box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.506);
|
||||
background: #FFFFFF;
|
||||
border-bottom: 1px solid #BBBBBB;
|
||||
border-left: 1px solid #CCCCCC;
|
||||
border-right: 1px solid #CCCCCC;
|
||||
border-top: 1px solid #CCCCCC;
|
||||
color: #333333;
|
||||
display: block;
|
||||
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
||||
.xdsoft_datetimepicker {
|
||||
box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506);
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #bbb;
|
||||
border-left: 1px solid #ccc;
|
||||
border-right: 1px solid #ccc;
|
||||
border-top: 1px solid #ccc;
|
||||
color: #333;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
padding: 8px;
|
||||
padding-left: 0px;
|
||||
padding-left: 0;
|
||||
padding-top: 2px;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
display:none;
|
||||
display: none;
|
||||
}
|
||||
.xdsoft_datetimepicker.xdsoft_rtl {
|
||||
padding: 8px 0 8px 8px;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker iframe {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 75px;
|
||||
height: 210px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/*For IE8 or lower*/
|
||||
.xdsoft_datetimepicker button {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.xdsoft_noselect {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.xdsoft_datetimepicker.xdsoft_inline{
|
||||
|
||||
.xdsoft_noselect::selection { background: transparent }
|
||||
.xdsoft_noselect::-moz-selection { background: transparent }
|
||||
|
||||
.xdsoft_datetimepicker.xdsoft_inline {
|
||||
display: inline-block;
|
||||
position: static;
|
||||
box-shadow: none;
|
||||
}
|
||||
.xdsoft_datetimepicker *{
|
||||
|
||||
.xdsoft_datetimepicker * {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_datepicker, .xdsoft_datetimepicker .xdsoft_timepicker{
|
||||
display:none;
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_datepicker, .xdsoft_datetimepicker .xdsoft_timepicker {
|
||||
display: none;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_datepicker.active, .xdsoft_datetimepicker .xdsoft_timepicker.active{
|
||||
display:block;
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_datepicker.active, .xdsoft_datetimepicker .xdsoft_timepicker.active {
|
||||
display: block;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_datepicker{
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_datepicker {
|
||||
width: 224px;
|
||||
float:left;
|
||||
margin-left:8px;
|
||||
float: left;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_timepicker{
|
||||
.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_datepicker {
|
||||
float: right;
|
||||
margin-right: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_datepicker {
|
||||
width: 256px;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_timepicker {
|
||||
width: 58px;
|
||||
float:left;
|
||||
text-align:center;
|
||||
margin-left:8px;
|
||||
margin-top:5px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin-left: 8px;
|
||||
margin-top: 0;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_datepicker.active+.xdsoft_timepicker{
|
||||
margin-top:15px;
|
||||
.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker {
|
||||
float: right;
|
||||
margin-right: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_mounthpicker{
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_datepicker.active+.xdsoft_timepicker {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 3px
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_monthpicker {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_prev, .xdsoft_datetimepicker .xdsoft_next{
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAeCAYAAACR82geAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozQjRCQjRGREU4MkNFMzExQjRDQkIyRDJDOTdBRUI1MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxQzQ5MUVFRTJDRTkxMUUzODYyMUJDN0ExNzY5MEJFMiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxQzQ5MUVFRDJDRTkxMUUzODYyMUJDN0ExNzY5MEJFMiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNCNEJCNEZERTgyQ0UzMTFCNENCQjJEMkM5N0FFQjUwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNCNEJCNEZERTgyQ0UzMTFCNENCQjJEMkM5N0FFQjUwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ZZiqAgAAAR5JREFUeNrs2W0OgjAMBmAnHJjoOZq8FzYTUAkfG9KuJFDaZD8MpoYHmG0JMcabxzLuTuAwDqMR9dlPIISQO0TtqtrVpA7+21troxe8Q3mMPjfsDJ3cmVcGJc4WuOdtDSaFksQphvn+WNHdthJQhFlDWeBowMQcTiEMPilUYLagTHC0YJI4BTD45VWA4aAMOJowCxwhDMY5D7t3MWEmOAIYzPNZghlwmDBI5bIG0+MwYJDLc1SYkl6pYnz3dbraWXjHQPAokfVHCQWbL1mFgcLfNVmDgWKBR4oFHgQFHmnBYIeWgBRbAg4OabUE2LGJJMUmEltRrjh2wBaUK8LkcOjqg6oUjmhkYnXm24wq7qdoyO5vIv29ksM4zI7xFmAAj1yMVcKZ+nYAAAAASUVORK5CYII=');
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_prev{
|
||||
float: left;
|
||||
background-position:-20px 0px;
|
||||
.xdsoft_datetimepicker .xdsoft_label i,
|
||||
.xdsoft_datetimepicker .xdsoft_prev,
|
||||
.xdsoft_datetimepicker .xdsoft_next,
|
||||
.xdsoft_datetimepicker .xdsoft_today_button {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0NBRjI1NjM0M0UwMTFFNDk4NkFGMzJFQkQzQjEwRUIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0NBRjI1NjQ0M0UwMTFFNDk4NkFGMzJFQkQzQjEwRUIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDQ0FGMjU2MTQzRTAxMUU0OTg2QUYzMkVCRDNCMTBFQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDQ0FGMjU2MjQzRTAxMUU0OTg2QUYzMkVCRDNCMTBFQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoNEP54AAAIOSURBVHja7Jq9TsMwEMcxrZD4WpBYeKUCe+kTMCACHZh4BFfHO/AAIHZGFhYkBBsSEqxsLCAgXKhbXYOTxh9pfJVP+qutnZ5s/5Lz2Y5I03QhWji2GIcgAokWgfCxNvcOCCGKqiSqhUp0laHOne05vdEyGMfkdxJDVjgwDlEQgYQBgx+ULJaWSXXS6r/ER5FBVR8VfGftTKcITNs+a1XpcFoExREIDF14AVIFxgQUS+h520cdud6wNkC0UBw6BCO/HoCYwBhD8QCkQ/x1mwDyD4plh4D6DDV0TAGyo4HcawLIBBSLDkHeH0Mg2yVP3l4TQMZQDDsEOl/MgHQqhMNuE0D+oBh0CIr8MAKyazBH9WyBuKxDWgbXfjNf32TZ1KWm/Ap1oSk/R53UtQ5xTh3LUlMmT8gt6g51Q9p+SobxgJQ/qmsfZhWywGFSl0yBjCLJCMgXail3b7+rumdVJ2YRss4cN+r6qAHDkPWjPjdJCF4n9RmAD/V9A/Wp4NQassDjwlB6XBiCxcJQWmZZb8THFilfy/lfrTvLghq2TqTHrRMTKNJ0sIhdo15RT+RpyWwFdY96UZ/LdQKBGjcXpcc1AlSFEfLmouD+1knuxBDUVrvOBmoOC/rEcN7OQxKVeJTCiAdUzUJhA2Oez9QTkp72OTVcxDcXY8iKNkxGAJXmJCOQwOa6dhyXsOa6XwEGAKdeb5ET3rQdAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_next{
|
||||
float: right;
|
||||
background-position:0px 0px;
|
||||
.xdsoft_datetimepicker .xdsoft_label i {
|
||||
opacity: 0.5;
|
||||
background-position: -92px -19px;
|
||||
display: inline-block;
|
||||
width: 9px;
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_next:active,.xdsoft_datetimepicker .xdsoft_prev:active{
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_prev {
|
||||
float: left;
|
||||
background-position: -20px 0;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_next,.xdsoft_datetimepicker .xdsoft_prev {
|
||||
.xdsoft_datetimepicker .xdsoft_today_button {
|
||||
float: left;
|
||||
background-position: -70px 0;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_next {
|
||||
float: right;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_next,
|
||||
.xdsoft_datetimepicker .xdsoft_prev ,
|
||||
.xdsoft_datetimepicker .xdsoft_today_button {
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
border: 0px none currentColor;
|
||||
border: 0 none;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 30px;
|
||||
opacity: 0.5;
|
||||
outline: medium none currentColor;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
|
||||
outline: medium none;
|
||||
overflow: hidden;
|
||||
padding: 0px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
text-indent: 100%;
|
||||
white-space: nowrap;
|
||||
width: 20px;
|
||||
min-width: 0;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev,
|
||||
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next{
|
||||
float:none;
|
||||
background-position:-40px -15px;
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev,
|
||||
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next {
|
||||
float: none;
|
||||
background-position: -40px -15px;
|
||||
height: 15px;
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
display: block;
|
||||
margin-left: 14px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev{
|
||||
background-position:-40px 0px;
|
||||
.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker .xdsoft_prev,
|
||||
.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker .xdsoft_next {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
margin-right: 14px;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box{
|
||||
height:150px;
|
||||
overflow:hidden;
|
||||
border-bottom:1px solid #DDDDDD;
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev {
|
||||
background-position: -40px 0;
|
||||
margin-bottom: 7px;
|
||||
margin-top: 0;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div{
|
||||
background: #F5F5F5;
|
||||
border:1px solid #DDDDDD;
|
||||
color: #666666;
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
|
||||
height: 151px;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div {
|
||||
background: #f5f5f5;
|
||||
border-top: 1px solid #ddd;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
border-collapse:collapse;
|
||||
cursor:pointer;
|
||||
border-bottom-width:0px;
|
||||
height:25px;
|
||||
line-height:25px;
|
||||
border-collapse: collapse;
|
||||
cursor: pointer;
|
||||
border-bottom-width: 0;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div:last-child{
|
||||
border-bottom-width:1px;
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div > div:first-child {
|
||||
border-top-width: 0;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_next:hover,
|
||||
.xdsoft_datetimepicker .xdsoft_prev:hover {
|
||||
opacity: 1;
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_today_button:hover,
|
||||
.xdsoft_datetimepicker .xdsoft_next:hover,
|
||||
.xdsoft_datetimepicker .xdsoft_prev:hover {
|
||||
opacity: 1;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_label{
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_label {
|
||||
display: inline;
|
||||
position: relative;
|
||||
z-index: 9999;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 5px 3px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: bold;
|
||||
background-color: #fff;
|
||||
float:left;
|
||||
width:182px;
|
||||
text-align:center;
|
||||
position: relative;
|
||||
z-index: 9999;
|
||||
margin: 0;
|
||||
padding: 5px 3px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: bold;
|
||||
background-color: #fff;
|
||||
float: left;
|
||||
width: 182px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_month{
|
||||
width:114px;
|
||||
text-align:right;
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_label:hover>span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_calendar{
|
||||
clear:both;
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_label:hover i {
|
||||
opacity: 1.0;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_year{
|
||||
width:56px;
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select {
|
||||
border: 1px solid #ccc;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 30px;
|
||||
z-index: 101;
|
||||
display: none;
|
||||
background: #fff;
|
||||
max-height: 160px;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_calendar table{
|
||||
border-collapse:collapse;
|
||||
width:100%;
|
||||
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_monthselect{ right: -7px }
|
||||
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_yearselect{ right: 2px }
|
||||
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover {
|
||||
color: #fff;
|
||||
background: #ff8000;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_calendar td > div{
|
||||
padding-right:5px;
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option {
|
||||
padding: 2px 10px 2px 5px;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_calendar th{
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current {
|
||||
background: #33aaff;
|
||||
box-shadow: #178fe5 0 1px 3px 0 inset;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_month {
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_calendar {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_year{
|
||||
width: 48px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_calendar table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_calendar td > div {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_calendar th {
|
||||
height: 25px;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_calendar td,.xdsoft_datetimepicker .xdsoft_calendar th{
|
||||
width:14.2857142%;
|
||||
text-align:center;
|
||||
background: #F5F5F5;
|
||||
border:1px solid #DDDDDD;
|
||||
color: #666666;
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_calendar td,.xdsoft_datetimepicker .xdsoft_calendar th {
|
||||
width: 14.2857142%;
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #ddd;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
padding:0px;
|
||||
border-collapse:collapse;
|
||||
cursor:pointer;
|
||||
vertical-align: middle;
|
||||
padding: 0;
|
||||
border-collapse: collapse;
|
||||
cursor: pointer;
|
||||
height: 25px;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today{
|
||||
color:#33AAFF;
|
||||
.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar td,.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar th {
|
||||
width: 12.5%;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
|
||||
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current{
|
||||
background: #33AAFF;
|
||||
box-shadow: #178FE5 0px 1px 3px 0px inset;
|
||||
color:#fff;
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_calendar th {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
|
||||
color: #33aaff;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_default {
|
||||
background: #ffe9d2;
|
||||
box-shadow: #ffb871 0 1px 4px 0 inset;
|
||||
color: #000;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_mint {
|
||||
background: #c1ffc9;
|
||||
box-shadow: #00dd1c 0 1px 4px 0 inset;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
|
||||
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
|
||||
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current {
|
||||
background: #33aaff;
|
||||
box-shadow: #178fe5 0 1px 3px 0 inset;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month,
|
||||
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled,
|
||||
.xdsoft_datetimepicker .xdsoft_time_box >div >div.xdsoft_disabled{
|
||||
opacity:0.5;
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month,
|
||||
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled,
|
||||
.xdsoft_datetimepicker .xdsoft_time_box >div >div.xdsoft_disabled {
|
||||
opacity: 0.5;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
|
||||
cursor: default;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_calendar td:hover,
|
||||
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div:hover{
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month.xdsoft_disabled {
|
||||
opacity: 0.2;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_calendar td:hover,
|
||||
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div:hover {
|
||||
color: #fff !important;
|
||||
background: #ff8000 !important;
|
||||
box-shadow: none !important;
|
||||
background: #ff8000 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled:hover,
|
||||
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_disabled:hover{
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current.xdsoft_disabled:hover,
|
||||
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current.xdsoft_disabled:hover {
|
||||
background: #33aaff !important;
|
||||
box-shadow: #178fe5 0 1px 3px 0 inset !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled:hover,
|
||||
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_disabled:hover {
|
||||
color: inherit !important;
|
||||
background: inherit !important;
|
||||
box-shadow: inherit !important;
|
||||
background: inherit !important;
|
||||
box-shadow: inherit !important;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_calendar th{
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_calendar th {
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
color: #999999;
|
||||
cursor:default;
|
||||
color: #999;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_copyright {
|
||||
color: #ccc !important;
|
||||
font-size: 10px;
|
||||
clear: both;
|
||||
float: none;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker .xdsoft_copyright a { color: #eee !important }
|
||||
.xdsoft_datetimepicker .xdsoft_copyright a:hover { color: #aaa !important }
|
||||
|
||||
.xdsoft_time_box {
|
||||
position: relative;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.xdsoft_scrollbar >.xdsoft_scroller {
|
||||
background: #ccc !important;
|
||||
height: 20px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.xdsoft_scrollbar {
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_scrollbar {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
.xdsoft_scroller_box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker.xdsoft_dark {
|
||||
box-shadow: 0 5px 15px -5px rgba(255, 255, 255, 0.506);
|
||||
background: #000;
|
||||
border-bottom: 1px solid #444;
|
||||
border-left: 1px solid #333;
|
||||
border-right: 1px solid #333;
|
||||
border-top: 1px solid #333;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box {
|
||||
border-bottom: 1px solid #222;
|
||||
}
|
||||
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box >div >div {
|
||||
background: #0a0a0a;
|
||||
border-top: 1px solid #222;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label {
|
||||
background-color: #000;
|
||||
}
|
||||
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select {
|
||||
border: 1px solid #333;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover {
|
||||
color: #000;
|
||||
background: #007fff;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current {
|
||||
background: #cc5500;
|
||||
box-shadow: #b03e00 0 1px 3px 0 inset;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label i,
|
||||
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_prev,
|
||||
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_next,
|
||||
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_today_button {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUExQUUzOTA0M0UyMTFFNDlBM0FFQTJENTExRDVBODYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUExQUUzOTE0M0UyMTFFNDlBM0FFQTJENTExRDVBODYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQTFBRTM4RTQzRTIxMUU0OUEzQUVBMkQ1MTFENUE4NiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQTFBRTM4RjQzRTIxMUU0OUEzQUVBMkQ1MTFENUE4NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pp0VxGEAAAIASURBVHja7JrNSgMxEMebtgh+3MSLr1T1Xn2CHoSKB08+QmR8Bx9A8e7RixdB9CKCoNdexIugxFlJa7rNZneTbLIpM/CnNLsdMvNjM8l0mRCiQ9Ye61IKCAgZAUnH+mU3MMZaHYChBnJUDzWOFZdVfc5+ZFLbrWDeXPwbxIqrLLfaeS0hEBVGIRQCEiZoHQwtlGSByCCdYBl8g8egTTAWoKQMRBRBcZxYlhzhKegqMOageErsCHVkk3hXIFooDgHB1KkHIHVgzKB4ADJQ/A1jAFmAYhkQqA5TOBtocrKrgXwQA8gcFIuAIO8sQSA7hidvPwaQGZSaAYHOUWJABhWWw2EMIH9QagQERU4SArJXo0ZZL18uvaxejXt/Em8xjVBXmvFr1KVm/AJ10tRe2XnraNqaJvKE3KHuUbfK1E+VHB0q40/y3sdQSxY4FHWeKJCunP8UyDdqJZenT3ntVV5jIYCAh20vT7ioP8tpf6E2lfEMwERe+whV1MHjwZB7PBiCxcGQWwKZKD62lfGNnP/1poFAA60T7rF1UgcKd2id3KDeUS+oLWV8DfWAepOfq00CgQabi9zjcgJVYVD7PVzQUAUGAQkbNJTBICDhgwYTjDYD6XeW08ZKh+A4pYkzenOxXUbvZcWz7E8ykRMnIHGX1XPl+1m2vPYpL+2qdb8CDAARlKFEz/ZVkAAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td,
|
||||
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th {
|
||||
background: #0a0a0a;
|
||||
border: 1px solid #222;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th {
|
||||
background: #0e0e0e;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_today {
|
||||
color: #cc5500;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_highlighted_default {
|
||||
background: #ffe9d2;
|
||||
box-shadow: #ffb871 0 1px 4px 0 inset;
|
||||
color:#000;
|
||||
}
|
||||
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_highlighted_mint {
|
||||
background: #c1ffc9;
|
||||
box-shadow: #00dd1c 0 1px 4px 0 inset;
|
||||
color:#000;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_default,
|
||||
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_current,
|
||||
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current {
|
||||
background: #cc5500;
|
||||
box-shadow: #b03e00 0 1px 3px 0 inset;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td:hover,
|
||||
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box >div >div:hover {
|
||||
color: #000 !important;
|
||||
background: #007fff !important;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright { color: #333 !important }
|
||||
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright a { color: #111 !important }
|
||||
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright a:hover { color: #555 !important }
|
||||
|
||||
.xdsoft_dark .xdsoft_time_box {
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.xdsoft_dark .xdsoft_scrollbar >.xdsoft_scroller {
|
||||
background: #333 !important;
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_save_selected {
|
||||
display: block;
|
||||
border: 1px solid #dddddd !important;
|
||||
margin-top: 5px;
|
||||
width: 100%;
|
||||
color: #454551;
|
||||
font-size: 13px;
|
||||
}
|
||||
.xdsoft_datetimepicker .blue-gradient-button {
|
||||
font-family: "museo-sans", "Book Antiqua", sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
color: #82878c;
|
||||
height: 28px;
|
||||
position: relative;
|
||||
padding: 4px 17px 4px 33px;
|
||||
border: 1px solid #d7d8da;
|
||||
background: -moz-linear-gradient(top, #fff 0%, #f4f8fa 73%);
|
||||
/* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(73%, #f4f8fa));
|
||||
/* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #fff 0%, #f4f8fa 73%);
|
||||
/* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #fff 0%, #f4f8fa 73%);
|
||||
/* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, #fff 0%, #f4f8fa 73%);
|
||||
/* IE10+ */
|
||||
background: linear-gradient(to bottom, #fff 0%, #f4f8fa 73%);
|
||||
/* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f4f8fa',GradientType=0 );
|
||||
/* IE6-9 */
|
||||
}
|
||||
.xdsoft_datetimepicker .blue-gradient-button:hover, .xdsoft_datetimepicker .blue-gradient-button:focus, .xdsoft_datetimepicker .blue-gradient-button:hover span, .xdsoft_datetimepicker .blue-gradient-button:focus span {
|
||||
color: #454551;
|
||||
background: -moz-linear-gradient(top, #f4f8fa 0%, #FFF 73%);
|
||||
/* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4f8fa), color-stop(73%, #FFF));
|
||||
/* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #f4f8fa 0%, #FFF 73%);
|
||||
/* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #f4f8fa 0%, #FFF 73%);
|
||||
/* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, #f4f8fa 0%, #FFF 73%);
|
||||
/* IE10+ */
|
||||
background: linear-gradient(to bottom, #f4f8fa 0%, #FFF 73%);
|
||||
/* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f8fa', endColorstr='#FFF',GradientType=0 );
|
||||
/* IE6-9 */
|
||||
}
|
||||
.xdsoft_datetimepicker .xdsoft_copyright{ color:#ccc !important; font-size:10px;clear:both;float:none;margin-left:8px;}
|
||||
.xdsoft_datetimepicker .xdsoft_copyright a{ color:#eee !important;}
|
||||
.xdsoft_datetimepicker .xdsoft_copyright a:hover{ color:#aaa !important;}
|
||||
|
||||
File diff suppressed because one or more lines are too long
45
package.json
Normal file
45
package.json
Normal file
@ -0,0 +1,45 @@
|
||||
{
|
||||
"name": "jquery-datetimepicker",
|
||||
"version": "2.5.9",
|
||||
"description": "jQuery Plugin DateTimePicker it is DatePicker and TimePicker in one",
|
||||
"main": "build/jquery.datetimepicker.full.min.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"concat": "concat-cli -f node_modules/php-date-formatter/js/php-date-formatter.min.js jquery.datetimepicker.js node_modules/jquery-mousewheel/jquery.mousewheel.js -o build/jquery.datetimepicker.full.js",
|
||||
"minify": "uglifyjs jquery.datetimepicker.js -c -m -o build/jquery.datetimepicker.min.js && uglifycss jquery.datetimepicker.css > build/jquery.datetimepicker.min.css",
|
||||
"minifyconcat": "uglifyjs build/jquery.datetimepicker.full.js -c -m -o build/jquery.datetimepicker.full.min.js && rm -f build/jquery.datetimepicker.full.js",
|
||||
"github": "git add --all && git commit -m \"New version %npm_package_version% \" && git tag %npm_package_version% && git push --tags origin HEAD:master && npm publish",
|
||||
"build": "npm run minify && npm run concat && npm run minifyconcat",
|
||||
"public": "npm version patch --no-git-tag-version && npm run build && npm run github"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/xdan/datetimepicker.git"
|
||||
},
|
||||
"keywords": [
|
||||
"jquery-plugin",
|
||||
"calendar",
|
||||
"date",
|
||||
"time",
|
||||
"datetime",
|
||||
"datepicker",
|
||||
"timepicker"
|
||||
],
|
||||
"author": "Chupurnov <chupurnov@gmail.com> (http://xdsoft.net/)",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/xdan/datetimepicker/issues"
|
||||
},
|
||||
"homepage": "https://github.com/xdan/datetimepicker",
|
||||
"dependencies": {
|
||||
"jquery": ">= 1.7.2",
|
||||
"jquery-mousewheel": ">= 3.1.13",
|
||||
"php-date-formatter": "^1.3.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"concat": "azer/concat",
|
||||
"concat-cli": "^4.0.0",
|
||||
"uglifycss": "^0.0.27",
|
||||
"uglifyjs": "^2.4.10"
|
||||
}
|
||||
}
|
||||
BIN
screen/1.png
BIN
screen/1.png
Binary file not shown.
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 9.5 KiB |
BIN
screen/3.1.png
Normal file
BIN
screen/3.1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
screen/3.png
BIN
screen/3.png
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 2.4 KiB |
BIN
screen/4.png
Normal file
BIN
screen/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
screen/5.png
Normal file
BIN
screen/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
screen/6.png
Normal file
BIN
screen/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
115
tests/input_in_container_fixed_to_bottom_of_viewport.html
Normal file
115
tests/input_in_container_fixed_to_bottom_of_viewport.html
Normal file
@ -0,0 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Input In Container Fixed To Bottom Of Viewport | datetimepicker Tests</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../jquery.datetimepicker.css"/>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#search {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
color: #f0f0f0;
|
||||
background-color: #333;
|
||||
opacity: 0.9;
|
||||
-webkit-opacity: 0.9;
|
||||
-moz-opacity: 0.9;
|
||||
}
|
||||
|
||||
#search form {
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
#search form > div,
|
||||
#filters form > div {
|
||||
display: inline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<h1>Input In Container Fixed To Bottom Of Viewport</h1>
|
||||
|
||||
<div id="filters">
|
||||
<form method="post" action="?">
|
||||
<div>
|
||||
<label for="filter-date">Date</label>
|
||||
<input type="text" name="filter-date" id="filter-date"/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="submit" value="Filter"/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
</ul>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div id="search">
|
||||
<form method="post" action="?">
|
||||
<div>
|
||||
<label for="search-from-date">Date from</label>
|
||||
<input type="text" name="search-from-date" id="search-from-date"/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="search-to-date">Date to</label>
|
||||
<input type="text" name="search-to-date" id="search-to-date"/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="submit" value="Search"/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
|
||||
<script src="../build/jquery.datetimepicker.full.js"></script>
|
||||
|
||||
<script>
|
||||
/*jslint browser:true*/
|
||||
/*global jQuery, document*/
|
||||
|
||||
jQuery(document).ready(function () {
|
||||
'use strict';
|
||||
|
||||
jQuery('#filter-date, #search-from-date, #search-to-date').datetimepicker();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
115
tests/input_in_container_fixed_to_top_of_viewport.html
Normal file
115
tests/input_in_container_fixed_to_top_of_viewport.html
Normal file
@ -0,0 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Input In Container Fixed To Top Of Viewport | datetimepicker Tests</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../jquery.datetimepicker.css"/>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#search {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
color: #f0f0f0;
|
||||
background-color: #333;
|
||||
opacity: 0.9;
|
||||
-webkit-opacity: 0.9;
|
||||
-moz-opacity: 0.9;
|
||||
}
|
||||
|
||||
#search form {
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
#search form > div,
|
||||
#filters form > div {
|
||||
display: inline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<h1>Input In Container Fixed To Top Of Viewport</h1>
|
||||
|
||||
<div id="filters">
|
||||
<form method="post" action="?">
|
||||
<div>
|
||||
<label for="filter-date">Date</label>
|
||||
<input type="text" name="filter-date" id="filter-date"/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="submit" value="Filter"/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare ante at risus varius molestie. Nulla bibendum mauris tellus, vitae fringilla dolor consectetur et. Praesent in ligula condimentum lacus semper mattis. Sed lobortis iaculis ipsum, a posuere dui dictum nec. Cras condimentum tristique tincidunt. Integer nisi mauris, mollis eget gravida eu, fringilla id eros. Nam posuere aliquet velit, in fermentum augue. Phasellus sit amet enim sit amet neque sollicitudin pellentesque. Vestibulum euismod, libero at rutrum malesuada, libero elit euismod velit, ut facilisis odio libero quis quam. Cras aliquet orci quis ultrices bibendum. In at erat et purus molestie varius aliquam et neque. Duis eleifend sagittis lectus consectetur rhoncus. Suspendisse porttitor nibh a tincidunt ultricies. Morbi hendrerit consectetur felis, eu ultricies diam. Fusce eget nulla ac magna tincidunt feugiat quis vestibulum nibh.</li>
|
||||
</ul>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div id="search">
|
||||
<form method="post" action="?">
|
||||
<div>
|
||||
<label for="search-from-date">Date from</label>
|
||||
<input type="text" name="search-from-date" id="search-from-date"/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="search-to-date">Date to</label>
|
||||
<input type="text" name="search-to-date" id="search-to-date"/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="submit" value="Search"/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
|
||||
<script src="../build/jquery.datetimepicker.full.js"></script>
|
||||
|
||||
<script>
|
||||
/*jslint browser:true*/
|
||||
/*global jQuery, document*/
|
||||
|
||||
jQuery(document).ready(function () {
|
||||
'use strict';
|
||||
|
||||
jQuery('#filter-date, #search-from-date, #search-to-date').datetimepicker();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
175
yarn.lock
Normal file
175
yarn.lock
Normal file
@ -0,0 +1,175 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
|
||||
# yarn lockfile v1
|
||||
|
||||
|
||||
ansi-regex@^2.0.0:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
|
||||
|
||||
ansi-styles@^2.2.1:
|
||||
version "2.2.1"
|
||||
resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
|
||||
|
||||
camelcase@^2.0.1:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
|
||||
|
||||
chalk@^1.1.1:
|
||||
version "1.1.3"
|
||||
resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
|
||||
dependencies:
|
||||
ansi-styles "^2.2.1"
|
||||
escape-string-regexp "^1.0.2"
|
||||
has-ansi "^2.0.0"
|
||||
strip-ansi "^3.0.0"
|
||||
supports-color "^2.0.0"
|
||||
|
||||
cliui@^3.0.3:
|
||||
version "3.2.0"
|
||||
resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
|
||||
dependencies:
|
||||
string-width "^1.0.1"
|
||||
strip-ansi "^3.0.1"
|
||||
wrap-ansi "^2.0.0"
|
||||
|
||||
code-point-at@^1.0.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
|
||||
|
||||
commander@^2.9.0:
|
||||
version "2.11.0"
|
||||
resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
|
||||
|
||||
concat-cli@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/concat-cli/-/concat-cli-4.0.0.tgz#a73a0fb0d18b25804ebe703bcc35922324dbf74d"
|
||||
dependencies:
|
||||
chalk "^1.1.1"
|
||||
concat "^1.0.0"
|
||||
yargs "^3.30.0"
|
||||
|
||||
concat@^1.0.0:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/concat/-/concat-1.0.3.tgz#40f3353089d65467695cb1886b45edd637d8cca8"
|
||||
dependencies:
|
||||
commander "^2.9.0"
|
||||
|
||||
concat@azer/concat:
|
||||
version "1.0.0"
|
||||
resolved "https://codeload.github.com/azer/concat/tar.gz/c64c5cbc2e60b0bc1a8f4bceafed661f66f19dcf"
|
||||
dependencies:
|
||||
parallel-loop azer/parallel-loop
|
||||
serial-loop azer/serial-loop
|
||||
|
||||
decamelize@^1.1.1:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
|
||||
|
||||
escape-string-regexp@^1.0.2:
|
||||
version "1.0.5"
|
||||
resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
|
||||
|
||||
has-ansi@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
|
||||
dependencies:
|
||||
ansi-regex "^2.0.0"
|
||||
|
||||
invert-kv@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
|
||||
|
||||
is-fullwidth-code-point@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
|
||||
dependencies:
|
||||
number-is-nan "^1.0.0"
|
||||
|
||||
"jquery-mousewheel@>= 3.1.13":
|
||||
version "3.1.13"
|
||||
resolved "https://registry.yarnpkg.com/jquery-mousewheel/-/jquery-mousewheel-3.1.13.tgz#06f0335f16e353a695e7206bf50503cb523a6ee5"
|
||||
|
||||
"jquery@>= 1.7.2":
|
||||
version "3.2.1"
|
||||
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787"
|
||||
|
||||
lcid@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
|
||||
dependencies:
|
||||
invert-kv "^1.0.0"
|
||||
|
||||
number-is-nan@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
|
||||
|
||||
os-locale@^1.4.0:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
|
||||
dependencies:
|
||||
lcid "^1.0.0"
|
||||
|
||||
parallel-loop@azer/parallel-loop:
|
||||
version "0.0.2"
|
||||
resolved "https://codeload.github.com/azer/parallel-loop/tar.gz/054b0d3fe633483a3a6b94104c8343473208d5fb"
|
||||
|
||||
php-date-formatter@^1.3.4:
|
||||
version "1.3.4"
|
||||
resolved "https://registry.yarnpkg.com/php-date-formatter/-/php-date-formatter-1.3.4.tgz#09a15ae0766ba0beb1900c27c1ec319ef2e4563e"
|
||||
|
||||
serial-loop@azer/serial-loop:
|
||||
version "0.0.1"
|
||||
resolved "https://codeload.github.com/azer/serial-loop/tar.gz/99c6271f80f075b7db089a1aadc7178a310a4570"
|
||||
|
||||
string-width@^1.0.1:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
|
||||
dependencies:
|
||||
code-point-at "^1.0.0"
|
||||
is-fullwidth-code-point "^1.0.0"
|
||||
strip-ansi "^3.0.0"
|
||||
|
||||
strip-ansi@^3.0.0, strip-ansi@^3.0.1:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
|
||||
dependencies:
|
||||
ansi-regex "^2.0.0"
|
||||
|
||||
supports-color@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
|
||||
|
||||
uglifycss@^0.0.27:
|
||||
version "0.0.27"
|
||||
resolved "https://registry.yarnpkg.com/uglifycss/-/uglifycss-0.0.27.tgz#53553b8115de26dce57b42ba0b34e88dd80d0cde"
|
||||
|
||||
uglifyjs@^2.4.10:
|
||||
version "2.4.11"
|
||||
resolved "https://registry.yarnpkg.com/uglifyjs/-/uglifyjs-2.4.11.tgz#3440d64e045759589524418eb641c68bb90d113e"
|
||||
|
||||
window-size@^0.1.4:
|
||||
version "0.1.4"
|
||||
resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.4.tgz#f8e1aa1ee5a53ec5bf151ffa09742a6ad7697876"
|
||||
|
||||
wrap-ansi@^2.0.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
|
||||
dependencies:
|
||||
string-width "^1.0.1"
|
||||
strip-ansi "^3.0.1"
|
||||
|
||||
y18n@^3.2.0:
|
||||
version "3.2.1"
|
||||
resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
|
||||
|
||||
yargs@^3.30.0:
|
||||
version "3.32.0"
|
||||
resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.32.0.tgz#03088e9ebf9e756b69751611d2a5ef591482c995"
|
||||
dependencies:
|
||||
camelcase "^2.0.1"
|
||||
cliui "^3.0.3"
|
||||
decamelize "^1.1.1"
|
||||
os-locale "^1.4.0"
|
||||
string-width "^1.0.1"
|
||||
window-size "^0.1.4"
|
||||
y18n "^3.2.0"
|
||||
Loading…
Reference in New Issue
Block a user