DatePicker 1 Must be before DatePicker 2

8 posts, 0 answers
  1. Ian
    Ian avatar
    73 posts
    Member since:
    Jun 2013

    Posted 25 Jul 2013 Link to this post

    Give how awesome Kendo is I thought I'd ask. (I haven't see it in the docs)

    Is there a way, in MVC, to enforce that DatePicker 2 is before DatePicker 1. It's a fairly common validation for forms with a From and To date.

    Thanks
  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 26 Jul 2013 Link to this post

    Hi Ian,

    Please refer to

    http://demos.kendoui.com/web/datepicker/rangeselection.html

     

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Atlas
    Atlas avatar
    97 posts
    Member since:
    Jun 2009

    Posted 03 Oct 2013 Link to this post

    The demo doesn't appear to work. I wrote my own code to resolve the issue:

    $(function () {
        function checkDates() {
            if (startDate.val() != '' && endDate.val() != '') {
                if (Date.parse(startDate.val()) > Date.parse(endDate.val())) {
                    alert('End date should be before start date');
                    endDate.val(startDate.val());
                }
            }
        }
         
        var startDate = $("#startDate").kendoDatePicker({
            change: checkDates
        });
        var endDate = $("#endDate").kendoDatePicker({
            change: checkDates
        });
     
        $("#startDate").kendoValidator({
            rules: {
                date: function (input) {
                    var d = kendo.parseDate(input.val());
                    return d instanceof Date;
                }
            }
        });
     
        $("#endDate").kendoValidator({
            rules: {
                date: function (input) {
                    var d = kendo.parseDate(input.val());
                    return d instanceof Date;
                }
            }
        });
    });
  5. Greg
    Greg avatar
    35 posts
    Member since:
    Sep 2013

    Posted 03 Oct 2013 Link to this post

    I want to perform this validation on two dates that are in a Grid that uses the Default Popup Editor (which automatically applies DatePickers to the two date fields). The referenced example has easy to reference input fields. With the popup editor, I don't know how to do this.

    Can anyone point me the right direction? Thanks.
  6. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 04 Oct 2013 Link to this post

    @Atlas

    The online demo works as expected, but uses a different approach, compared to your implementation - each DatePicker change handler limits the range of valid values of the other DatePicker.

    @Greg 

    One option is to use an edit form template

    http://docs.kendoui.com/api/web/grid#configuration-editable.template

    Another option is to use two custom editors with preset IDs and attach change handlers.

    http://demos.kendoui.com/web/grid/editing-custom.html

    The best option is probably to use custom validation rules in the model. The following is based on the Grid popup editing demo and defines a dummy requirement that the UnitPrice should be greater than UnitsInStock.

    http://demos.kendoui.com/web/grid/editing-popup.html

    Note that the custom validation rule is executed for every field, so you first check which field is the current one, and also, return true for the unrelated fields, and true/false for the related fields.


    schema: {
        model: {
            id: "ProductID",
            fields: {
                ProductID: { editable: false, nullable: true },
                ProductName: { validation: { required: true } },
                UnitPrice: { type: "number",
                    validation: {
                        required: true,
                        min: 1,
                        custom: function(input) {
                            if (input && (input.attr("name") == "UnitPrice" || input.attr("name") == "UnitsInStock")) {
                                // add custom validation message
                                input.attr("data-custom-msg", "foo");
                                // retrieve widgets
                                var unitPriceInput = input.closest(".k-edit-form-container").find("[name='UnitPrice']").data("kendoNumericTextBox");
                                var unitsInStockInput = input.closest(".k-edit-form-container").find("[name='UnitsInStock']").data("kendoNumericTextBox");
                                // validate
                                if (unitPriceInput.value() < unitsInStockInput.value()) {
                                    return false;
                                } else {
                                    return true;
                                }
                            }
                            // return true for unrelated fields
                            return true;
                        }
                    }
                },
                Discontinued: { type: "boolean" },
                UnitsInStock: { type: "number", validation: { min: 0, required: true } }
            }
        }
    }


    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Greg
    Greg avatar
    35 posts
    Member since:
    Sep 2013

    Posted 04 Oct 2013 Link to this post

    Dimo: Thank you. Your final suggestion worked well.

    I have one more question to refine the validation though. I would like to ignore the time portion of the dates I am comparing.

    e.g. 10/01/2013 16:00:00 is technically less than 10/01/2013 17:00:00, but I want to simply compare 10/01/2013 and 10/01/2013 and determine them to be equal (and fail the test in my code below).

    This is the field definition I have running. This works except it includes the time in the comparison.

                contractStartDate: {
                  type: "date", validation: {
                    validateContractStartDate: function (input) {
                      // Check that input field is the one we want to validate. This fires for every field.
                      if (input && (input.attr("name") == "contractStartDate")) {
                        // Retrieve widgets.
                        var contractEndDateInput = input.closest(".k-edit-form-container").find("[name='contractEndDate']").data("kendoDatePicker");
                        var contractStartDateInput = input.closest(".k-edit-form-container").find("[name='contractStartDate']").data("kendoDatePicker");

                        // Validate
                        var s = contractStartDateInput.value();
                        var e = contractEndDateInput.value();
                        
                        if (e <= s) {
                          input.attr("data-validateContractStartDate-msg", "Start Date must be earlier than End Date");
                          return false;
                        } else
                          return true;
                      } else
                        // return true for unrelated fields
                        return true;
                    }
                  }
                },

                contractEndDate: {
                  type: "date", validation: {
                    validateContractEndDate: function (input) {
                      // Check that input field is the one we want to validate. This fires for every field.
                      if (input && (input.attr("name") == "contractEndDate")) {
                        // Retrieve widgets.
                        var contractEndDateInput = input.closest(".k-edit-form-container").find("[name='contractEndDate']").data("kendoDatePicker");
                        var contractStartDateInput = input.closest(".k-edit-form-container").find("[name='contractStartDate']").data("kendoDatePicker");

                        // Validate
                        var s = contractStartDateInput.value();
                        var e = contractEndDateInput.value();

                        if (e <= s) {
                          input.attr("data-validateContractEndDate-msg", "End Date must be later than Start Date");
                          return false;
                        } else
                          return true;
                      } else
                        // return true for unrelated fields
                        return true;
                    }
                  }
                },
  8. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 07 Oct 2013 Link to this post

    Hi Greg,

    You have two standard Javascript Date objects. How should you compare them while ignoring the time portions?

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Greg
    Greg avatar
    35 posts
    Member since:
    Sep 2013

    Posted 07 Oct 2013 Link to this post

    Sorry for the noob question... The answer is:

                        var s = contractStartDateInput.value();
                        var e = contractEndDateInput.value();

                        var s1 = new Date(s.toDateString());
                        var e1 = new Date(e.toDateString());

                        if (e1 <= s1) {
Back to Top
Kendo UI is VS 2017 Ready