Date Time JS Plugin

The first step is to introduce the basic files: Bootstrap's basic JS and CSS files, because jquery is used to introduce jquery files

1 <script src= "Jquery-1.11.2.min.js" ></script>2 <script src= "Bootstrap.min.js" ></script>3 <link href= "bootstrap.min.css" rel= "stylesheet" type= "Text/css"/>

1. Introduce the date time of the JS file (this plugin is based on the bootstrap time plug-in Daterangepicker of the Chinese version)

1 <!--time Date JS component--2 <script type= "Text/javascript" src= "Moment.js" ></script> 3 <script type= "Text/javascript" src= "Daterangepicker.js" ></script>

2. Introduction of date-time CSS files

1 <!--time Date CSS component--2 <link href= "Http://www.jq22.com/jquery/font-awesome.4.6.0.css" rel= "Stylesheet" >//this file is used to download calendar icons 3 <link rel= "stylesheet" type= "Text/css" media= "All" href= " Daterangepicker-bs3.css "/>

3.html Code

1<divclass= "col-xs-12" ><!--Date Query component--2<labelclass= "Col-sm-1 Control-label TJ" > Release time:</label>3<divclass= "Col-xs-4 TJ" >4<formclass= "Form-horizontal" >5<fieldset>6<divclass= "Control-group" >7<divclass= "Controls" >8<divclass= "Input-prepend Input-group" >9<spanclass= "Add-on Input-group-addon" ><iclass= "Glyphicon Glyphicon-calendar fa Fa-calendar" ></i></span>Ten<input type= "text" readonly style= "width:200px" name= "Reservation" id= "Reservation"class= "Form-control" value= "Please select query Date"/> One</div> A</div> -</div> -</fieldset> the</form> -</div> -</div>

4.js Code

1 //Date Query JS component2$ (document). Ready (function(e) {3$ (' #reservation '). Daterangepicker (NULL,function(Start,End,label) {4Console.Log(Start.toisostring (),End. toisostring (),label);5   });6 });7 8 9 varRqstart = "";Ten varRqend = ""; One //Date-time method A$ (document). Ready (function(e) { -$ (' input[name= ' Reservation "]).Daterangepicker ( -                   {  the                     /*format: ' Yyyy-mm-dd ', - startdate: ' 2013-01-01 ', - endDate: ' 2013-12-31 '*/ -}, +                   function(Start,End,label) { -                     //alert (' A date range is chosen: ' + start.format (' yyyy-mm-dd ') + ' to ' + end.format (' yyyy-mm-dd '); +Start = Start.format (' yyyy-mm-dd ');//. Format () converts any data into a string A                     End=End. Format (' Yyyy-mm-dd '); atRqstart = start;//get to start date -Rqend =End;//get to End date -                      -                   } -                 ); -});

5. This plugin can only change the date after clicking the OK button before you get to the start date and end date

Because the blogger created by the Baidu Cloud Link has been displayed after the page does not exist, so this article used JS and CSS files if necessary can be private messages

Date Time JS Plugin