Skip to content

Instantly share code, notes, and snippets.

@rcmlee99

rcmlee99/datepicker_date_validation

Last active August 29, 2015 14:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rcmlee99/62dcd0dd375b3a5876a3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rcmlee99/62dcd0dd375b3a5876a3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. rcmlee99 revised this gist Jun 3, 2015. 1 changed file with 26 additions and 0 deletions.
    26 changes: 26 additions & 0 deletions datepicker_date_validation
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    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.

    @@ -8,6 +10,30 @@ The Moment.js library is excellent for date parsing / querying / validating in j
    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();
    }
  2. rcmlee99 created this gist Jun 3, 2015.
    46 changes: 46 additions & 0 deletions datepicker_date_validation
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    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 ).

    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();
    }
    });