Asked  7 Months ago    Answers:  5   Viewed   298 times

I am using jQuery date picker to display the calendar all over my app. I want to know if I can use it to display the month and year (May 2010) and not the calendar?

 Answers

97

Here's a hack (updated with entire .html file):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
    <script type="text/javascript">
        $(function() {
            $('.date-picker').datepicker( {
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'MM yy',
            onClose: function(dateText, inst) { 
                $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
            }
            });
        });
    </script>
    <style>
    .ui-datepicker-calendar {
        display: none;
    }
    </style>
</head>
<body>
    <label for="startDate">Date :</label>
    <input name="startDate" id="startDate" class="date-picker" />
</body>
</html>

EDIT jsfiddle for the above example: http://jsfiddle.net/DBpJe/7755/

EDIT 2 Adds the month year value to input box only on clicking of Done button. Also allows to delete input box values, which isn't possible in above field http://jsfiddle.net/DBpJe/5103/

EDIT 3 updated Better Solution based on rexwolf's solution down.
http://jsfiddle.net/DBpJe/5106

Tuesday, June 1, 2021
 
Muazam
answered 7 Months ago
23
  $(function() {
    $('#datepicker1').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        onClose: function(dateText, inst) { 
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        }
    });
});?

Style should be

.ui-datepicker-calendar {
    display: none;
    }?

working demo

Wednesday, July 21, 2021
 
alioygur
answered 5 Months ago
91

As I tried out and read through the link given by @konrad, I found that its a bug in Jquery UI - even in the latest version of it. The problem got solved as soon as I started using Jquery UI 1.9.2 version

here is the updated fiddle: http://jsfiddle.net/deveshz/YvmFf/2/

with same code:

var zindex = 10; 
$(".item").draggable({
    containment: "body",
    scroll: true,
    revert: function (event, ui) {
        $(this).css("border", "none");
        return !event;
   },
    start: function (event, ui) {
        $(this).css("z-index", zindex++);
        $(this).css("border", "2px solid #333");
    }
});

 $(".stack_items").droppable({
    hoverClass: "over",
    drop: function (event, ui) {
        $("<li class='item'></li>").html(ui.draggable.html()).appendTo(this);
        $(ui.draggable).remove();
    }
});

It uses Jquery version 1.9.2 from http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js

Wednesday, August 25, 2021
 
StampyCode
answered 4 Months ago
69

JQuery datepicker deletes the parent node (the datepicker-head) onclick. After that my event is triggered on the button of the element that already got deleted. So now I am "trapped" in the scope of the deleted element and can only traverse up to the deleted container itself.

To circumvent my original problem I had to filter out all the clickable elements that do not bubble up.

Eg:

$(document).on('click', function(e) {
    if (!$(e.target).hasClass('ui-dialog')) {
        window.XYZ.hideAllDatePickersPseudoMethod();
    }
});

I know that's more some kind of a workaround than a fix for the problem, but it's the only solution I came up with that suits all my needs.

Wednesday, October 20, 2021
 
RLH
answered 2 Months ago
RLH
98

Thanks to your find re jQueryUI version, I was able to work this one out.

The biggest clue is of course the behaviour when a connectWith option is set. I hunted through the jquery.ui.sortable.js file, and found that the problem seemed to be caused in the _contactContainers method, although I could not figure out why.

Knowing that jQuery UI 1.8.24 does work, I compared the sortable file in both. While there appear to be quite a number of differences between the two files even in the _contactContainers method, it seems to come down to a difference in an if-else block. In this case, the older version has a condition (else if(this.currentContainer != this.containers[innermostIndex])) whereas the newer one does not.

At about line 734 in jquery.ui.sortable.js in version 1.9.2, we see an if-else block that begins like this:

// move the item into the container if it's not there already
if(this.containers.length === 1) {
    this.containers[innermostIndex]._trigger("over", event, this._uiHash(this));
    this.containers[innermostIndex].containerCache.over = 1;
} else {
....

Just change it to this:

// move the item into the container if it's not there already
if(this.containers.length === 1) {
    this.containers[innermostIndex]._trigger("over", event, this._uiHash(this));
    this.containers[innermostIndex].containerCache.over = 1;
} else if(this.currentContainer != this.containers[innermostIndex]) {

Adding that condition to the else did the trick for me.

Wednesday, October 20, 2021
 
rblarsen
answered 2 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share