Using datepicker with the validation engine

Question

I have a form which uses validation engine, but the input element that uses jquery datepicker wont display the error message or even validate as a require item. Is there a way to make both work? If not, is there another work around?

    <input class="validate[required] datepicker" name="dt1" value="日付を選択" data-validation-engine="validate[required]" class="validate[required]"/>

<script>
    //validate engine
    $(document).ready(function(){
        $("#form1").validationEngine('attach', {promptPosition : "topLeft", scroll: false});
       });

    //datepicker
    $('.datepicker').datepicker({
    constrainInput: true,
    closeText: "閉じる",
    prevText: "&#x3C;前",
    nextText: "次&#x3E;",
    currentText: "今日",
    monthNames: [ "1月","2月","3月","4月","5月","6月",
    "7月","8月","9月","10月","11月","12月" ],
    monthNamesShort: [ "1月","2月","3月","4月","5月","6月",
    "7月","8月","9月","10月","11月","12月" ],
    dayNames: [ "日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日" ],
    dayNamesShort: [ "日","月","火","水","木","金","土" ],
    dayNamesMin: [ "日","月","火","水","木","金","土" ],
    weekHeader: "週",
    dateFormat: "yy/mm/dd",
    firstDay: 0,
    isRTL: false,
    showMonthAfterYear: true,
    yearSuffix: "年"
    });
</script>

Answer 1

I specified the data attribute to the field as a "date", so it did finally worked.

                <input class="validate[required,custom[date] datepicker" name="dt1" autocomplete="off" placeholder="日付を選択" data-validation-engine="validate[required,custom[date]" />

Answer 2

I had a similar issue where my datepicker was getting validated before the datepicker could assign the value, and the input would stay invalid after the datepicker assigned the value.

My issue:

I had to modify the classlist on my input, like the Jquery Validation Engine documentation describes:

class="validate[required] text-input datepicker"

I wrote this as an answer because I'm not entirely sure what happened in your case(Fernando) and your answer confused me.