Bootstrap DateTimePicker and existing dates parsing issue?

Question

For information as to versions, using Bootstrap 3.0.0 (built in with the new MVC templates if I remember correctly), Bootstrap-datetimejs 4.0.0 (https://github.com/Eonasdan/bootstrap-datetimepicker), and ASP.NET MVC 5.

Using MVC, I'm rendering out a bunch of fields, but this one has existing data (this is when inspecting element in Chrome so it isn't HTMLHelper code):

<input class="form-control timepicker input-validation-error" data-format="hh:mm PP" 
  data-val="true" data-val-date="The field Start (Time) must be a date." 
  data-val-required="The Start (Time) field is required." 
  id="MaintenanceSundayTimeStart" 
  name="MaintenanceSundayTimeStart" type="text" value="1/1/2000 8:00:00 PM">

The code that generates it:

<div class="col-sm-4">
  <div class="form-group">
    @Html.LabelFor(model => model.MaintenanceSundayTimeStart)
    @Html.TextBoxFor(model => model.MaintenanceSundayTimeStart, 
      new { @data_format = "hh:mm PP", @class = "form-control timepicker" })
  </div>
</div>

When page loads, I call this:

 $('.timepicker').each(function () {
   $(this).datetimepicker({
     format: 'LT'
   });
 });

edit: have attempted to try this:

 $('.timepicker').each(function () {
   $(this).datetimepicker({
     pickDate: false
   });
 });

and set the data-format to this based on looking at the moment.js documentation, though the slashes and the colons aren't included by I assume they can be dropped in (to match the 1/1/2000 8:00:00 PM)

data-format="M/D/YYYY H:mm:ss A"

And it still seems to be unable to parse the datetime.

For some reason, when the control renders, in the textbox I'm seeing a totally different time listed (1:00 PM) which tells me that it may just be unable to parse out that value. I do want the render to be hour:minute AM/PM only, but I think I have to bind to a standard DateTime object, right? Looking at the source, it looks like input-validation-error is injected so that may be my larger issue of submitting the form just focusing the text box.

Is there something I'm doing incorrectly? I know I want to take in a "mm/dd/YYYY hh:mm:ss PP" and have it parse out as just the "hh:mm PP" part parse out. When saving, I really only care about the time component (I force the date to 1/1/2000 regardless as I am not concerned with the date component at all).

edit: after more attempts, I've noticed that the value being parsed (primarily by dumping in other values) is that the value seems to pull the MM part as the hour. The input is going to be a full datetime, but I only want the user to be given the time component to manage (I force all dates to just 1/1/2000). At this stage, I think if I can get that part done, I'll be good.

Eonasdan · Accepted Answer · 2015-02-25 15:20:45Z

2

+50

If you are using v4 of my Datetimepicker you can easily accomplish by doing this:

$('.timepicker').datetimepicker({
    format: 'LT'
});

no extra data- required.

Also, as an added bonus, you can use an EditorFor template to setup your textbox.

https://gist.github.com/Eonasdan/1f6bd021319486e23777

Model.cs

using System.ComponentModel.DataAnnotations;
[DataType(DataType.Time)]
public DateTime Updated { get; set; }

Time.cshtml

//This file goes in /Shared/EditorTemplates/Time.cshtml
//You can easily do this for DataType.Date and DataType.DateTime
@{
    var attributes = new Dictionary<string, object>();
    attributes.Add("class", "form-control");
    attributes.Add("type", "datetime");
}
<div class="input-group timepicker col-sm-3 col-md-3" id="@(ViewData.TemplateInfo.HtmlFieldPrefix)-timepicker">
    @Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, attributes)
    <span class="input-group-addon">
        <span class="fa fa-clock-o"></span>
    </span>
</div>

edited Feb 25, 2015 at 15:20

answered Feb 25, 2015 at 15:07

Eonasdan

7,8119 gold badges60 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Robert Over a year ago

it was weird, I was going to share a screenshot of not using the data-format property and it still coming out to 1pm. Then i saw you added an editor template and marked up the DateTimes as DataType(DataType.Time). Not sure which component of it worked, but this corrected the issue, it now renders 8pm as what is being passed in. Thanks for that (and now I know you can use EditorTemplates in Shared, very cool added bonus).

Eonasdan Over a year ago

I have a bunch of those editorfor templates

Jason Tate · Accepted Answer · 2015-02-24 18:30:58Z

0

Looks like you are actually using a different datetime picker which is no longer actively developed https://github.com/tarruda/bootstrap-datetimepicker and I would recommend switching to the version you actually linked to. Many of those data- attributes look to be related to form validation, and may also be at conflict with what you are attempting to do. I would recommend using data-val="false" until you can get the picker working as intended, then tackle any needed validation.

edited Feb 24, 2015 at 18:30

answered Feb 24, 2015 at 18:11

Jason Tate

7161 gold badge7 silver badges10 bronze badges

2 Comments

Robert Over a year ago

I'm not 100% certain, but I think that the data-* attributes are generated by ASP.NET MVC. It seems like the "must have a valid value" stuff must be as the "Start (Time)" is only set with the DisplayAttribute on the model. I actually realized I was using the wrong format (pickDate: false) when I looked in Chrome console and saw that it isn't defined or similar. Switching to format: 'LT' does the time popup, but having an issue with it appearing when it shouldn't. I'm actually using the one I linked to before (grabbed the version number from the bootstrap-datetimepicker.js file).

Jason Tate Over a year ago

@Robert if date is irrelevant, look at limiting the value of the input to time only. Since to limit display of the picker to "time only" requires the format to be time only. A little confusing but see this fiddle which illustrates the idea. Also verify you are using the same scripts as in the fiddle. Notice I set the picker format to match that of the input value, as per momentdocs - you can use the date as you have it with "M/D/YYYY h:mm:ss A" but there will be no way to hide the day selection

Shane Rowatt · Accepted Answer · 2015-10-31 09:49:21Z

0

Try using a lowercase 'h' for the hour part of the format e.g.:

$('.timepicker').each(function () {
  $(this).datetimepicker({
    format: 'format="M/D/YYYY h:mm:ss A"'
  });
});

answered Oct 31, 2015 at 9:49

Shane Rowatt

2,1153 gold badges29 silver badges45 bronze badges

Collectives™ on Stack Overflow

Bootstrap DateTimePicker and existing dates parsing issue?

3 Answers 3

Model.cs

Time.cshtml

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Model.cs

Time.cshtml

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related