1

I am using the Bootstrap 3 Datepicker, which is using Momentjs, and in its documentation it says to refer to Momentjs's documentation for valid formats.

Neither of those documentations explicitly state that I am allowed to use a string literal in the format. The string I want is at, so that I can display the datetime as:

December 31st, 1999 at 23:59

The string literal does work however, and I have managed to get the date and time picker to work, read the default value correctly, update itself corrently, and submit the correct value, by setting the following format option:

format: "MMMM D, YYYY \\a\\t HH:mm"

But a consequence of doing this is that the AM/PM button now shows up in the datepicker's UI, even though the time shown in the input element is shown in the 24-hour format (the interface for choosing times shows the 12-hour format, but the resulting output is in 24-hour format).

The datepicker doesn't explicitly offer an option to show the time in a 12-hour or 24-hour format, but instead relies on the a in the format to display the AM/PM value. This is the a that I need in the at string, and I cannot get it (or trick it) to not take that as a AM/PM configuration option.

Can I get around this, and keep the literal at in my format, while not showing the AM/PM button in the UI?

Edit regarding the possible duplicate:

Same as bowheart's suggestion, it doesn't solve what seems like might just be a bug in the end. Escaping the characters works fine, but as a side-effect turns on an unwanted option.

3Nex
  • 517
  • 6
  • 14
  • Possible duplicate of [Add custom text to the output text field in bootstrap datetimepicker](https://stackoverflow.com/questions/43097158/add-custom-text-to-the-output-text-field-in-bootstrap-datetimepicker) – VincenzoC Jul 03 '17 at 08:36
  • @VincenzoC Same as bowheart's suggestion, it doesn't solve what seems like might just be a bug in the end. Escaping the characters works fine, but as a side-effect turns on an unwanted option. – 3Nex Jul 03 '17 at 13:30
  • I agree with you, I marked it as possible duplicate exactly because both the problem and the proposed solution are the same of the linked post (I simply wanted to give you a link where the same problem is discussed). Anyway I noticed that I posted the wrong link, [here](https://stackoverflow.com/q/43115451/4131048) you can find an answer stating that this is a known issue of the component and there is a link to the open pull request that tries to fix the problem. – VincenzoC Jul 03 '17 at 13:49

1 Answers1

1

I suppose you're referring to escaping characters in momentjs?

Anything enclosed in square brackets – [] – will be escaped. So:

$('#my-picker').datetimepicker({
    format: 'MMMM D, YYYY [at] HH:mm'
})

should be what you're looking for.

bowheart
  • 4,616
  • 2
  • 27
  • 27
  • Thanks for the suggestion, but the same thing happens unfortunately. I do get the `at` in the output, but the datepicker still shows the AM/PM button. I guess it might be more of the datepicker plugin's fault, than merely correctly using the Momentjs format. – 3Nex Jun 30 '17 at 22:13
  • Ah, you mean the `togglePeriod` button. Then your answer is yes, this is a shortcoming of the plugin. Submit a pull request, find a different one, or make your own. – bowheart Jun 30 '17 at 23:41