Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Ismail Mayat 4337 posts 9342 karma points MVP 2x admin c-trib
    May 01, 2018 @ 12:13
    Ismail Mayat
    0

    Datepicker display format

    In forms for the datepicker how do you set the date display format? I want dd/mm/yyyy but cannot see where to set it.

    Also in the year part i want to set max year to current year - 18. I want to prevent people younger than 18 entering their date of birth.

    Regards

    Ismail

  • Owain Williams 374 posts 1115 karma points MVP 2x c-trib
    May 01, 2018 @ 12:20
    Owain Williams
    0

    I think we had to change the website language. Default was US so we changes to GB and the date changed that way. As for the the age limit, I'll be watching the thread with interest :)

  • Daniel Chenery 119 posts 463 karma points
    May 01, 2018 @ 12:37
    Daniel Chenery
    0

    It uses Pikaday, right?

    Can't you set the minDate param? This JS is rendered in Views/Forms/DatePicker.cshtml. You'd probably have to do some razor. DateTime.Now.AddYears(-18) (not tested)

    https://github.com/dbushell/Pikaday#configuration


    P.S. You can also change the locale here, but as Owain says, it should default to the server.

  • Ismail Mayat 4337 posts 9342 karma points MVP 2x admin c-trib
    May 01, 2018 @ 13:32
    Ismail Mayat
    0

    Daniel,

    The js is not inserted in FieldType.DatePicker.cshtml partial? I thought i would need to over ride some properties on pickaday but cannot see where to do it exactly and the forms documentation does not show how to do this.

    Regards

    Ismail

  • Daniel Chenery 119 posts 463 karma points
    May 01, 2018 @ 13:35
    Daniel Chenery
    0

    Not in the FieldType.DatePicker.cshtml file, just DatePicker.cshtml. It should be in the top level Forms folder

    Views > Forms > DatePicker.cshtml

    Same location as Script.cshtml and Form.cshtml

  • Ismail Mayat 4337 posts 9342 karma points MVP 2x admin c-trib
    May 01, 2018 @ 13:51
    Ismail Mayat
    0

    Daniel,

    OK sorted many thanks for your pointers. So I updated a setting in the UmbracoForms namely DatePickerYearRange and in the DatePicker partial i made some ammends:

    $(".datepickerfield")
            .each(function () {
                var currentId = this.id;
                new Pikaday({
                    field: document.getElementById(currentId),
                    yearRange: "@datePickerYearRange",
                    i18n: locales.default,
                    format: "DD/MM/YYYY",
                    maxDate:moment().toDate(),
                    onSelect: function (date) {
                        setShadow(currentId.replace("_1", ""), date);
                    }
                });
            });
    
  • Ismail Mayat 4337 posts 9342 karma points MVP 2x admin c-trib
    May 01, 2018 @ 13:58
    Ismail Mayat
    0

    One thing, modifying date picker means all date pickers will be impacted. So do i need to copy date picker partial to my themes folder so then it only applies to date pickers on that theme?

    Regards

    Ismail

  • Daniel Chenery 119 posts 463 karma points
    May 01, 2018 @ 14:00
    Daniel Chenery
    0

    I've never successfully used themes, but yes, this change will be global to all date pickers, so themeing will be needed.

    Hopefully it's supported.

  • Ben McKean 255 posts 499 karma points
    Sep 13, 2018 @ 10:09
    Ben McKean
    0

    Hi Ismael,

    Hope you're well

    Did you ever get the DatePicker updated as a theme? I can update the one at the route but when I copy it to a theme it doesn't seem to have any affect and pick it up...

    Thanks

    Ben

  • Adam Burt 10 posts 74 karma points
    Jan 24, 2019 @ 10:54
    Adam Burt
    0

    Hi all,

    I'm having the same problem - I want to update the datepicker code in the context of a theme, as this is the 'correct' way of making changes to fieldtypes.

    Did either of you ever get this figured out?

    Cheers,

    • Adam
  • Adam Burt 10 posts 74 karma points
    Jan 30, 2019 @ 13:07
    Adam Burt
    0

    Replying to myself...

    I ended up changing the markup of the input field itself, and instantiating Pikaday myself in my own JS file. As long as you don't use the Umbraco Forms classname on your input field, their Pikaday setup won't apply and you'll be free to use your own.

    Bit annoying though! Sharing in case it helps anyone else.

Please Sign in or register to post replies

Write your reply to:

Draft