Search code examples
jqueryangularjsmomentjstimepicker

Datetime and selectbox


I am using angular-jquery-timepicker directive to fill a selectbox with hours in AM/PM format.

I get this hours from a JSON like this:

[
   {
      id: "34", day_of_week: "2", start_time: "8:00 AM",
      end_time: "12:00 PM", duration: 30
   },
   …
]

Here, initialize the directive options according the docs:

for(var i = 0; i < httpData.data.length; i++)
{
httpData.data[i].start_time = moment(httpData.data[i].start_time, 'g:i A');
httpData.data[i].end_time = moment(httpData.data[i].end_time, 'g:i A');
httpData.data[i].options = {
   step: httpData.data[i].duration,
   timeFormat: 'g:i A',
   asMoment: true
};
}
$scope.settings = httpData.data;

And inside into a ng-repeat:

<input class="custom-input" ui-timepicker="setting.options" type="text" name="start" ng-model="setting.start_time" required />

<input class="custom-input" ui-timepicker="setting.options" type="text" name="end" ng-model="setting.end_time" required />

The problem is that the generated start_time and end_time in the loop have 00:00 hs, so 12:00 AM is selected in the selectbox.

Any ideas ?


Solution

  • Consider using:

    moment(httpData.data[i].start_time, 'hh:mm A');
    

    Instead of

    moment(httpData.data[i].start_time, 'g:i A');
    

    You can find the complete list of tokens here