복붙노트

[JQUERY] 쇼 달 년 만에 jQuery를 UI DatePicker에서

JQUERY

쇼 달 년 만에 jQuery를 UI DatePicker에서

해결법

  1. 1.여기에 해킹 (전체이 .html 파일로 업데이트가)입니다 :

    여기에 해킹 (전체이 .html 파일로 업데이트가)입니다 :

    <!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>

    편집하다 상기 예 jsfiddle : http://jsfiddle.net/DBpJe/7755/

    EDIT 2 단지 완료 버튼의 클릭에 입력 상자에 달의 연도 값을 추가합니다. 또한, 상기 분야에서 가능하지 않다 입력란 값을 삭제할 수있게 http://jsfiddle.net/DBpJe/5103/

    EDIT 3 업데이트 더 나은 솔루션 rexwolf의 솔루션 아래에 기반. http://jsfiddle.net/DBpJe/5106

  2. 2.이 코드는 나에게 완벽하게 노력하고 있습니다 :

    이 코드는 나에게 완벽하게 노력하고 있습니다 :

    <script type="text/javascript">
$(document).ready(function()
{   
    $(".monthPicker").datepicker({
        dateFormat: 'MM yy',
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,

        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).val($.datepicker.formatDate('MM yy', new Date(year, month, 1)));
        }
    });

    $(".monthPicker").focus(function () {
        $(".ui-datepicker-calendar").hide();
        $("#ui-datepicker-div").position({
            my: "center top",
            at: "center bottom",
            of: $(this)
        });
    });
});
</script>

<label for="month">Month: </label>
<input type="text" id="month" name="month" class="monthPicker" />

    출력은 다음과 같습니다

  3. 3.@ 벤 쾰러, 즉 지사입니다! 더 예상대로 작동 번 이상 날짜 선택의 단일 인스턴스를 사용하도록 나는 약간의 수정을했다. 이 수정없이 날짜가 잘못 해석되고 이전에 선택한 날짜가 강조되지 않습니다.

    @ 벤 쾰러, 즉 지사입니다! 더 예상대로 작동 번 이상 날짜 선택의 단일 인스턴스를 사용하도록 나는 약간의 수정을했다. 이 수정없이 날짜가 잘못 해석되고 이전에 선택한 날짜가 강조되지 않습니다.

    <!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) { 
                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));
            },
            beforeShow : function(input, inst) {
                var datestr;
                if ((datestr = $(this).val()).length > 0) {
                    year = datestr.substring(datestr.length-4, datestr.length);
                    month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNamesShort'));
                    $(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
                    $(this).datepicker('setDate', new Date(year, month, 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>

  4. 4.위의 대답은 꽤 좋다. 내 유일한 불만이 설정되고 나면이 값을 취소 할 수 없다는 것입니다. 또한 나는 연장 - JQuery와 같은-A-플러그인 방식을 선호합니다.

    위의 대답은 꽤 좋다. 내 유일한 불만이 설정되고 나면이 값을 취소 할 수 없다는 것입니다. 또한 나는 연장 - JQuery와 같은-A-플러그인 방식을 선호합니다.

    이것은 나를 위해 완벽하게 작동합니다 :

    $.fn.monthYearPicker = function(options) {
    options = $.extend({
        dateFormat: "MM yy",
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        showAnim: ""
    }, options);
    function hideDaysFromCalendar() {
        var thisCalendar = $(this);
        $('.ui-datepicker-calendar').detach();
        // Also fix the click event on the Done button.
        $('.ui-datepicker-close').unbind("click").click(function() {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            thisCalendar.datepicker('setDate', new Date(year, month, 1));
        });
    }
    $(this).datepicker(options).focus(hideDaysFromCalendar);
}

    다음과 같이 호출 :

    $('input.monthYearPicker').monthYearPicker();

  5. 5.

    <style>
.ui-datepicker table{
    display: none;
}


    <script type="text/javascript">
$(function() {
    $( "#manad" ).datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'yy-mm',
        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));
        },
        beforeShow : function(input, inst) {
            if ((datestr = $(this).val()).length > 0) {
                actDate = datestr.split('-');
                year = actDate[0];
                month = actDate[1]-1;
                $(this).datepicker('option', 'defaultDate', new Date(year, month));
                $(this).datepicker('setDate', new Date(year, month));
            }
        }
    });
});

    이 = 문제를 해결할 것입니다)하지만 난에 timeformat YYYY-MM를 원

    만하지만 FF4에 노력

  6. 6.오늘은이 같은 요구를했고, github에에 ​​발견, jQueryUI 작동하며 달력의 일의 자리에 달 선택기를 가지고

    오늘은이 같은 요구를했고, github에에 ​​발견, jQueryUI 작동하며 달력의 일의 자리에 달 선택기를 가지고

    https://github.com/thebrowser/jquery.ui.monthpicker

  7. 7.여기에 내가 무엇을 최대 온입니다. 그것은 여분의 스타일 블록을 필요없이 일정을 숨 깁니다하고 입력을 클릭하면 값을 취소 할 수없는 문제를 다루는 명확한 버튼을 추가합니다. 또한 같은 페이지에 여러 monthpickers와 함께 잘 작동합니다.

    여기에 내가 무엇을 최대 온입니다. 그것은 여분의 스타일 블록을 필요없이 일정을 숨 깁니다하고 입력을 클릭하면 값을 취소 할 수없는 문제를 다루는 명확한 버튼을 추가합니다. 또한 같은 페이지에 여러 monthpickers와 함께 잘 작동합니다.

    HTML :

    <input type='text' class='monthpicker'>

    자바 스크립트 :

    $(".monthpicker").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: "yy-mm",
    showButtonPanel: true,
    currentText: "This Month",
    onChangeMonthYear: function (year, month, inst) {
        $(this).val($.datepicker.formatDate('yy-mm', new Date(year, month - 1, 1)));
    },
    onClose: function(dateText, inst) {
        var month = $(".ui-datepicker-month :selected").val();
        var year = $(".ui-datepicker-year :selected").val();
        $(this).val($.datepicker.formatDate('yy-mm', new Date(year, month, 1)));
    }
}).focus(function () {
    $(".ui-datepicker-calendar").hide();
}).after(
    $("<a href='javascript: void(0);'>clear</a>").click(function() {
        $(this).prev().val('');
    })
);

  8. 8.또 하나 개의 간단한 솔루션을 추가

    또 하나 개의 간단한 솔루션을 추가

     $(function() {
    $('.monthYearPicker').datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'M yy'
    }).focus(function() {
        var thisCalendar = $(this);
        $('.ui-datepicker-calendar').detach();
        $('.ui-datepicker-close').click(function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
        });
    });
});

    http://jsfiddle.net/tmnasim/JLydp/ 풍모:

  9. 9.나는 (로) 두 필드의 월 / 년 선택기를 필요로 하나가 선택 될 때 최대 / 최소는 다른 하나 ... 라 따기 항공권 날짜에 설정되었다. 나는 최대와 최소를 설정 문제가되었다 ... 다른 필드의 날짜가 지워받을 것입니다. 위 게시물의 몇 덕분에 ... 나는 마침내 그것을 알아 냈다. 당신은 매우 특정 순서로 옵션과 날짜를 설정해야합니다.

    나는 (로) 두 필드의 월 / 년 선택기를 필요로 하나가 선택 될 때 최대 / 최소는 다른 하나 ... 라 따기 항공권 날짜에 설정되었다. 나는 최대와 최소를 설정 문제가되었다 ... 다른 필드의 날짜가 지워받을 것입니다. 위 게시물의 몇 덕분에 ... 나는 마침내 그것을 알아 냈다. 당신은 매우 특정 순서로 옵션과 날짜를 설정해야합니다.

    월 / 년 선택기 @ JSFiddle : 전체 솔루션이 바이올린을 참조하십시오

    암호:

    var searchMinDate = "-2y";
