flatpickr formatting end value after selection

Question

I have the following html:

<div class="form-group">
    @Html.LabelFor(x => x.StartDate)
    @Html.TextBoxFor(m => m.StartDate, "{0:dd-MM-yyyy}", new { type = "text", @class = "flatpickrStart form-control", @id = "absenceStartDate", @Required = true })
    @Html.ValidationMessageFor(x => x.StartDate, null, new { @class = "text-danger" })
</div>
<div class="form-group">
    @Html.LabelFor(x => x.EndDate)
    @Html.TextBoxFor(m => m.EndDate, "{0:dd-MM-yyyy}", new { type = "text", @class = "flatpickrEnd form-control", @id = "absenceEndDate", @Required = true })
    @Html.ValidationMessageFor(x => x.EndDate, null, new { @class = "text-danger" })
</div>

and script:

function InitializeDateTimePickers() {
    $(".flatpickrStart, .flatpickrEnd").flatpickr({
        dateFormat: "dd-MM-yyyy H:i:s",
        enableTime: true,
        weekNumbers: true,
        altInput: true,
        altFormat: "F j, Y - h:i",
        time_24hr: true
    });
}

My codepen for example: https://codepen.io/andrelange91/pen/YOgwaJ

The selection works fine, but when i have selected a value, the value i get seems double in some places.

For example i use the picker to select this: September 21, 2018 - 8:00 the value returned is this: 2121-SepSep-18181818 08:00:0

Is there a way for me to get a proper datetime format for it ? First time using this plugin, and i have so far been unable to find a solution.

Answer 1

No need to write code two times. just write one time

$(".flatpickrStart, .flatpickrEnd").flatpickr({ 
   dateFormat: "d-M-y H:i:s", //change format also 
   enableTime: true, 
   weekNumbers: true, 
   altInput: true, 
   altFormat: "F j, Y - h:i", 
   time_24hr: true 
});

Your problem will get solved.

Working snippet:-

$(".flatpickrStart, .flatpickrEnd").flatpickr({
  dateFormat: "d-M-y H:i:s",
  enableTime: true,
  weekNumbers: true,
  altInput: true,
  altFormat: "F j, Y - h:i",
  time_24hr: true
});



$(".flatpickrEnd").on("change", function() {
  $("#endValue").text($(this).val());
});
$(".flatpickrStart").on("change", function() {
  $("#startValue").text($(this).val());
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://tarruda.github.io/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.5.1/flatpickr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-6">

      <div class="form-group">
        <label for="StartDate">Start Dato</label>
        <input required="True" class="flatpickrStart form-control " id="absenceStartDate" name="StartDate" type="text" value="">
      </div>
      <div class="form-group">
        <label for="EndDate">Slut Dato</label>
        <input required="True" class="flatpickrEnd form-control" id="absenceEndDate" name="EndDate" type="text" value="">
      </div>
    </div>

    <div class="col-6">
      <h2>Selected values: </h2>
      <p>start: <span id="startValue"></span></p>
      <p>end: <span id="endValue"></span></p>

    </div>
  </div>
</div>

Note: I have changed text outputting code in my link too, check that also.