Hide time when midnight?

3 posts, 1 answers
  1. Sypher
    Sypher avatar
    79 posts
    Member since:
    Aug 2006

    Posted 08 Nov 2012 Link to this post

    I'd like to have a datetimepicker that displays the date and time by default but only displays the date if the time is midnight. It should update the format when the value is changed. I can format the value when the datetimepicker is created to one or the other format, but if the time changes, I can't seem to update the picker's format. Any ideas on how to do this?

    http://jsbin.com/ekilok/1/

    $(document).ready(function () {
      var dateFormat = "{0:M/d/yy}";
      var datetimeFormat = "{0:M/d/yy h:mm tt}";
      var d = new Date(2012, 11, 8, 11, 20);
      var d2 = new Date(2012, 11, 8);
        
      $('#StartWithDate').kendoDateTimePicker({
          value: d,
          format: (d.getHours() === 0) ? dateFormat : datetimeFormat,
        change: function(e) { /* what goes here */ }
      });   
      $('#StartWithDateTime').kendoDateTimePicker({
          value: d2,
          format: (d2.getHours() === 0) ? dateFormat : datetimeFormat,
          change: function(e) { /* what goes here */ }
      });   
    });
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 09 Nov 2012 Link to this post

    Hi Bryan,

    The picker format can be changed after initialization via options.format. Since the widget has no mechanism to automatically refresh its display value after such a configuration change, you need to do that manually.

    Note that I modified the dateFormat and datetimeFormat variable values.

    var dateFormat = "M/d/yy";
    var datetimeFormat = "M/d/yy h:mm tt";
    var picker = $('#StartWithDate').data("kendoDateTimePicker");
    var v = picker.value();
     
    picker.options.format = datetimeFormat;
    picker.element.val(kendo.toString(v, picker.options.format, picker.options.culture));


    Regards,
    Dimo
    the Telerik team
    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. Sypher
    Sypher avatar
    79 posts
    Member since:
    Aug 2006

    Posted 09 Nov 2012 Link to this post

    Thanks! That was simple enough.

    I'm using those date format strings across a whole application and they have to have the curly braces for grid column formats. It seems like the options.format field will take them either way, but setting the value with kendo.toString needs it to be without the braces. If I use kendo.format instead of kendo.toString to set the value, I can keep my global format strings. :-)
Back to Top