var searchMaxDate = "-1m";
if ((new Date()).getDate() <= 5) {
    searchMaxDate = "-2m";
}
$("#txtFrom").datepicker({
    dateFormat: "M yy",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    showAnim: "",
    minDate: searchMinDate,
    maxDate: searchMaxDate,
    showButtonPanel: true,
    beforeShow: function (input, inst) {
        if ((datestr = $("#txtFrom").val()).length > 0) {
            var year = datestr.substring(datestr.length - 4, datestr.length);
            var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), "#txtFrom").datepicker('option', 'monthNamesShort'));
        $("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1));
                $("#txtFrom").datepicker('setDate', new Date(year, month, 1));
            }
        },
        onClose: function (input, inst) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1));
            $("#txtFrom").datepicker('setDate', new Date(year, month, 1));
            var to = $("#txtTo").val();
            $("#txtTo").datepicker('option', 'minDate', new Date(year, month, 1));
            if (to.length > 0) {
                var toyear = to.substring(to.length - 4, to.length);
                var tomonth = jQuery.inArray(to.substring(0, to.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort'));
                $("#txtTo").datepicker('option', 'defaultDate', new Date(toyear, tomonth, 1));
                $("#txtTo").datepicker('setDate', new Date(toyear, tomonth, 1));
            }
        }
    });
    $("#txtTo").datepicker({
        dateFormat: "M yy",
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        showAnim: "",
        minDate: searchMinDate,
        maxDate: searchMaxDate,
        showButtonPanel: true,
        beforeShow: function (input, inst) {
            if ((datestr = $("#txtTo").val()).length > 0) {
                var year = datestr.substring(datestr.length - 4, datestr.length);
                var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort'));
                $("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1));
                $("#txtTo").datepicker('setDate', new Date(year, month, 1));
            }
        },
        onClose: function (input, inst) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1));
            $("#txtTo").datepicker('setDate', new Date(year, month, 1));
            var from = $("#txtFrom").val();
            $("#txtFrom").datepicker('option', 'maxDate', new Date(year, month, 1));
            if (from.length > 0) {
                var fryear = from.substring(from.length - 4, from.length);
                var frmonth = jQuery.inArray(from.substring(0, from.length - 5), $("#txtFrom").datepicker('option', 'monthNamesShort'));
                $("#txtFrom").datepicker('option', 'defaultDate', new Date(fryear, frmonth, 1));
                $("#txtFrom").datepicker('setDate', new Date(fryear, frmonth, 1));
            }

        }
    });

    위에서 언급 한 바와 같이 또한 스타일 블록이 추가 :

    .ui-datepicker-calendar { display: none !important; }

  10. 10.나는 좋은 답변 위의 많은 결합이에 도착 :

    나는 좋은 답변 위의 많은 결합이에 도착 :

        $('#payCardExpireDate').datepicker(
            {
                dateFormat: "mm/yy",
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                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)).trigger('change');
                },
                beforeShow : function(input, inst) {
                    if ((datestr = $(this).val()).length > 0) {
                        year = datestr.substring(datestr.length-4, datestr.length);
                        month = datestr.substring(0, 2);
                        $(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
                        $(this).datepicker('setDate', new Date(year, month-1, 1));
                    }
                }
            }).focus(function () {
                $(".ui-datepicker-calendar").hide();
                $("#ui-datepicker-div").position({
                    my: "center top",
                    at: "center bottom",
                    of: $(this)
                });
            });

    내가 날짜 선택기의 여러 곳에서 패치 강제 그래서 이것은 작동하지만, 많은 버그에 직면 증명 :

    if($.datepicker._get(inst, "dateFormat") === "mm/yy")
{
    $(".ui-datepicker-calendar").hide();
}

    showDatepicker에서 : PATCH1은 숨기기를 부드럽게;

    PATCH2 : _checkOffset에서 : 올바른 개월 선택기 위치 (필드 브라우저의 하단에 달리하면 오프셋 체크 해제)하는 단계;

    patch3 : _hideDatepicker의으로 onClose에서 : 매우 짜증나는 매우 짧은 기간 동안 깜박 날짜 필드를 폐쇄 그렇지 않으면 때.

    나는 내 수정이 좋은에서 멀리이었다 알고 있지만 지금은 일하고있어. 희망이 도움이.

  11. 11.한 달 선택기를 찾고 있다면이 jquery.mtz.monthpicker 시도

    한 달 선택기를 찾고 있다면이 jquery.mtz.monthpicker 시도

    이것은 잘 날 위해 일했습니다.

    options = {
    pattern: 'yyyy-mm', // Default is 'mm/yyyy' and separator char is not mandatory
    selectedYear: 2010,
    startYear: 2008,
    finalYear: 2012,
    monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};

