Use the bootstrap time control (double calendar) and bootstrap Control
During this time, I checked the bootstrap time control and found that it was very easy to use. I sorted it out when I had time, so that I could check it later when I forgot it...
Not to mention nonsense
Next is code implementation
The first step is to import files such as css and js.
<Link href = "assets/css/icons.css" rel = "stylesheet"/> style <link href = "assets/css/bootstrap.css" rel = "stylesheet" /> <link href = "assets/css/plugins.css" rel = "stylesheet"/> date control style <script src = "assets/js/jquery-1.8.3.min.js"> </script> <script src = "assets/js/bootstrap. js "> </script> <script src =" assets/plugins/core/moment. min. js "> </script> moment is a JavaScript date processing class library <script src =" assets/plugins/forms/daterangepicker. js "> </script> time range control <script src =" assets/plugins/forms/datetimepicker/bootstrap-datetimepicker.min.js "> </script> <script src =" assets/plugins/forms /datetimepicker/bootstrap-datetimepicker.zh-CN.js "> </script> This is useless and can be ignored
The second part is the html file.
<Body> <div class = "col-lg-3 col-md-3"> <! -- This controls the width and height of input --> <div class = "input-group"> <! -- The image behind this control is associated with the input --> <input id = "adddate" class = "form-control" placeholder = "apply for date range"/> <span class =" input-group-addon "> <I class =" fa-calendar "> </I> </span> </div> <input onclick =" () "type =" button "value =" Submit "/> <! -- Test the input content by yourself --> </div> </body>
The third part is js File Content Compilation
<Script> $ (document ). ready (function () {$ ('# adddate '). daterangepicker ({// startDate: moment (). startOf ('day'), // endDate: moment (), minDate: '2017-01-01 ', // minimum time ====>> the format must be consistent with the formatted style endDate: moment (), // maximum time dateLimit: {days: 30 }, // maximum interval of the start and end times showDropdowns: true, showWeekNumbers: false, // whether to display the timePicker of the week: false, // whether to display the hour and minute timePickerIncrement: 60, // time increment, in the unit of minute timePicker12Hour: false, // whether to use the 12-hour mechanism to display the time ranges: {'last hour ': [moment (). subtract ('urs', 1), moment ()], // moment. for details about js, click 'today ': [moment (). startOf ('day'), moment ()], 'Yesterday ': [moment (). subtract ('days ', 1 ). startOf ('day'), moment (). subtract ('days ', 1 ). endOf ('day')], 'last 7 Day': [moment (). subtract ('days ', 6), moment ()], 'last 30 Day': [moment (). subtract ('days ', 29), moment ()]}, opens: 'right', // the pop-up location of the date selection box buttonClasses: ['btn btn-default'], applyClass: 'btn-small btn-primary Blue', cancelClass: 'btn-small', format: 'yyyy-MM-DD ', // The Date Format separator: 'to', locale: {applyLabel: 'confirmed', cancelLabel: 'cancel', fromLabel: 'start time ', toLabel: 'End time', mrmrangelabel: 'custom time', daysOfWeek: ['day', 'yi', '2', '3', '4 ', '5', '6'], monthNames: ['August 11', 'August 11', 'August 11', 'August 11', 'August 30', 'August 30 ', 'October ', 'October'], firstDay: 1 }}, function (start, end, label) {// format the date display box $ ('# adddate span'{.html (start. format ('Mm-DD-YYYY ') +'-'+ end. format ('yyyy-MM-DD ');});/* $ ("# startdate "). datetimepicker ({language: 'zh-cn', format: "yyyy-mm-dd", autoclose: true, todayBtn: true, pickerPosition: "bottom-left", minView: 2 // the most accurate time is the date 0-minute 1-hour 2-day 3-month}); $ ("# enddate "). datetimepicker ({language: 'zh-cn', format: "yyyy-mm-dd", autoclose: true, todayBtn: true, pickerPosition: "bottom-left", minView: 2}); */}); </script>
Some important things are explained in the comments of the code. I uploaded the summary file, and you can download it by yourself.
Link: http://pan.baidu.com/s/1eRHR4cy password: 1bvq
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
