Bootstrap became popular in 2013, and Bootstrap will continue to be loved by more people in 2014. It not only has a complete and beautiful UI, but also has extended many useful plug-ins and themes for its development! Let it have infinite possibilities!
The company likes to use various open source free frameworks. Bootstrap is very easy to use, and the framework layout is beautiful and simple to use. Today I encountered the datepicker control that I want to use it.
The problem is: two time points are divided into the start time and the end time, and the end time must be after the start time. So I studied it for a while and it took me a break from the morning until 3 o'clock to solve the problem.
Summarize the problem. The main reason is that the jquery used in the project is also used in the jquery ui. It happens that there is also a datepicker inside, and the name is exactly the same. I've been trying to do it all, checking the usage of datepicker in jquery, and looking for various things online that are good, that is, binding the onSelect method to datepicker. Coincidentally, many netizens say that onSelect doesn't work...
Suddenly, I found a bunch of bootstrap things under the lib folder. More importantly, there was another folder with bootstrap_datepicker written on it. I realized that we were not using datepicker under jquery. ⊙⊙b Sweat
Directly post the code:
js code
$('#starttime').datepicker({format: 'yyyy.mm.dd',weekStart: 1,autoclose: true,todayBtn: 'linked',language: 'zh-CN'}).on('changeDate',function(ev){var startTime = ev.date.valueOf();if(start<teach){alert(""Evaluation start time" cannot be earlier than "teach time"!");$("#starttime").focus();}});$('#endtime').datepicker({format: 'yyyy.mm.dd',weekStart: 1,autoclose: true,todayBtn: 'linked',language: 'zh-CN'}).on('changeDate',function(ev){var endTime = ev.date.valueOf();end = endTime;if(end<start){alert(""Evaluation end time" cannot be earlier than "Evaluation start time"!");}else{}});jsp code:
<div id="starttime_main"><label for="starttime">Start time: </label><div data-date="2013.05.10" id="starttimeDiv"><input type="text" value="" id="starttime" readonly> <span><i></i> </span></div><div id="endtime_main"><label for="endtime">End time: </label><divdata-date="2013.05.10" id="endtimeDiv"><input type="text" value="" id="endtime"readonly> <span><iclass="icon-calendar"></i> </span></div></div>
The above is the sharing of the experience of using the Datepicker control of BootStrap introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!