$('#custom_widget').monthpicker(options);

  12. 12.다른 많은 사람들처럼, 나는 그것이 완벽하게 많은이 일을하려고 문제점 및 게시 된 솔루션의 조합, 결국 큰 해킹가 발생했습니다 나에게 솔루션을 착륙했습니다.

    다른 많은 사람들처럼, 나는 그것이 완벽하게 많은이 일을하려고 문제점 및 게시 된 솔루션의 조합, 결국 큰 해킹가 발생했습니다 나에게 솔루션을 착륙했습니다.

    내가 시도한 것을이 스레드에서 다른 솔루션과 문제 :

    나는 마지막으로이 모든 문제를 해결하는 방법을 발견했습니다. 처음 네는 자신의 내부 코드에 날짜 - 및 monthpickers을 참조하는 방법에 대한 조심하는 것만으로 고정, 물론 당신의 선택 도구의 일부 수동 업데이트를 수행 할 수 있습니다. 이것은 당신은 아래쪽에 인스턴스화-예에서 볼 수 있습니다. 다섯 번째 문제는 날짜 선택기 함수에 일부 사용자 지정 코드를 추가하여 도움이 될 수 있습니다.

    참고 : 일반 날짜 선택기의 첫 번째 세 가지 문제를 해결하기 위해 다음과 같은 monthpicker 스크립트를 사용할 필요가 없습니다. 간단하게이 게시물의 하단 근처 날짜 선택기 인스턴스화 스크립트를 사용합니다.

    이제 monthpickers를 사용하고 마지막 문제를 수선하기 위해, 우리는 datepickers과 monthpickers를 분리해야합니다. 우리는 거기 몇 jQuery를-UI의 monthpicker의 애드온 중 하나지만, 일부 부족 현지화 유연성 / 능력, 일부 부족 애니메이션 지원을받을 수 있습니다 .. 그래서, 무엇을? 날짜 선택기 코드에서 "자신을"롤! 이것은 단지 일의 표시없이 날짜 선택기의 모든 기능과 함께, 당신에게 완벽하게 작동 monthpicker을 가져옵니다.

    I는 방법 JQuery와 UI-의 v1.11.1 코드 후술 사용하여 monthpicker의 JS 스크립트 첨부 CSS 스크립트를 공급했다. 간단하게 각각 두 개의 새로운 파일, monthpicker.js 및 monthpicker.css에이 코드 조각을 복사합니다.

    당신은 내가 monthpicker에 날짜 선택기를 변환하는 다소 단순한 과정에 대해 읽으려면, 마지막 섹션으로 스크롤합니다.

    이 다음과 같은 자바 스크립트 코드 조각은 상기 문제없이 페이지에 여러 datepickers 및 / 또는 monthpickers와 함께 작동! 사용하여 일반적으로 고정 '$ (이).' 많이 :)

    첫 번째 스크립트는 일반적인 날짜 선택기를 위해, 그리고 두 번째는 "새로운"monthpickers입니다.

    당신이 입력 필드를 지우려면 몇 가지 요소를 생성 할 수있는 아웃 주석 후론은, 폴 리차드 '대답에서 도난됩니다.

    내 monthpicker에서 "MM 전년 동기 대비"형식을 사용하고, 당신은 당신이 원하는 중 하나를 무료로 사용할 수 있도록 'YY-MM-DD'내 날짜 선택기에서 형식 만이 모든 형식과 완전히 호환됩니다. 단순히 'dateFormat는'옵션을 변경합니다. 표준 옵션 'showButtonPanel', 'showAnim'및 'yearRange은'당신의 소원을 물론 옵션 및 사용자 정의의이다.

    날짜 선택기 인스턴스화. 이것은 90 년 전 그리고 현재까지 간다. 그것은 당신이 defaultDate, minDate 및 maxDate 옵션을 설정 특히, 정확한 입력 필드를 유지하는 데 도움이,하지만 그렇게하지 않으면 그것을 처리 할 수 ​​있습니다. 그것은 당신이 선택하는 어떤 dateFormat는 작동합니다.

            $('#MyDateTextBox').datepicker({
            dateFormat: 'yy-mm-dd',
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            showMonthAfterYear: true,
            showWeek: true,
            showAnim: "drop",
            constrainInput: true,
            yearRange: "-90:",
            minDate: new Date((new Date().getFullYear() - 90), new Date().getMonth(), new Date().getDate()),
            maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
            defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),

            onClose: function (dateText, inst) {
                // When onClose is called after we have clicked a day (and not clicked 'Close' or outside the datepicker), the input-field is automatically
                // updated with a valid date-string. They will always pass, because minDate and maxDate are already enforced by the datepicker UI.
                // This try is to catch and handle the situations, where you open the datepicker, and manually type in an invalid date in the field,
                // and then close the datepicker by clicking outside the datepicker, or click 'Close', in which case no validation takes place.
                try {
                    // If datepicker can parse the date using our formatstring, the instance will automatically parse
                    // and apply it for us (after the onClose is done).
                    // If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch.
                    // If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null!
                    var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());

                    // typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to
                    // reset to the last set default date.
                    // You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;'
                    if (typedDate == null)throw "No date selected";

                    // We do a manual check to see if the date is within minDate and maxDate, if they are defined.
                    // If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
                    var minDate = $(this).datepicker("option", "minDate");
                    var maxDate = $(this).datepicker("option", "maxDate");
                    if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
                    if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";

                    // We update the default date, because the date seems valid.
                    // We do not need to manually update the input-field, as datepicker has already done this automatically.
                    $(this).datepicker('option', 'defaultDate', typedDate);
                }
                catch (err) {
                    console.log("onClose: " + err);
                    // Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
                    // a new valid date, by clicking on a day.
                    // Instead, we set the current date, as well as the value of the input-field, to the last selected (and
                    // accepted/validated) date from the datepicker, by getting its default date. This only works, because
                    // we manually change the default date of the datepicker whenever a new date is selected, in both 'beforeShow'
                    // and 'onClose'.
                    var date = $(this).datepicker('option', 'defaultDate');
                    $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
                    $(this).datepicker('setDate', date);
                }
            },

            beforeShow: function (input, inst) {
                // beforeShow is particularly irritating when initializing the input-field with a date-string.
                // The date-string will be parsed, and used to set the currently selected date in the datepicker.
                // BUT, if it is outside the scope of the minDate and maxDate, the text in the input-field is not
                // automatically updated, only the internal selected date, until you choose a new date (or, because
                // of our onClose function, whenever you click close or click outside the datepicker).
                // We want the input-field to always show the date that is currently chosen in our datepicker,
                // so we do some checks to see if it needs updating. This may not catch ALL cases, but these are
                // the primary ones: invalid date-format; date is too early; date is too late.
                try {
                    // If datepicker can parse the date using our formatstring, the instance will automatically parse
                    // and apply it for us (after the onClose is done).
                    // If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch.
                    // If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null!
                    var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());

                    // typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to
                    // reset to the last set default date.
                    // You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;'
                    if (typedDate == null)throw "No date selected";

                    // We do a manual check to see if the date is within minDate and maxDate, if they are defined.
                    // If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
                    var minDate = $(this).datepicker("option", "minDate");
                    var maxDate = $(this).datepicker("option", "maxDate");
                    if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
                    if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";

                    // We update the input-field, and the default date, because the date seems valid.
                    // We also manually update the input-field, as datepicker does not automatically do this when opened.
                    $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), typedDate));
                    $(this).datepicker('option', 'defaultDate', typedDate);
                }
                catch (err) {
                    // Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
                    // a new valid date, by clicking on a day.
                    // We want the same behavior when opening the datepicker, so we set the current date, as well as the value
                    // of the input-field, to the last selected (and accepted/validated) date from the datepicker, by getting
                    // its default date. This only works, because we manually change the default date of the datepicker whenever
                    // a new date is selected, in both 'beforeShow' and 'onClose', AND have a default date set in the datepicker options.
                    var date = $(this).datepicker('option', 'defaultDate');
                    $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
                    $(this).datepicker('setDate', date);
                }
            }
        })
    //.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it
    //    $("<a href='javascript: void(0);'>clear</a>").click(function() {
    //        $(this).prev().val('');
    //    })
    //)
    ;

    monthpicker.js 파일과 당신이 monthpickers를 사용할 페이지에서 monthpicker.css 파일을 포함합니다.

    Monthpicker 인스턴스화 이 monthpicker에서 검색 값은 항상 선택한 달의 첫 날입니다. 현재 월에 시작, 100 년 전 범위와 미래에 십년.

        $('#MyMonthTextBox').monthpicker({
        dateFormat: 'MM yy',
        changeMonth: true,
        changeYear: true,
        showMonthAfterYear: true,
        showAnim: "drop",
        constrainInput: true,
        yearRange: "-100Y:+10Y",
        minDate: new Date(new Date().getFullYear() - 100, new Date().getMonth(), 1),
        maxDate: new Date((new Date().getFullYear() + 10), new Date().getMonth(), 1),
        defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),

        // Monthpicker functions
        onClose: function (dateText, inst) {
            var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
            $(this).monthpicker('option', 'defaultDate', date);
            $(this).monthpicker('setDate', date);
        },

        beforeShow: function (input, inst) {
            if ($(this).monthpicker("getDate") !== null) {
                // Making sure that the date set is the first of the month.
                if($(this).monthpicker("getDate").getDate() !== 1){
                    var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
                    $(this).monthpicker('option', 'defaultDate', date);
                    $(this).monthpicker('setDate', date);
                }
            } else {
                // If the date is null, we reset it to the defaultDate. Make sure that the defaultDate is always set to the first of the month!
                $(this).monthpicker('setDate', $(this).monthpicker('option', 'defaultDate'));
            }
        },
        // Special monthpicker function!
        onChangeMonthYear: function (year, month, inst) {
            $(this).val($.monthpicker.formatDate($(this).monthpicker('option', 'dateFormat'), new Date(year, month - 1, 1)));
        }
    })
    //.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it
    //    $("<a href='javascript: void(0);'>clear</a>").click(function() {
    //        $(this).prev().val('');
    //    })
    //)
    ;

    즉입니다! 즉 당신이 monthpicker을 만들 필요가 전부입니다.

    나는이와 jsfiddle 작업을 할 수없는 것,하지만 내 ASP.NET MVC 프로젝트에 나를 위해 노력하고 있습니다. 그냥 당신이 일반적으로 가능성이 뭔가 선택기 ($를 의미한다 ( "#의 MyMonthTextBox을")) 변경하여, 위의 스크립트를 페이지에 날짜 선택기를 추가하고 통합하기 위해 무엇을 할 당신을 위해 작동하는지.

    나는이 사람을 도움이되기를 바랍니다.

    나는 그들의 날짜 선택기에 관한 JQuery와-UI-1.11.1.js에서 모든 자바 스크립트 코드를 가지고 새로운 JS-파일로 붙여, 다음과 같은 문자열을 교체했습니다 :

    그 때 나는 전체의 UI 날짜 선택기 캘린더의 DIV (다른 솔루션은 CSS를 사용하여 숨기기 사업부를) 생성을위한 루프의 일부를 제거했습니다. 이것은 _generateHTML에서 찾을 수 있습니다 기능 (INST).

    라는 줄을 찾습니다 :

    "</div><table class='ui-datepicker-calendar'><thead>" +

    그것이 말하는 어디 라인을 (포함되지 않음)에 닫는 DIV 태그 후에서 아래 마크 모든 :

    drawMonth++;

    우리는 몇 가지를 닫해야하기 때문에 지금은 불행 수 있습니다. 이전에서 해당 닫는 DIV 태그 한 후, 이것을 추가 :

    ";

    이제 코드 좋게 함께 재봉선해야합니다. 여기에 당신이 결국 한해야하는지 보여주는 코드 조각입니다 :

    ...other code...

