Show pageBacklinksBack to top This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong. ====== Bootstrap 3 DateTimepicker ====== This page show you how to user the Bootstrap 3 DateTimepicker by [[https://eonasdan.github.io/bootstrap-datetimepicker/]]. ===== Installing ===== Bootstrap 3 DateTimePicker can be download on their site: [[https://eonasdan.github.io/bootstrap-datetimepicker/Installing/]]. Note that in order to install it manually, you need to first include Jquery [[http://jquery.com/]] and MomentJs [[https://momentjs.com/]], and of course Bootstrap 3 with transition and collapse functions in your project. <code> <script type="text/javascript" src="/path/to/jquery.js"></script> <script type="text/javascript" src="/path/to/moment.js"></script> <script type="text/javascript" src="/path/to/bootstrap.min.js"></script> <script type="text/javascript" src="/path/to/bootstrap-datetimepicker.min.js"></script> </code> ===== Coding HTML ===== First you need to set up an input in your HTML body. For example I need the user to input a date that is after the current time. Code in HTML: <code> <div class='input-group date' id="datetimepicker-after-now"> <input required="true" autocomplete="off" class="form-control" name="submit_date" placeholder="YYYY-MM-DD (click to pick a date)" value="" id="submit_date" type="text"> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> </div> </code> or code in Grails GSP: <code> <div class='input-group date' id="datetimepicker-after-now"> <g:textField required="true" autocomplete="off" class="form-control" name="submit_date" placeholder= "YYYY-MM-DD (click to pick a date)" value=""/> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> </div> </code> ===== Coding in JavcScript ===== The following code set the date input format as YYYY-MM-DD, and limited the range from today up to 3 years. Note that the ''time'' part is ignored. The time range can be limited by parameters ''minDate'', and ''maxDate''. They takes a momentJs object. The ''allowInputToggle'' parameters allows the date picker interface to be shown on the input field is clicked. For more options, go see [[https://eonasdan.github.io/bootstrap-datetimepicker/Options/]]. <code> var now = moment(); var maxDateTime = moment(now); maxDateTime.add(3, 'years'); var datetimepickerAfterNow = $('#datetimepicker-after-now'); datetimepickerAfterNow.datetimepicker({ format: 'YYYY-MM-DD', toolbarPlacement: 'bottom', useCurrent: false, ignoreReadonly: true, sideBySide: true, showClose: true, allowInputToggle: true, minDate: now, maxDate: maxDateTime }); </code> {{ :bootstrap_3_datepicker_1.png?direct&400 |}} bootstrap_3_datepicker.txt Last modified: 2018/09/17 09:44by chongtin