Mutliple Control show different Time

[salmankhatri]

i have five input fields where i place class of "timepicker"

$('.timepicker').wickedpicker(options);

the problem is that while i load agin my exisitng record each text box showing current time instead saved time record

and while i open time picker controller its showing same as text box value time

this is my option setting var options = { //now: "0:00", //hh:mm 24 hour format only, defaults to current time twentyFour: false, //Display 24 hour format, defaults to false upArrow: 'wickedpickercontrolscontrol-up', //The up arrow class selector to use, for custom CSS downArrow: 'wickedpickercontrolscontrol-down', //The down arrow class selector to use, for custom CSS close: 'wickedpicker__close', //The close class selector to use, for custom CSS hoverState: 'hover-state', //The hover state class to use, for custom CSS title: 'Select Namaz Time', //The Wickedpicker's title, showSeconds: false, //Whether or not to show seconds, secondsInterval: 1, //Change interval for seconds, defaults to 1 , minutesInterval: 1, //Change interval for minutes, defaults to 1 beforeShow: null, //null, //A function to be called before the Wickedpicker is shown show: null,//GetTimeShow(this), //A function to be called when the Wickedpicker is shown clearable: false, //Make the picker's input clearable (has clickable "x")

    };

[ericjgagnon]

You need to use some sort of persistence for it work across requests. In order to get all of your input fields to load their individual time, you need to iterate over all the elements that share the .timepicker selector.

$('.timepicker').each(function(index, element) { 
     var elementTime = //$(element).data('someAttribute') or retrieve it from the ajax response
     $(element).wickedpicker({now: elementTime});
});

I hope this helps you out.

[townegr]

@ericjgagnon Was this ever resolved? I am also incurring this bug with multiple row that include the wickedpicker. The time is not respecting the clicked element. It's referencing the initially clicked element.

[ericjgagnon]

@towngr, there isn’t an issue with setting the wickedpicker’s time. As I explained above, it is up to the developer to pass the time (ie from your database) to the wickedpicker.

[townegr]

In my case, the problem occurs when viewing the timepicker in a modal which is rendered from a partial view where wickedpicker is instantiated once on the client-side. Given that a user can add/edit/view multiple timestamps on a page (i.e. multiple instances of my timepicker modal), wickedpicker does not allow me to reset with new timestamp in spite of my attempt to pass in a new options hash with now set to expected time. In order to handle, I updated with the following changes on line 97:

        showPicker: function (element) {
            if (typeof this.options.beforeShow === 'function') {
                this.options.beforeShow.call(this, element, this.timepicker);
            }

This allows me to access this and do the following so that I can set/display time properly:

  options = (datetime = null) ->
    beforeShow: (el, timePicker) ->
      newNow = new Date()
      time = el.val().match(/(\d+)(?:\s?:\s?(\d\d))?\s*(p?)/i)
      newNow.setHours( parseInt(time[1]) + (time[3] ? 12 : 0) )
      newNow.setMinutes( parseInt(time[2]) || 0 )
      this.selectedHour = this.parseHours(newNow.getHours())
      this.selectedMin = this.parseSecMin(newNow.getMinutes())
      this.selectedSec = this.parseSecMin(newNow.getSeconds())
      this.selectedMeridiem = this.parseMeridiem(newNow.getHours())
    now: if !datetime? then '12:00' else extractTime(datetime)

[xahon]

I think my PR solves your problem #45