Issue with jQuery datepicker beforeShow date format

Question

I have intergrated jQuery datepicker, date format I want in the datepicker text box is e.g. "Fri, Aug 4", this is all working.

Problem: When I open the calendar with date ("Fri Aug 4") in the text box , this date gets highlighted in the calendar but the date format in the calendar text box is changed to "08/04/2017".

I always want the date to be shown in my own format in the text box in any context, but that's not happening. I have "onSelect" function which formats the selected date and shows up properly in the text box. The issue is when the calendar opens. Below is my "beforeShow" code. Can someone help me in fixing this?

$("#exercise_date").datepicker({
    beforeShow: function(input, inst) {              
        var objStartDate = new Date( $("#exercise_date").data("selectedDate") );
        var customFormatDateStr = dayName[objStartDate.getDay()]+", "+months[objStartDate.getMonth()]+" "+objStartDate.getDate();
        $("#exercise_date").val( customFormatDateStr );
        $(this).datepicker("setDate", new Date($("#exercise_date").data("selectedDate")));              
    },
    enableOnReadonly: true,
    minDate: new Date( '2017-06-01T08:30:00Z' ),
    maxDate: new Date(),
    autoclose: true,
    hideIfNoPrevNext: true,
    onSelect: function(selectedDate){
        var displayDateObj = new Date( selectedDate );
        var customFormatDateStr = dayName[displayDateObj.getDay()]+", "+months[displayDateObj.getMonth()]+" "+displayDateObj.getDate();
        $("#exercise_date").val(customFormatDateStr);
        $("#exercise_date").data("selectedDate",selectedDate);
    },
    onClose: function(input, inst) {
        var objStartDate = new Date( $(this).data("selectedDate") );
        var customFormatDateStr = dayName[objStartDate.getDay()]+", "+months[objStartDate.getMonth()]+" "+objStartDate.getDate();
        $("#exercise_date").val( customFormatDateStr );
    }
});

Can you replicate this issue in `jsfiddle` / share your full code? — Amal, Aug 10 '17 at 14:47
Here is the jsfiddle https://jsfiddle.net/dhanait15/tp6hvqrv/ — Dhananjay, Aug 11 '17 at 10:01

Amal · Accepted Answer · 2017-08-11T14:58:22.713

Try this code

Add dateFormat option in your code

dateFormat: 'D, M dd'

D : Day
M : Month
dd : Date

$(function(){
var today = "08/11/2017";
var objStartDate = new Date( today );
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var dayName = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
var customFormatDateStr = dayName[objStartDate.getDay()]+", "+months[objStartDate.getMonth()]+" "+objStartDate.getDate();
$("#exercise_date").val( customFormatDateStr );
$("#exercise_date").data("selectedDate",today);
$("#exercise_date").datepicker({
          beforeShow: function(input, inst) {              
              var objStartDate = new Date( $("#exercise_date").data("selectedDate") );
              var customFormatDateStr = dayName[objStartDate.getDay()]+", "+months[objStartDate.getMonth()]+" "+objStartDate.getDate();
              $("#exercise_date").val( customFormatDateStr );
              $(this).datepicker("setDate", new Date($("#exercise_date").data("selectedDate")));              
          },
          enableOnReadonly: true,
          minDate: new Date( '2017-06-01T08:30:00Z' ),
          maxDate: new Date(),
          autoclose: true,
          dateFormat: 'D, M dd',
          hideIfNoPrevNext: true,
          onSelect: function(selectedDate){
            var displayDateObj = new Date( selectedDate );
            var customFormatDateStr = dayName[displayDateObj.getDay()]+", "+months[displayDateObj.getMonth()]+" "+displayDateObj.getDate();
            $("#exercise_date").val(customFormatDateStr);
            $("#exercise_date").data("selectedDate",selectedDate);
          },
          onClose: function(input, inst) {
            var objStartDate = new Date( $(this).data("selectedDate") );
            var customFormatDateStr = dayName[objStartDate.getDay()]+", "+months[objStartDate.getMonth()]+" "+objStartDate.getDate();
            $("#exercise_date").val( customFormatDateStr );
          },
        });
});

$(".ui-datepicker").css("font-size", 13);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/blitzer/jquery-ui.css">
Date : <input id="exercise_date" type="text" data-selectedDate="" />

Thanks for the Reply Amal. I did few more changes when a date is selected, I had to pass the selected date in "mm/dd/yy" format in Ajax call. Here are the lines of code I added — Dhananjay, Aug 14 '17 at 07:33
var selectedDateFromPicker = $('#exercise_date').datepicker('getDate'); var formattedDateStr = $.datepicker.formatDate('mm/dd/yy', selectedDateFromPicker); — Dhananjay, Aug 14 '17 at 07:41
see this https://jsfiddle.net/tp6hvqrv/1/ changed dateFormat.Also you can set date this way `$("#exercise_date").datepicker('setDate', new Date(today));` — Amal, Aug 15 '17 at 04:35

Issue with jQuery datepicker beforeShow date format

1 Answers1