Jquery-ui use of date plug-in

HTML for

        <type= "text"  ID= "StartTime"/>        <  type= "text"  ID= "Endtime"/>

Set the ReadOnly property, the input box is not writable;

Introduction of necessary JS files and CSS files

        <Linkrel= "stylesheet"type= "Text/css"href= "Jquery-ui.css" />        <Scripttype= "Text/javascript"src= "Jquery-1.11.2.min.js"></Script>        <Scripttype= "Text/javascript"src= "Jquery-ui.js"></Script>

If you want to use Chinese, the following JS file should be introduced

        <type= "Text/javascript"  src= "Datepicker_cn.js " ></ Script >

You also need to initialize the plugin after the page is loaded

1$(function(){2                 /*3 * Initialize Date plugin4                  */5$ (' #starttime '). DatePicker ({6OnSelect:function(Datetext, inst) {7$ ("#endtime"). DatePicker ("option", "MinDate"), datetext);8                     },9Showbuttonpanel:true,TenInline:true One                 }); A                  -$ (' #endtime '). DatePicker ({ -OnSelect:function(Datetext, inst) { the$ ("#starttime"). DatePicker ("option", "MaxDate"), datetext); -                     }, -Showbuttonpanel:true, -Inline:true +                 }); -});

To limit the start time must start today, not optional yesterday, after the initialization of the above can continue to add a sentence

1     // limit start time minimum to today 2     $ (' #txtbegintime '). DatePicker (' option ', ' mindate ', ' 0 ');

If you only want to use the time and seconds plugin, you need to introduce the following JS file and CSS File

  　　　　 <Linkrel= "stylesheet"type= "Text/css"href= "Jquery-ui.css" />        <Scripttype= "Text/javascript"src= "Jquery-1.11.2.min.js"></Script>        <Scripttype= "Text/javascript"src= "Jquery-ui.js"></Script>        <Scripttype= "Text/javascript"src= "Jquery-ui-timepicker-addon.js"></Script>        <Scripttype= "Text/javascript"src= "Jquery-ui-timepicker-zh-cn.js"></Script>//Chinese

1 $ (function() {2     $ ("#starttime"). Timepicker (); 3     $ (". Timeinput"). Timepicker (); 4 });
Initialization

Not finished, continue to add ...

Jquery-ui use of date plug-in