Date/Time Field displaying minutes in 5 min increments not 1 minute

  • 2
  • Question
  • Updated 3 years ago
  • Answered
How do I change my Date/time field to show 1 minute increments not the current 5 min. increments?
Photo of Megan Vaughan

Megan Vaughan

  • 872 Points 500 badge 2x thumb

Posted 4 years ago

  • 2
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Guessing custom fenderer as I don't think it's an option to declare it. I don't think javascript can alter option values made available by the field renderer.

Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Take a look at this post where our current time selection methodology is outlined.  
https://community.skuidify.com/skuid/topics/datetime-displaying-minutes-in-both-1-min-5-min-blocks

At this point this is pretty hard coded into Skuid and there is not a simple way to create a custom renderer to extend or adjust this functionality.   An area for impromvement for sure. 

What time picker interfaces are you using in other systems that you find very intuitive?  We are always looking for good models....
Photo of Megan Vaughan

Megan Vaughan

  • 872 Points 500 badge 2x thumb
I am using a Date/time field to log in employees time cards. I need to be able to select the exact minute. What is the best go around?
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Megan...Robert Mruczek on our team came up with this.  It's a custom render and swaps the picklist values for the time field with the one he defines.  It basically follows Pat's suggestion.

var field = arguments[0],    value = arguments[1];
    
console.log(value);
if(field.mode == 'edit') {
    
    skuid.ui.fieldRenderers.DATETIME.edit(field, value);
    var html = '<option value="0">00</option><option value="1">01</option><option value="2">02</option><option value="3">03</option><option value="4">04</option><option value="5">05</option><option value="6">06</option><option value="7">07</option><option value="8">08</option><option value="9">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option><option value="32">32</option><option value="33">33</option><option value="34">34</option><option value="35">35</option><option value="36">36</option><option value="37">37</option><option value="38">38</option><option value="39">39</option><option value="40">40</option><option value="41">41</option><option value="42">42</option><option value="43">43</option><option value="44">44</option><option value="45">45</option><option value="46">46</option><option value="47">47</option><option value="48">48</option><option value="49">49</option><option value="50">50</option><option value="51">51</option><option value="52">52</option><option value="53">53</option><option value="54">54</option><option value="55">55</option><option value="56">56</option><option value="57">57</option><option value="58">58</option><option value="59">59</option>';
    
    jQuery(field.element.find(".nx-dt-timewrapper").find("select")[1]).html(html);
    
    var jsDate = skuid.time.parseSFDateTime(value);
    var selectedOpt = jQuery(jQuery(field.element.find(".nx-dt-timewrapper").find("select"))[1]).find("option").filter(function(index, item) {return jQuery(item).attr("value") == jsDate.getMinutes()});
    
    selectedOpt.attr("selected", "");
    
    
}
else {
    
    skuid.ui.fieldRenderers.DATETIME.read(field, value);
}
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Thanks Bill.  That is a great extension of core Skuid using our available APIs
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
This render breaks is the date field is not populated. Here is a related post with a work around. Many thanks to Bill and Rob! https://community.skuidify.com/skuid/...