|
|
| Line 1: |
Line 1: |
| - | <!DOCTYPE html> | + | <html> |
| - | <html lang="en">
| + | |
| | <head> | | <head> |
| | <meta http-equiv="content-type" content="text/html; charset=utf-8"/> | | <meta http-equiv="content-type" content="text/html; charset=utf-8"/> |
| Line 13: |
Line 12: |
| | </head> | | </head> |
| | <body> | | <body> |
| - | <p><a href="http://xdsoft.net/jqplugins/datetimepicker/">Homepage</a></p> | + | |
| - | <h3>DateTimePicker</h3>
| + | |
| - | <input type="text" value="" id="datetimepicker"/><br><br>
| + | |
| - | <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> | | <h3>Inline DateTimePicker</h3> |
| - | <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> | + | <input type="text" id="datetimepicker3"/> |
| - | <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"/>
| + | |
| | </body> | | </body> |
| | <script src="./jquery.js"></script> | | <script src="./jquery.js"></script> |
| | <script src="./jquery.datetimepicker.js"></script> | | <script src="./jquery.datetimepicker.js"></script> |
| | <script> | | <script> |
| - | $('#datetimepicker').datetimepicker({
| |
| - | dayOfWeekStart : 1,
| |
| - | lang:'ru',
| |
| - | startDate: '1986/01/05'
| |
| - | });
| |
| - | $('#datetimepicker').datetimepicker({value:'2015/04/15 05:03',step:10});
| |
| - |
| |
| - | $('#default_datetimepicker').datetimepicker({
| |
| - | formatTime:'H:i',
| |
| - | formatDate:'d.m.Y',
| |
| - | defaultDate:'8.12.1986', // it's my birthday
| |
| - | defaultTime:'10:00'
| |
| - | });
| |
| - |
| |
| - | $('#datetimepicker10').datetimepicker({
| |
| - | step:5,
| |
| - | inline:true
| |
| - | });
| |
| - | $('#datetimepicker_mask').datetimepicker({
| |
| - | mask:'9999/19/39 29:59'
| |
| - | });
| |
| - |
| |
| - | $('#datetimepicker1').datetimepicker({
| |
| - | datepicker:false,
| |
| - | format:'H:i',
| |
| - | 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({ | | $('#datetimepicker3').datetimepicker({ |
| - | inline:true
| + | format:'d.m.Y', |
| | + | inline:true, |
| | + | timepicker:false, |
| | + | lang:'en' |
| | }); | | }); |
| - | $('#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.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, ""];
| |
| - | }
| |
| - | });
| |
| | </script> | | </script> |
| | </html> | | </html> |
"
