Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Google Sign In with OpenID

date helper

edited September 2013 in I18n

I'm at my first use of the client-side date helper.

<input type="text" name="ordexpiry" value="{{ ordexpiry|I18n::date }}" />

is rendered as

<input type="text" name="ordexpiry" value="<time class="date" datetime="1970-01-01T00:00:00+00:00">January 1, 1970</time>" />

I tried also setting a defaut = "2013-09-02" without success. What am I doing wrong?

Comments

  • edited September 2013

    On this page it says "uses the jquery localize plugin": Link http://www.elefantcms.com/wiki/JavaScript-and-Client-Side-Helpers#{{-date_value|i18n::date-}}

    Not sure if that's installed by default or if it's something we have to add.

  • Is the page from which I was inspired. It should be inluded by {! admin/util/dates !} that I have added just before using it. It seems that the HTML generated is broken. I see <time class= inside the field and January 1, 1970" /> just outside.

  • Is it case-sensitive? (i18n vs I18n)

    Sometimes it's helpful to look at the cache file that elefant generates to see what's really going on (how the template is being interpreted).

  • The output of the I18n::date*() methods are HTML tags that wrap the date, which are then used to localize the date/times using the jQuery localize plugin.

    You probably just want to render the date as value="{{ordexpiry|quotes}}" or if you need it in a specific format you can use:

    gmdate ('Y-m-d\TH:i:sP', strtotime($dateval));
    
  • @twheel Yes it is case-sensitive. When capitalized (such as the first letter of the class) is capitalized also in the cache.

    @jbroadway I looked for examples in the apps of using I18n::date and I found only for I18n::date_time. But it should be the same thing. I noticed that it is never used as a value in an "input" tag but only in "p" and "td" tag. By analogy I think it would work well in a "span" but I do not understand why it cannot work within the "value" attribute. Sorry for my little understanding and my poor English.

    Thanks for your help.

  • edited September 2013

    @alpi, the output of all of the I18n date/time-related methods is a <time> tag, so it can't go inside an attribute of an existing tag. The jQuery localize plugin looks for <time> tags and converts the date/time shown from GMT into the local timezone of the current user. That's the real purpose of those methods, to convert a displayed date into the local timezone, which you wouldn't want to do to the value of a date in a form field.

    For date handling in forms, I just set the default value to the current date/time with:

    $form->data['datefield'] = gmdate ('Y-m-d H:i:s');
    

    And I add it to the input value attribute with:

    <input type="text" name="datefield" class="datetimepicker" value="{{datefield|quotes}}" />
    

    Then to add a jQuery date/time picker to the input field, I do this:

    $page->add_style ('/js/jquery-ui/jquery-ui.css');
    $page->add_style ('<style>
    /* css for timepicker */
    .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
    .ui-timepicker-div dl{ text-align: left; }
    .ui-timepicker-div dl dt{ height: 25px; }
    .ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
    .ui-timepicker-div td { font-size: 90%; }
    </style>');
    $page->add_script ('/js/jquery-ui/jquery-ui.min.js');
    $page->add_script ('/apps/blog/js/jquery.timepicker.js');
    $page->add_script ('<script>
    $(function () {
        $(".datetimepicker").datetimepicker ({
            timeFormat: "hh:mm:ss",
            dateFormat: "yy-mm-dd",
            hourGrid: 4,
            minuteGrid: 10
        });
    });
    </script>');
    

    Later on, to output the date to users I would do:

    {! admin/util/dates !}
    
    {{datefield|I18n::date_time}}
    

    The line {! admin/util/dates !} I put at the very top of the view template, and the other wherever I want the date to show.

    Edit: Forgot to include jQuery UI.

  • Thank you very much.

Sign In or Register to comment.