Help on display select date in DIV on Modal

[stkol76]

Hi @mikecoj

I hope you can help me .. I need to display the Selected Date of the MC Datepicker into a DIV, and I have tried multiple jQuery and native JavaScript ways to do so, that in my lap works with jQuery datepickers and normal input fields, but fails with the MC Datepicker

i.e

<input type="text" name="EndDate" id="EndDate" style="width: 140px;" class="form-control border-left-0" placeholder="vælg slut dato.." onselect="toggle2()"">

<div id="ConfirmEndDateHolder"></div>

<script>
var SelectEndDate = $('#EndDate');
function EndDatePlaceholder() {
    $("#ConfirmEndDateHolder").html(SelectEndDate.val());
}
</script>

My hope is that the date i.e 17-06-2022 could be displayed as Torsdag d. 17 Juni 2022 (Translated to English : Thursday 17th June 2022)

I hope you can help me out :-)

Best Regards Stig

[ashenshugarRET]

Have you used the dateFormat, customWeekDays, customMonths when you've set the options of your datepicker (see here MCDatepiker Documentation?

You should then be able to use the getFormattedDate() function to set the contents of your div (see here MCDatepicker Documentation.

I hope this helps

[stkol76]

Hi @ashenshugarRET :-)

Great that helps on the format of the output, but my first hurdle is to get it to display in the DIV at all .. can you point me on how to do that? :-)

[ashenshugarRET]

Assuming you declared your datepicker like this: const picker = MCDatepicker.create({ disableWeekends: true });

That is you can call the datepicker with picker, you should then be able to use the following to set the contents of your div to the formatted date: document.getElementById("ConfirmEndDateHolder").value = picker.getFormatedDate();

[ashenshugarRET]

If the above doesn't work try: document.getElementById("ConfirmEndDateHolder").innerHTML = picker.getFormatedDate();

[stkol76]

Thank you for your great help @ashenshugarRET, I have it now working after some playing around with different methods, and the final solution was a combo of your tips and using Moment JS :

$( document ).ready(function() {
  $('#BtnProceed').click(function() {

        var TheEndDate = document.getElementById("ConfirmEndDateHolder").value = EndCalendar.getFullDate();

        m = moment(new Date(TheEndDate)).format("dddd, Do MMMM YYYY");

        $("#ConfirmEndDateHolder").text(m);

  });    
});

[ashenshugarRET]

If your problem is solved, could you close the issue?