calender += "<div class='ui-monthpicker-header ui-widget-header ui-helper-clearfix" + cornerClass + "'>" +
                (/all|left/.test(cornerClass) && row === 0 ? (isRTL ? next : prev) : "") +
                (/all|right/.test(cornerClass) && row === 0 ? (isRTL ? prev : next) : "") +
                this._generateMonthYearHeader(inst, drawMonth, drawYear, minDate, maxDate,
                    row > 0 || col > 0, monthNames, monthNamesShort) + // draw month headers
                "</div>";
            drawMonth++;
            if (drawMonth > 11) {
                drawMonth = 0;
                drawYear++;
            }

...other code...

    그리고 나는 새로운 CSS 파일에 datepickers에 관한 JQuery와 - ui.css의 코드를 붙여 넣기 / 복사, 다음과 같은 문자열을 대체 :

  13. 13.날짜 선택기에 대한 jQueryUI.com을 파고 후, 여기에 귀하의 질문에 대한 내 결론과 대답입니다.

    날짜 선택기에 대한 jQueryUI.com을 파고 후, 여기에 귀하의 질문에 대한 내 결론과 대답입니다.

    첫째, 나는 귀하의 질문에 아무 말을하지 않을 것이다. 당신은 한 달 만 년을 따기 jQueryUI의 날짜 선택기를 사용할 수 없습니다. 이 지원되지 않습니다. 그것은 그에 대한 콜백 함수가 없습니다.

    그러나 당신은, 일 등을 숨기기 위해 CSS를 사용하여 단지 달과 연도 표시 해킹 할 수 그리고 난 당신이 날짜를 선택하기 위해 클릭 할 날짜를 필요로 원인 여전히 이해가되지 것이라 생각합니다.

    난 당신이 또 다른 날짜 선택기를 사용할 필요가 말할 수 있습니다. 무엇처럼 로저 제안했다.

  14. 14.이 작동하지 않는 그것은 그냥 날 또는 (8) IE에서 예상대로? 완료 클릭하면 날짜는 변경되지만 실제로 입력 필드에 느슨한 초점 페이지의 어딘가에 클릭 할 때까지 날짜 선택기 다시 열어 ...

    이 작동하지 않는 그것은 그냥 날 또는 (8) IE에서 예상대로? 완료 클릭하면 날짜는 변경되지만 실제로 입력 필드에 느슨한 초점 페이지의 어딘가에 클릭 할 때까지 날짜 선택기 다시 열어 ...

    나는이 문제를 해결에 찾고 있어요.

    <!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) { 
            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));
        }
    });
});
</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>

  15. 15.나는 달 선택기와 혼합 날짜 선택의 문제가 있었다. 나는 그런 식으로 그것을 해결.

    나는 달 선택기와 혼합 날짜 선택의 문제가 있었다. 나는 그런 식으로 그것을 해결.

        $('.monthpicker').focus(function()
    {
    $(".ui-datepicker-calendar").show();
    }).datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM/yy',
        create: function (input, inst) { 

         },
        onClose: function(dateText, inst) { 
            var month = 1+parseInt($("#ui-datepicker-div .ui-datepicker-month :selected").val());           
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();

        }
    });

  16. 16.사람이 여러 개의 캘린더를 위해 또한 원하는 경우 매우 어려운 일이 아니다 JQuery와 UI를이 functionallity을 추가합니다. 에 대한 축소 된 검색과 :

    사람이 여러 개의 캘린더를 위해 또한 원하는 경우 매우 어려운 일이 아니다 JQuery와 UI를이 functionallity을 추가합니다. 에 대한 축소 된 검색과 :

    x+='<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix'+t+'">'+(/all|left/.test(t)&&C==0?c?f:n:"")+(

    (X) 앞이 추가

    var accl = ''; if(this._get(a,"justMonth")) {accl = ' ui-datepicker-just_month';}

    검색

    <table class="ui-datepicker-calendar

    와로 교체

    <table class="ui-datepicker-calendar'+accl+'

    또한 검색

    this._defaults={

    로 교체

    this._defaults={justMonth:false,

    CSS를 위해 당신은 사용해야합니다 :

    .ui-datepicker table.ui-datepicker-just_month{
    display: none;
}

    모두가 이루어집니다 후에 당신의 원하는 날짜 선택기 초기화 기능으로 이동하여 설정 VAR을 제공

    $('#txt_month_chart_view').datepicker({
    changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        justMonth: true,
        create: function(input, inst) {
            $(".ui-datepicker table").addClass("badbad");
        },
        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));
        }
});

    justMonth : 진정한 열쇠는 여기에 :)

  17. 17.내가 허용 대답으로 어떤 어려움을 했어 다른 하나의 거점으로 최소의 노력으로 사용되지 수 있습니다. 그래서, 최소 JS 코딩 적어도 그것을 만족 / 재사용 표준까지 허용 대답의 최신 버전을 조정할하기로 결정했다.

    내가 허용 대답으로 어떤 어려움을 했어 다른 하나의 거점으로 최소의 노력으로 사용되지 수 있습니다. 그래서, 최소 JS 코딩 적어도 그것을 만족 / 재사용 표준까지 허용 대답의 최신 버전을 조정할하기로 결정했다.

    여기에 벤 쾰러의 허용 대답의 3 (최신) 버전보다 방법이 훨씬 청소기 솔루션입니다. 또한, 그것은 것입니다 :

    확인 해봐:

    $('.date-picker').datepicker({
    dateFormat: 'MM yy',
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    onClose: function (dateText, inst) {
        var isDonePressed = inst.dpDiv.find('.ui-datepicker-close').hasClass('ui-state-hover');
        if (!isDonePressed)
            return;

        var month = inst.dpDiv.find('.ui-datepicker-month').find(':selected').val(),
            year = inst.dpDiv.find('.ui-datepicker-year').find(':selected').val();

        $(this).datepicker('setDate', new Date(year, month, 1)).change();
        $('.date-picker').focusout();
    },
    beforeShow: function (input, inst) {
        var $this = $(this),
            // For the simplicity we suppose the dateFormat will be always without the day part, so we
            // manually add it since the $.datepicker.parseDate will throw if the date string doesn't contain the day part
            dateFormat = 'd ' + $this.datepicker('option', 'dateFormat'),
            date;

        try {
            date = $.datepicker.parseDate(dateFormat, '1 ' + $this.val());
        } catch (ex) {
            return;
        }

        $this.datepicker('option', 'defaultDate', date);
        $this.datepicker('setDate', date);

        inst.dpDiv.addClass('datepicker-month-year');
    }
});

    그리고 당신이 필요로하는 다른 모든 주위에 다음과 같은 CSS의 어딘가입니다 :

    .datepicker-month-year .ui-datepicker-calendar {
    display: none;
}

    이게 다예요. 위의 더 독자에 대한 약간의 시간을 절약 할 수 있기를 바랍니다.

  18. 18.이건 어떤가요: http://www.mattkruse.com/javascript/calendarpopup/

    이건 어떤가요: http://www.mattkruse.com/javascript/calendarpopup/

    월 - 선택 예를 선택합니다

  19. 19.브라이언에 대한 개선의 몇 위의 거의 완벽한 응답입니다 제작 :

    브라이언에 대한 개선의 몇 위의 거의 완벽한 응답입니다 제작 :

    편집 : - 현장을 취소하고 멀리 클릭하고 선택한 날짜를 다시 채 웁니다이 함께 해결하기 위해 남은 한 가지 문제는 거기에 날짜 선택기를 비울 수있는 방법 없다는 것입니다.

    누구든지 할 수있는 경우 - https://github.com/thebrowser/jquery.ui.monthpicker : EDIT2 : 나는 정중하게이 문제를 해결하기 위해 관리하지 않은 (즉, 입력 옆에 별도의 지우기 버튼을 추가하지 않고), 그래서 그냥이를 사용하여 종료 놀라운 것을 할 수있는 표준 UI의 하나를 얻을.

        $('.typeof__monthpicker').datepicker({
        dateFormat: 'mm/yy',
        showButtonPanel:true,
        beforeShow: 
            function(input, dpicker)
            {                           
                if(/^(\d\d)\/(\d\d\d\d)$/.exec($(this).val()))
                {
                    var d = new Date(RegExp.$2, parseInt(RegExp.$1, 10) - 1, 1);

                    $(this).datepicker('option', 'defaultDate', d);
                    $(this).datepicker('setDate', d);
                }

                $('#ui-datepicker-div').addClass('month_only');
            },
        onClose: 
            function(dt, dpicker)
            {
                setTimeout(function() { $('#ui-datepicker-div').removeClass('month_only') }, 250);

                var m = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                var y = $("#ui-datepicker-div .ui-datepicker-year :selected").val();

                $(this).datepicker('setDate', new Date(y, m, 1));
            }
    });

    또한이 스타일 규칙이 필요합니다 :

    #ui-datepicker-div.month_only .ui-datepicker-calendar {
