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
– Amal, Commented Aug 10, 2017 at 14:47

Amal · Accepted Answer · 2017-08-11 14:58:22Z

1

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="" />

edited Aug 11, 2017 at 14:58

answered Aug 11, 2017 at 14:42

Amal

3,4261 gold badge14 silver badges21 bronze badges

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

3 Comments

Dhananjay Over a year ago

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 Over a year ago

var selectedDateFromPicker = $('#exercise_date').datepicker('getDate'); var formattedDateStr = $.datepicker.formatDate('mm/dd/yy', selectedDateFromPicker);

Amal Over a year ago

see this jsfiddle.net/tp6hvqrv/1 changed dateFormat.Also you can set date this way $("#exercise_date").datepicker('setDate', new Date(today));

Collectives™ on Stack Overflow

Issue with jQuery datepicker beforeShow date format

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related