0

I am using jqxDateTimeInput for date time picker. The current date format is in dd/mm/yyyy. I want to change it to dd-MMM-yyyy. Can someone please tell me how to do this?

The following is the jqx code:

<script type="text/javascript">
        $(document).ready(function () {                
            // create jqxcalendar.
            $("#jqxWidget").jqxDateTimeInput({ width: 250, height: 25,  selectionMode: 'range' });
            $("#jqxWidget").on('change', function (event) {
                var selection = $("#jqxWidget").jqxDateTimeInput('getRange');
                if (selection.from != null) {
                    $("#selection").html("<div>From: " + selection.from.toLocaleDateString() + " <br/>To: " + selection.to.toLocaleDateString() + "</div>");
                }
            });

            var date1 = new Date();
            date1.setFullYear(2013, 7, 7);
            var date2 = new Date();
            date2.setFullYear(2013, 7, 15);
            $("#jqxWidget").jqxDateTimeInput('setRange', date1, date2);
        });
    </script>

calling the function:

 <div id='jqxWidget'></div>
 <div style='margin-top: 10px; font-size: 13px; font-family: Verdana;' id='selection'></div>

In the second div where id = selection, I want to display the format as '12-Jan-2013' ie in the format 'dd-MMM-yyyy'

Sumedha Vangury
  • 643
  • 2
  • 17
  • 43

1 Answers1

0

try 

$("#jqxDateTimeInput").jqxDateTimeInput({ width: '300px', height: '25px', formatString: 'dddd-MMMM-yy'});

<div id='jqxDateTimeInput'></div>
aspirant_sensei
  • 1,568
  • 1
  • 16
  • 36
  • this gives the desired o/p in the control but in the selection
    it is still displayed as dd/mm/yyyy
     – Sumedha Vangury May 17 '16 at 10:34
  • are you trying this on the element you are using on page ? I've edited the answer – aspirant_sensei May 17 '16 at 10:44
  • I have edited my question please check. At the moment, when I try your code, the required date format is displayed correctly in the control but not in the
    where 'selection' is called
     – Sumedha Vangury May 17 '16 at 10:59
  • Ah, I see what you mean, you want to format the actual JavaScript Date object. Unfortunately other than specifying locales I don't think there is any built in formatting, so you'll have to be rather manual about it. Refer to the answer given here and let me know if it helps. http://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date – aspirant_sensei May 17 '16 at 11:23