display:none
}

  20. 20.나는 @의 user1857829 응답 및 그의 "연장 - JQuery와 같은-A-플러그인 방식"을 좋아했다. 난 그냥 그래서 당신은 어떤 식 으로든 월 또는 연도 변경하면 피커가 실제로 필드에 날짜를 기록하는 litte 수정했다. 나는 그것을 조금 사용 후 그 행동을하고 싶은 것을 발견했다.

    나는 @의 user1857829 응답 및 그의 "연장 - JQuery와 같은-A-플러그인 방식"을 좋아했다. 난 그냥 그래서 당신은 어떤 식 으로든 월 또는 연도 변경하면 피커가 실제로 필드에 날짜를 기록하는 litte 수정했다. 나는 그것을 조금 사용 후 그 행동을하고 싶은 것을 발견했다.

    jQuery.fn.monthYearPicker = function(options) {
  options = $.extend({
    dateFormat: "mm/yy",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    showAnim: "",
    onChangeMonthYear: writeSelectedDate
  }, options);
  function writeSelectedDate(year, month, inst ){
   var thisFormat = jQuery(this).datepicker("option", "dateFormat");
   var d = jQuery.datepicker.formatDate(thisFormat, new Date(year, month-1, 1));
   inst.input.val(d);
  }
  function hideDaysFromCalendar() {
    var thisCalendar = $(this);
    jQuery('.ui-datepicker-calendar').detach();
    // Also fix the click event on the Done button.
    jQuery('.ui-datepicker-close').unbind("click").click(function() {
      var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      thisCalendar.datepicker('setDate', new Date(year, month, 1));
      thisCalendar.datepicker("hide");
    });
  }
  jQuery(this).datepicker(options).focus(hideDaysFromCalendar);
}

  21. 21.나는 조금 늦게 응답 알고,하지만 난 전에 같은 문제를 며칠 있고 난 좋은 및 솔루션을 원활와 함께했다. 우선 여기이 위대한 날짜 선택 발견

    나는 조금 늦게 응답 알고,하지만 난 전에 같은 문제를 며칠 있고 난 좋은 및 솔루션을 원활와 함께했다. 우선 여기이 위대한 날짜 선택 발견

    그럼 난 그냥이 같은 예와 함께 제공되는 CSS 클래스 (jquery.calendarPicker.css)를 업데이트했습니다 :

    .calMonth {
  /*border-bottom: 1px dashed #666;
  padding-bottom: 5px;
  margin-bottom: 5px;*/
}

