@using Kreta.Web.Areas.Orarend.Models

@model BaseOrarendTorleseModel

<div class="@BootsrapHelper.GetSizeClasses(6)" style="padding-top: 20px;">
    @Html.Raw(OrarendekTorleseResource.OraTipusText)
</div>
<div id="ora-tipus-rdo-list-container" class="@BootsrapHelper.GetSizeClasses(6)">
    @Html.KretaRadioButtonListFor(x => x.OraTipus, Model.OraTipusok, isNeedValidation: true, onChangeFunction: "OrarendekTorleseHelper.rdoListOnChange()")
</div>
<div class="@BootsrapHelper.GetSizeClasses(4)">
    @Html.KretaDatePickerFor(x => x.KezdeteDatum).Min(Model.MinDatum).Max(Model.MaxDatum)
</div>
<div class="@BootsrapHelper.GetSizeClasses(2)" style="height: 40px; line-height: 40px;">
    <span>-tól</span>
</div>
<div class="@BootsrapHelper.GetSizeClasses(4)">
    @Html.KretaDatePickerFor(x => x.VegeDatum).Min(Model.MinDatum).Max(Model.MaxDatum)
</div>
<div class="@BootsrapHelper.GetSizeClasses(2)" style="height: 40px; line-height: 40px;">
    <span>-ig</span>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('label[for^="OraTipus"]').css({ paddingLeft: "2em", lineHeight: "0.7em" });

        var mask = "0000. 00. 00.";
        var format = "yyyy. MM. dd.";
        var culture = "en-US";

        var kezdeteDatum = $("#KezdeteDatum");

        kezdeteDatum.kendoMaskedTextBox({
            mask: mask,
            culture: culture
        });

        kezdeteDatum.kendoDatePicker({
            format: format
        });

        kezdeteDatum.closest(".k-datepicker")
            .add(kezdeteDatum)
            .removeClass("k-textbox");

        var vegeDatum = $("#VegeDatum");

        vegeDatum.kendoMaskedTextBox({
            mask: mask,
            culture: culture
        });

        vegeDatum.kendoDatePicker({
            format: format
        });

        vegeDatum.closest(".k-datepicker")
            .add(vegeDatum)
            .removeClass("k-textbox");
     
        $("#orarendek-torlese-container > form").kendoValidator({
            rules: {
                dateValidation: function (input, params) {
                    if (input.is("[name$='Datum']") && input.val() != "") {
                        var date = kendo.parseDate(input.val(), format);
                        if (!date) {
                            input.val("");
                        }
                    }
                    return true;
                }
            }
        });
    });
</script>