javascript - Get two date formats from jQuery datepicker? - Stack Overflow

admin管理员组

文章数量:1349737

I have a simple datepicker text field:

<input type="text" name="book_on" id="book_on" value="<?php echo $today; ?>"

The jQuery is as follows:

$('#book_on').datepicker({
        dateFormat: 'mm/dd/y'
      });

This is all very straight-forward, but I also need to show the chosen date in a different format elsewhere on the page - specifically, when a date is chosen, I need to show which day of the week it is in a <span> on the page.

This would be dateFormat: 'D' but I can't find a way to get the datepicker to return a second type of date format. I don't need the whole code written, if you could just get the function above to alert the day of the week for the chosen date, that would be great.

I have a simple datepicker text field:

<input type="text" name="book_on" id="book_on" value="<?php echo $today; ?>"

The jQuery is as follows:

$('#book_on').datepicker({
        dateFormat: 'mm/dd/y'
      });

This is all very straight-forward, but I also need to show the chosen date in a different format elsewhere on the page - specifically, when a date is chosen, I need to show which day of the week it is in a <span> on the page.

This would be dateFormat: 'D' but I can't find a way to get the datepicker to return a second type of date format. I don't need the whole code written, if you could just get the function above to alert the day of the week for the chosen date, that would be great.

• javascript
• jquery
• user-interface
• datepicker

Share Improve this question Follow asked May 15, 2012 at 15:59 sveti petarsveti petar 3,7971414 gold badges7777 silver badges158158 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

A little late to the party, but the real solution, I believe, is to make use of the two datepicker properties

    altField: "#your-span",
    altFormat: "D",

Setting these options will automatically fill the element #your-span with the proper format. No extra code needed!

Are you looking for something like this jsFiddle example?

jQuery:

var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
$('#book_on').datepicker({
    dateFormat: 'mm/dd/y',
    onSelect: function(event, ui) {
        var dayOfWeek = $(this).datepicker('getDate').getUTCDay();
        $('#day').val(days[dayOfWeek]);
    }
});​

You can use onSelect event and do the trick like that:

var weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
$("#book_on").datepicker({
    onSelect: function(dateText, inst) {
        var day = new Date(dateText).getDay();
        $("span").text(weekday[day]);
    }
});​

DEMO: http://jsfiddle/LXCMD/

This would be dateFormat: 'D' but I can't find a way to get the datepicker to return a second type of date format.

The Datepicker plugin has a utility function specifically for outputting dates in any format you want, e.g.

var t = $('#picker').datepicker('getDate');
var myDate = $.datepicker.formatDate('D', t);

hence:

$('#book_on').datepicker({
    dateFormat: 'mm/dd/y',
    onSelect: function(dateText, inst) {
        var date = $(this).datepicker('getDate');
        $('#span').text($.datepicker.formatDate('D', date));
    }
});​

本文标签： javascriptGet two date formats from jQuery datepickerStack Overflow