.calDay 
{
    display:none;
}

    이 문제가되지 않도록 플러그인을 사용하면 하루에 클릭되지 않습니다, 당신은 아무것도 변경 이벤트 DateChanged를 발생 (그리고 그것은 연도와 월 선택기로 좋은 적합)

    희망이 도움이!

  22. 22.또한 한 달에 선택기를 필요로했다. 나는 간단한 헤더 년 한 아래 사개월의 3 개 행을했다. 그것을 체크 아웃 : jQuery로 간단한 monthyear 선택기.

    또한 한 달에 선택기를 필요로했다. 나는 간단한 헤더 년 한 아래 사개월의 3 개 행을했다. 그것을 체크 아웃 : jQuery로 간단한 monthyear 선택기.

  23. 23.여기에서 제공하는 다양한 솔루션을 시도하고 당신은 단순히 드롭 다운의 몇 가지를 원한다면 그들은 벌금을했다.

    여기에서 제공하는 다양한 솔루션을 시도하고 당신은 단순히 드롭 다운의 몇 가지를 원한다면 그들은 벌금을했다.

    여기 제안 '피커'(https://github.com/thebrowser/jquery.ui.monthpicker) (외관 등의) 가장 기본적으로 재작 _generateHTML와 JQuery와 - UI 날짜 선택기가 이전 버전의 복사본입니다. 그러나, 나는 (닫지 ESC에 닫지 다른 위젯 개방에, 스타일을 하드 코딩했다 않습니다 않음)이 더 이상 현재 JQuery와 - UI (1.10.2)와 함께 잘 재생 발견 및 기타 문제가 있었다.

    오히려 그 monthpicker를 해결하고보다는 최신 날짜 선택기와 동일한 프로세스를 다시 시도하는 시도보다, 나는 기존의 날짜 선택의 관련 부분에 후크와 함께 갔다.

    이 오버라이드 (override) 포함 :

    이 질문은 조금 오래되고 이미 잘 대답이기 때문에, 여기에이 작업을 수행 한 방법을 보여 할 _selectDay 오버라이드 만입니다 :

    jQuery.datepicker._base_parseDate = jQuery.datepicker._base_parseDate || jQuery.datepicker.parseDate;
jQuery.datepicker.parseDate = function (format, value, settings) {
    if (format != "M y") return jQuery.datepicker._hvnbase_parseDate(format, value, settings);
    // "M y" on parse gives error as doesn't have a day value, so 'hack' it by simply adding a day component
    return jQuery.datepicker._hvnbase_parseDate("d " + format, "1 " + value, settings);
};

    언급 한 바와 같이, 이것은 오래된 질문이지만, 나는 그것이 유용 그래서 alterantive 솔루션으로 피드백을 추가하고 싶었 발견했다.

  24. 24.JQuery와 V 1.7.2을 사용하여 monthpicker,, 난 그냥하고있는 다음의 자바 스크립트를

    JQuery와 V 1.7.2을 사용하여 monthpicker,, 난 그냥하고있는 다음의 자바 스크립트를

    $ L ( "[ID = $ txtDtPicker]"). monthpicker ({ showOn : "모두", buttonImage : "../../images/Calendar.png" buttonImageOnly : 사실, 패턴 'YYYYMM', // 기본값 'mm / YYYY'이고 구분 문자는 필수 아니다 의 MonthNames : [ '월', 'FEV', '월', 'ABR', '마이', '6월', '7월', '전', '설정', '아웃', '11월', '즈다' ] });

  25. 25.벤 쾰러의 솔루션 주셔서 감사합니다.

    벤 쾰러의 솔루션 주셔서 감사합니다.

    그들 중 일부는 일의 선택과 필요로하지만, 나는 datepickers의 여러 인스턴스에 문제가 있었다. (편집 3) 벤 쾰러의 솔루션은 작동하지만 모든 경우에 하루 선택을 숨 깁니다. 다음은이 문제를 해결하는 업데이트입니다 :

    $('.date-picker').datepicker({
    dateFormat: "mm/yy",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    onClose: function(dateText, inst) {
        if($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1) {
            $(this).datepicker(
                'setDate',
                new Date(
                    $("#ui-datepicker-div .ui-datepicker-year :selected").val(),
                    $("#ui-datepicker-div .ui-datepicker-month :selected").val(),
                    1
                )
            ).trigger('change');
            $('.date-picker').focusout();
        }
        $("#ui-datepicker-div").removeClass("month_year_datepicker");
    },
    beforeShow : function(input, inst) {
        if((datestr = $(this).val()).length > 0) {
            year = datestr.substring(datestr.length-4, datestr.length);
            month = datestr.substring(0, 2);
            $(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
            $(this).datepicker('setDate', new Date(year, month-1, 1));
            $("#ui-datepicker-div").addClass("month_year_datepicker");
        }
    }
});

  26. 26.사용 onSelect를 호출 다시 수동으로 연도 부분을 제거하고 수동으로 필드에 텍스트를 설정

    사용 onSelect를 호출 다시 수동으로 연도 부분을 제거하고 수동으로 필드에 텍스트를 설정

    27. from https://stackoverflow.com/questions/2208480/jquery-ui-datepicker-to-show-month-year-only by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 변수가 '정의되지 않은'또는 '널 (null)'의 경우 어떻게 확인할 수 있습니까?  (0) 2020.09.27
[JQUERY] AJAX 크로스 도메인 호출  (0) 2020.09.27
[JQUERY] 드롭 다운 메뉴에서 옵션을 선택하기 JQuery와  (0) 2020.09.27
[JQUERY] CSS의 액세스 "후"선택 jQuery를 함께 [중복]  (0) 2020.09.27
[JQUERY] JQuery와의 정상 및 슬림 패키지의 차이점은 무엇입니까?  (0) 2020.09.27
,

티스토리툴바