0

I have been trying to format the datepicker so that the date comes out like this:

Jul 23 15

I have been reading this question jQuery UI DatePicker - Change Date Format

But for some reason it is not working for me. I am still learning jQuery so any help on this would be greatly appreciated.

My code is below:

              $('input').datepicker({  
                
                          onSelect: function(dateText, inst) { 
                            var date = $(this).datepicker('getDate'),
                                day  = date.getDate(),  
                                month = date.getMonth() + 1,              
                                year =  date.getFullYear();
                            
                            var parent_div = $(this).closest(".clickable-text");
                            console.log(parent_div);
                            $(".Jquery_day", parent_div).html(day);
                            $(".Jquery_month", parent_div).html(month);
                            $(".Jquery_year", parent_div).html(year); 
                            $(parent_div).addClass("is_selected");   
                            


                        } 
                    });

                    $(window).load(function() {

                    $('input').datepicker();
                    $('input').datepicker("setDate", new Date());

                   var dateFormat = $('input').datepicker({dateFormat: "M-d-y"}).val();

                    });  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Updated snippet of code below:

   $('input.start').datepicker({  

                                onSelect: function(dateText) {
                                  //  alert(dateText);
                                var date = $(this).datepicker('getDate'),
                                day  = date.getDate(),  
                                month = date.getMonth() + 1,              
                                year =  date.getFullYear();


                            var parent_div = $(this).closest(".clickable-text");
                            console.log(parent_div);
                            $(".Jquery_day", parent_div).html(day);
                            $(".Jquery_month", parent_div).html(month);
                            $(".Jquery_year", parent_div).html(year); 
                            $(parent_div).addClass("is_selected"); 

                             },
                                dateFormat: "M d y"
                            });

                         $('input.start').datepicker();
                         $('input.start').datepicker("setDate", new Date());

Please see jsfiddle below. It appears to work kind of okay here for some reason it is adding an extra calendar, it may be something else within my code that is causing the issue. If I am coding something wrong then please do let me know. I am struggling to get back the selected value on the 'Number of Adults' section as well but it seems to be working here.

Demo

chloe_12
  • 3
  • 4

1 Answers1

0

Were you after this?

$('input').datepicker({  

    onSelect: function(date) {
        alert(date);
    },
    dateFormat: "M d y"
});

Following are the allowed formats:

  • Default: "mm/dd/yy"
  • ISO 8601: "yy-mm-dd"
  • Short: "d M, y"
  • Medium: "d MM, y"
  • Full: "DD, d MM, yy"
  • With text: "'day' d 'of' MM 'in the year' yy"

A Demo

lshettyl
  • 8,166
  • 4
  • 25
  • 31
  • Thank you for your help, that has enabled me to progress a little further. Currently, there now seems to be another datepicker that is outputting at the bottom of the page (it is not in relation to the actual booking widget and has no effect on it). – chloe_12 Jul 23 '15 at 11:01
  • That may be due to your selector, as, for now, `datepicker()` would be applied to all `input` elements on your page! May be, add a class to the booking related input, such as `"datepicker-bw"` and then do: `$('input.datepicker-bw').datepicker({.. ` – lshettyl Jul 23 '15 at 11:29
  • Thanks for that. For some reason, I am still having the same issue! I appreciate your help. – chloe_12 Jul 23 '15 at 14:47
  • Edit your question and post the updated code that you have at the moment. – lshettyl Jul 23 '15 at 14:54
  • I need to see your HTML as well, preferably, the code that replicates your issue, in a fiddle. – lshettyl Jul 23 '15 at 15:54
  • Please find demo above. Thank you. – chloe_12 Jul 27 '15 at 09:04
  • Sure, I don't understand what the problem is. I see the date format working correctly. – lshettyl Jul 27 '15 at 09:23
  • I have made some updates to [your fiddle](https://jsfiddle.net/qrxtqeza/1/) as it's too much code for no reason. See if that's what you wanted. – lshettyl Jul 27 '15 at 09:38
  • Thank you for that. For some reason, there is still an extra datepicker showing outside of the widget at the bottom of the page which does not affect the widget at all. Currently trying to figure out why that is happening. Thank you for your help. – chloe_12 Jul 27 '15 at 11:32