Last active
August 29, 2015 14:22
-
-
Save rcmlee99/62dcd0dd375b3a5876a3 to your computer and use it in GitHub Desktop.
Bootstrap Datepicker Date Validation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Contributed by Ben Till. | |
| I have a display condition for a div based on whether a date is in the past. | |
| The date is chosen via a bootstrap datetimepicker, as is the fashion. | |
| You need to handle events for both keyup in the field, and the “dp.change” event fired from the datetimepicker widget. | |
| The Moment.js library is excellent for date parsing / querying / validating in javascript. Luckily we already have it included in the OLS theme. | |
| If you wanted to fire off a jsf ajax call, you could use the capture of the “dp.change” event to trigger an event for whatever ajax condition is | |
| required on your chosen element ( component ). | |
| <div id="primaryCareDateTimePicker" class="col-xs-6 col-md-4 input-group date datepicker__js input-date-group"> | |
| <h:inputText id="primaryCareDateInput" value="#{cc.vch.formObject.primaryCareDateStr}" styleClass="form-control datePickerInput primaryCareDateInput"/> | |
| <span class="input-group-addon input-date-img"> | |
| <img src="${request.contextPath}/javax.faces.resources/ols/pplcirc/assets/images/icon-datepicker.png.jsf" alt="choose a date" title="choose a date" class="calendar-image-adjust" /> | |
| </span> | |
| <h:message for="primaryCareDateInput" errorClass="has-error"/> | |
| </div> | |
| I had requirement for ajax call. It was not happening as change event was not getting triggered. (Usually, if the change is done using javascript then the change event needs to be manually triggered) | |
| I did it this way for that requirement. | |
| $jq(".datepicker__js").on("dp.change", function (e) { | |
| var dateElementId = "#"+e.target.id+" > input"; | |
| var currentDateValue; | |
| currentDateValue = $jq(dateElementId).val(); | |
| if(currentDateValue.length > 0 && previousDateValue != currentDateValue){ | |
| previousDateValue = currentDateValue; | |
| $jq(dateElementId).change(); | |
| } | |
| }); | |
| function isDateBeforeNow(dateToCheck){ | |
| return moment(dateToCheck).isBefore(); | |
| } | |
| function checkInputDateFormatValid(dateStr){ | |
| if(dateStr == null || dateStr == ""){ | |
| return false; | |
| } | |
| var mom = moment(dateStr, 'DD/MM/YYYY', true); | |
| return mom.isValid(); | |
| } | |
| $jq("input.primaryCareDateInput").keyup(function(){ | |
| var dateStr = $jq("input.primaryCareDateInput").val(); | |
| if( checkInputDateFormatValid(dateStr) ){ | |
| if(isDateBeforeNow( moment(dateStr, 'DD/MM/YYYY'))){ | |
| $jq("div.returnToWorkQDiv").show(); | |
| }else{ | |
| $jq("div.returnToWorkQDiv").hide(); | |
| } | |
| }else{ | |
| $jq("div.returnToWorkQDiv").hide(); | |
| } | |
| }); | |
| $jq("#primaryCareDateTimePicker").on("dp.change", function(e) { | |
| var dateDp = $jq("#primaryCareDateTimePicker").data("DateTimePicker").getDate(); | |
| if(isDateBeforeNow( moment(dateDp) )){ | |
| $jq("div.returnToWorkQDiv").show(); | |
| }else{ | |
| $jq("div.returnToWorkQDiv").hide(); | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment