jQuery UI DatePicker hanya menampilkan bulan tahun

374

Saya menggunakan pemilih tanggal jQuery untuk menampilkan kalender di seluruh aplikasi saya. Saya ingin tahu apakah saya bisa menggunakannya untuk menampilkan bulan dan tahun (Mei 2010) dan bukan kalender?

javascript jquery date jquery-ui jquery-ui-datepicker Aanu
sumber

16

Jadi Anda ingin pemilih bulan?

Dotty

Apakah Anda menggunakan jQueryUI DatePicker?

wpjmurray

Iya. jQueryUI DatePicker

Aanu

6

ini bukan jawaban untuk pertanyaan Anda, tetapi kami memiliki ini sekarang, terlihat jauh lebih baik: eternicode.github.io/bootstrap-datepicker/…

Ruben

bootstrap-datepicker sepertinya repo yang dihentikan, dengan masalah yang menumpuk tanpa ada pekerjaan nyata untuk memperbaikinya ...

kumarharsh

424

Berikut ini retasan (diperbarui dengan seluruh file .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>

EDIT jsfiddle untuk contoh di atas: http://jsfiddle.net/DBpJe/7755/

EDIT 2 Menambahkan nilai tahun tahun ke kotak input hanya pada mengklik tombol Selesai. Juga memungkinkan untuk menghapus nilai kotak input, yang tidak mungkin di bidang di atas http://jsfiddle.net/DBpJe/5103/

EDIT 3 memperbarui Solusi yang lebih baik berdasarkan solusi rexwolf ke bawah.
http://jsfiddle.net/DBpJe/5106

Ben Koehler
sumber

14

Memanggil 'setDate' akan membuka kembali pemilih di beberapa browser. Untuk mencegah hal ini, nonaktifkan dan aktifkan pemilih: $ (ini) .datepicker ('disable'); $ (ini) .datepicker ('setDate', Date baru (year1, month1, 1)); $ (ini) .datepicker ('aktifkan');

Sven Sönnichsen

1

@Ven di sini adalah alternatif:$(this).val($.datepicker.formatDate('MM yy', new Date(year, month, 1)));

ThiamTeck

1

Saya mencoba menggunakan solusi ini, tetapi menggunakan getDate pada pengembalian data hanya hari ini. Ada apa?

supertopi

1

Saya melihat sebagian besar contoh menggunakan gaya sebaris pada halaman itu sendiri. Ini akan menjadi masalah jika Anda membutuhkan lebih dari satu kalender (masing-masing dengan pengaturan yang berbeda, misalnya) pada halaman yang sama. Saya lebih suka menambahkan gaya dalam file .css seperti:

#ui-datepicker-div.noCalendar .ui-datepicker-calendar, #ui-datepicker-div.noCalendar .ui-datepicker-header a {display: none;}  #ui-datepicker-div.noCalendar .ui-datepicker-header .ui-datepicker-title{width: 100%; margin: 0;}

Dan kemudian gunakan Javascript untuk memanipulasi perilaku:$("#ui-datepicker-div").addClass('noCalendar');

poweratom

1

Pada contoh di atas Jika saya ingin menghapus kotak teks maka saya tidak bisa. Ada yang bisa bantu saya.

Bik

83

Ini kode bekerja sempurna dengan saya:

<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" />

Output adalah:

Leniel Maccaferri
sumber

Bagaimana seseorang dapat menetapkan nilai untuk kalender ini.

Rafik malek

62

@ Ben Koehler , itu prefek! Saya membuat sedikit modifikasi sehingga menggunakan satu instance dari pemilih tanggal lebih dari sekali berfungsi seperti yang diharapkan. Tanpa modifikasi ini, tanggal diuraikan secara salah dan tanggal yang dipilih sebelumnya tidak disorot.

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

BrianS
sumber

Jawaban ini sebagian besar benar. Namun, saya harus mengubah MM ke M untuk mendapatkan bulan yang benar untuk dipilih ketika tanggal sudah dipilih.

Chazaq

18

Jawaban di atas cukup bagus. Satu-satunya keluhan saya adalah Anda tidak dapat menghapus nilainya setelah ditetapkan. Saya juga lebih suka pendekatan extended-jquery-like-a-plugin.

Ini berfungsi sempurna untuk saya:

$.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);
}

Kemudian panggil seperti ini:

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

pengguna1857829
sumber

2

pada akhirnya saya membatalkan ini karena tidak bisa dijalankan, karena acara onSelect dan / atau onChangeMonthYear dan / atau onClose tidak memecat, atau tidak menerima nilai yang benar, atau, jika ditimpa, membuat widget berhenti bekerja

knocte

10

<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));
            }
        }
    });
});

Ini akan menyelesaikan masalah =) Tapi saya ingin timeFormat yyyy-mm

Hanya mencoba di FF4 sekalipun

Erik Polder
sumber

"yy" di JQuery adalah empat digit tahun. Jika ini yang Anda inginkan, Anda baru saja mencapainya.

Paweł Dyda

9

Saya memiliki kebutuhan yang sama hari ini dan menemukan ini di github, bekerja dengan jQueryUI dan memiliki pemilih bulan sebagai pengganti hari dalam kalender

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

Anthony Shaw
sumber

5

Tidak dipelihara, tetapi ada garpu: github.com/zorab47/jquery.ui.monthpicker

denis.peplin

8

Inilah yang saya pikirkan. Ini menyembunyikan kalender tanpa perlu blok gaya tambahan dan menambahkan tombol yang jelas untuk menangani masalah tidak dapat menghapus nilai begitu Anda mengklik input. Juga berfungsi dengan baik dengan beberapa klik bulanan pada halaman yang sama.

HTML:

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

JavaScript:

$(".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('');
    })
);

Paul Richards
sumber

5

Saya membutuhkan pemilih Bulan / Tahun untuk dua bidang (Dari & Ke) dan ketika satu dipilih, Max / Min ditetapkan pada yang lain ... a la memilih tanggal tiket pesawat. Saya mengalami masalah pengaturan max dan min ... tanggal di bidang lain akan terhapus. Berkat beberapa posting di atas ... Saya akhirnya menemukan jawabannya. Anda harus mengatur opsi dan tanggal dalam urutan yang sangat spesifik.

Lihat biola ini untuk solusi lengkapnya: Picker Bulan / Tahun @ JSFiddle

Kode:

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));
            }

        }
    });

Juga tambahkan ini ke blok gaya seperti yang disebutkan di atas:

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

Amy Struck
sumber

5

Saya menggabungkan banyak jawaban bagus di atas dan sampai pada ini:

    $('#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)
                });
            });

Ini terbukti berfungsi tetapi menghadapi banyak bug jadi saya terpaksa menambal di beberapa tempat datepicker:

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

patch1: di _showDatepicker: untuk menghaluskan kulit;

patch2: di _checkOffset: untuk memperbaiki posisi pemilih bulan (jika tidak, bidang di bagian bawah browser, pemeriksaan offset dimatikan);

patch3: di onClose of _hideDatepicker: jika tidak, ketika menutup bidang tanggal akan berkedip untuk waktu yang sangat singkat yang sangat mengganggu.

Saya tahu perbaikan saya masih jauh dari baik, tetapi untuk sekarang ini berfungsi. Semoga ini bisa membantu.

rexwolf
sumber

Baru tambahkan baris ini ke beforeShow: {inst.dpDiv.addClass ('month_year_datepicker')}. tanggal flashing akan berhenti :). Saya juga berpikir .focus tidak diperlukan saat itu

Parag

5

Tambahkan satu lagi solusi sederhana

 $(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/
Fitur :

hanya menampilkan bulan / tahun
Menambahkan nilai tahun bulan ke kotak input hanya pada mengklik tombol Selesai
Tidak ada perilaku "buka kembali" ketika klik "Selesai"
------------------------------------
solusi lain yang berfungsi baik untuk datepicker dan monthpicker di halaman yang sama: (juga hindari bug klik pada tombol sebelumnya di IE, yang mungkin terjadi jika kita menggunakan fungsi fokus)
JS fiddle link

Chris Phan
sumber

4

Apakah hanya saya atau ini tidak berfungsi sebagaimana mestinya di IE (8)? Tanggal berubah ketika mengklik selesai, tetapi datepicker terbuka lagi, sampai Anda benar-benar mengklik suatu tempat di halaman untuk kehilangan fokus pada bidang input ...

Saya mencari solusi untuk ini.

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

Tom Van Schoor
sumber

1

$ (ini) .datepicker ('disable'); $ (ini) .datepicker ('setDate', Tanggal baru (tahun, bulan, 1)); $ (ini) .datepicker ('aktifkan'); Memecahkan masalah.

Tom Van Schoor

1

Ini bukan jawaban

sisharp

4

Jika Anda mencari pemilih bulan, cobalah jquery.mtz.monthpicker ini

Ini bekerja dengan baik untuk saya.

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);

pengguna2630080
sumber

Tautan sudah mati. Situs ini tidak dapat dijangkau | Alamat DNS server lucianocosta.info tidak dapat ditemukan.

Pang

1

Berikut ini tautan yang diperbarui: lucianocosta.com.br/jquery.mtz.monthpicker

Sebastian S.

Tautan yang diperbarui juga rusak.

nasch

4

Seperti banyak yang lain, saya telah menemui banyak masalah dalam mencoba melakukan ini, dan hanya kombinasi dari solusi yang diposting, dan akhirnya peretasan besar untuk membuatnya sempurna, telah memberikan saya solusi.

Masalah dengan solusi lain di utas ini yang telah saya coba:

Memilih tanggal baru dalam datepicker, juga akan mengubah tanggal (internal) dari datepicker lain, jadi ketika Anda membuka yang lain lagi (atau mencoba mendapatkan tanggal mereka), mereka akan memiliki tanggal yang berbeda dari yang ditampilkan dalam input yang ditugaskan kepada mereka. -bidang.
Datepicker tidak akan "mengingat" tanggal ketika dibuka lagi.
Kode untuk menyulap tanggal menggunakan substring sehingga tidak kompatibel dengan semua format.
"Pembalap bulan saya" hanya mengubah bidang input saat menutupnya, alih-alih setiap kali nilainya diubah.
Field input tidak diperbarui dengan benar, jika Anda mengetikkan string input yang diformat dengan salah untuk suatu tanggal, dan kemudian klik 'Tutup' pada datepicker.
Saya tidak dapat memiliki datepicker normal, yang menunjukkan hari, di halaman yang sama dengan bulanpicker, yang tidak menunjukkan hari.

Saya akhirnya menemukan cara untuk memperbaiki semua masalah ini . Empat yang pertama dapat diperbaiki hanya dengan berhati-hati tentang bagaimana Anda mereferensikan tanggal-dan penghapus bulan Anda dalam kode internal mereka, dan tentu saja melakukan beberapa pembaruan secara manual dari pemilih Anda. Ini bisa Anda lihat pada contoh-contoh di dekat bagian bawah. Masalah kelima dapat dibantu dengan menambahkan beberapa kode khusus ke fungsi datepicker.

CATATAN: Anda TIDAK perlu menggunakan skrip monthpicker berikut untuk memperbaiki tiga masalah pertama dalam datepicker normal Anda. Cukup gunakan skrip Instantiation datepicker di dekat bagian bawah posting ini.

Sekarang, untuk menggunakan monthpickers dan memperbaiki masalah terakhir, kita perlu memisahkan datepickers dan monthpickers. Kita bisa mendapatkan salah satu dari beberapa add-on monthpicker jQuery-UI di luar sana, tetapi beberapa kurangnya fleksibilitas / kemampuan pelokalan, beberapa kekurangan dukungan animasi ... jadi, apa yang harus dilakukan? Gulung "milikmu" dari kode-datepicker! Ini memberi Anda pembekal bulanan yang berfungsi penuh, dengan semua fungsi datepicker, hanya tanpa menampilkan hari.

Saya telah menyediakan skrip js Januari dan skrip CSS yang menyertainya , menggunakan metode yang dijelaskan di bawah ini, dengan kode jQuery-UI v1.11.1. Cukup salin cuplikan kode ini ke dua file baru, masing-masing monthpicker.js dan monthpicker.css.

Jika Anda ingin membaca tentang proses yang agak sederhana di mana saya mengubah datepicker menjadi monthpicker, gulir ke bawah ke bagian terakhir.

Sekarang untuk menambahkan datepicker dan monthpickers ke halaman!

Cuplikan kode-javascript berikut ini berfungsi dengan beberapa datepicker dan / atau monthpickers pada halaman, tanpa masalah yang disebutkan di atas! Diperbaiki secara umum dengan menggunakan '$ (ini).' banyak :)

Script pertama adalah untuk datepicker normal, dan yang kedua adalah untuk monthpickers "baru".

Keluar-berkomentar .after , yang memungkinkan Anda membuat beberapa elemen untuk menghapus input-bidang, dicuri dari jawaban Paul Richards'.

Saya menggunakan format "MMTT" di penjawab bulan saya, dan format "tttt-tttt" pada datepicker saya, tetapi ini sepenuhnya kompatibel dengan semua format , sehingga Anda bebas untuk menggunakan mana saja yang Anda inginkan. Cukup ubah opsi 'dateFormat'. Opsi standar 'showButtonPanel', 'showAnim', dan 'yearRange' tentu saja opsional dan dapat disesuaikan dengan keinginan Anda.

Menambahkan datepicker

Instansiasi datepicker. Yang ini berlangsung dari 90 tahun yang lalu dan hingga saat ini. Ini membantu Anda untuk menjaga input-bidang yang benar, terutama jika Anda mengatur opsi defaultDate, minDate dan maxDate, tetapi itu bisa menanganinya jika Anda tidak. Ini akan bekerja dengan dateFormat yang Anda pilih.

        $('#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('');
    //    })
    //)
    ;

Menambahkan penjilat bulan

Sertakan file monthpicker.js dan file monthpicker.css di halaman yang Anda ingin gunakan monthpickers.

Instansiasi Monthpicker Nilai yang diambil dari monthpicker ini, selalu merupakan hari PERTAMA dari bulan yang dipilih. Mulai pada bulan berjalan, dan berkisar dari 100 tahun yang lalu dan 10 tahun ke depan.

    $('#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('');
    //    })
    //)
    ;

Itu dia! Itu semua yang Anda butuhkan untuk membuat penjilat bulan.

Saya sepertinya tidak bisa membuat jsfiddle bekerja dengan ini, tetapi ini bekerja untuk saya dalam proyek ASP.NET MVC saya. Lakukan saja apa yang biasanya Anda lakukan untuk menambahkan datepicker ke halaman Anda, dan menggabungkan skrip di atas, mungkin dengan mengubah pemilih (artinya $ ("# MyMonthTextBox")) ke sesuatu yang bekerja untuk Anda.

Saya harap ini membantu seseorang.

Tautan ke pastebins untuk beberapa pengaturan tanggal dan bulan tambahan:

Monthpicker bekerja pada hari terakhir bulan itu . Tanggal yang Anda dapatkan dari penjilat bulan ini akan selalu menjadi hari terakhir bulan itu.
Dua pembuat bulan berkolaborasi ; 'start' bekerja pada hari pertama bulan itu, dan 'akhir' bekerja pada hari terakhir bulan itu. Keduanya dibatasi oleh satu sama lain, jadi memilih satu bulan di 'akhir' yang sebelum bulan yang dipilih pada 'awal', akan mengubah 'mulai' menjadi bulan yang sama dengan 'akhir'. Dan sebaliknya. OPSIONAL: Saat memilih bulan pada 'mulai', 'minDate' pada 'akhir' diatur ke bulan itu. Untuk menghapus fitur ini, beri komentar satu baris di onClose (baca komentar).
Dua datepicker yang berkolaborasi ; Keduanya dibatasi oleh satu sama lain, sehingga memilih tanggal pada 'akhir' yang sebelum tanggal yang dipilih pada 'awal', akan mengubah 'mulai' menjadi bulan yang sama dengan 'akhir'. Dan sebaliknya. OPTIONAL: Ketika memilih tanggal pada 'mulai', 'minDate' pada 'akhir' diatur ke tanggal itu. Untuk menghapus fitur ini, beri komentar satu baris di onClose (baca komentar).

Bagaimana saya mengubah DatePicker menjadi MonthPicker

Saya telah mengambil semua kode javascript dari jquery-ui-1.11.1.js yang berkaitan dengan datepicker mereka, menempelkannya ke file js baru, dan mengganti string berikut:

"datepicker" ==> "monthpicker"
"Datepicker" ==> "Monthpicker"
"pemilih tanggal" ==> "pemilih bulan"
"Pemilih tanggal" ==> "Pemilih bulan"

Kemudian saya menghapus bagian dari for-loop yang menciptakan seluruh div ui-datepicker-calendar (div yang disembunyikan oleh solusi lain menggunakan CSS). Ini dapat ditemukan di fungsi _generateHTML: (inst).

Temukan baris yang mengatakan:

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

Tandai semuanya dari setelah tag penutup dan turun ke (dan tidak termasuk) baris di mana dikatakan:

drawMonth++;

Sekarang akan tidak bahagia karena kita perlu menutup beberapa hal. Setelah div-tag penutup dari sebelumnya, tambahkan ini:

";

Kode sekarang harus disatukan dengan baik. Berikut cuplikan kode yang menunjukkan apa yang seharusnya Anda dapatkan:

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

Kemudian saya menyalin / menempelkan kode dari jquery-ui.css yang berkaitan dengan datepickers ke file CSS baru, dan mengganti string berikut:

"datepicker" ==> "monthpicker"

Ultroman si Tacoman
sumber

3

setelah menggali jQueryUI.com untuk datepicker, inilah kesimpulan dan jawaban saya untuk pertanyaan Anda.

Pertama, saya akan mengatakan tidak untuk pertanyaan Anda. Anda tidak dapat menggunakan datepicker jQueryUI hanya untuk memilih bulan dan tahun. Itu tidak didukung. Tidak memiliki fungsi panggilan balik untuk itu.

Tetapi Anda dapat meretasnya untuk menampilkan hanya bulan dan tahun dengan menggunakan css untuk menyembunyikan hari, dll. Dan saya pikir tidak masuk akal karena Anda perlu tanggal untuk diklik untuk memilih tanggal.

Saya dapat mengatakan Anda hanya perlu menggunakan datepicker lain. Seperti yang disarankan Roger.

Reigel
sumber

3

Saya memiliki masalah pemilih tanggal dicampur dengan pemilih bulan. Saya menyelesaikannya seperti itu.

    $('.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();

        }
    });

PYT
sumber

3

Jika ada yang mau itu juga untuk beberapa kalender itu tidak terlalu sulit untuk menambahkan functionallity ini ke jquery ui. dengan pencarian yang diperkecil untuk:

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

tambahkan ini di depan x

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

pencarian untuk

<table class="ui-datepicker-calendar

dan ganti dengan

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

juga mencari

this._defaults={

gantikan dengan

this._defaults={justMonth:false,

untuk css Anda harus menggunakan:

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

setelah itu semua selesai hanya pergi ke fungsi init datepicker yang Anda inginkan dan memberikan pengaturan 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: true adalah kuncinya di sini :)

prdatur
sumber

2

Pikirkan tentang: http://www.mattkruse.com/javascript/calendarpopup/

Pilih contoh bulan-pilih

Roger
sumber

Karena saya sudah menggunakan datepicker jquery, saya lebih suka menggunakannya atau membuat bulan dan tahun secara manual.

Aanu

2

Membuat beberapa penyempurnaan terhadap respons BrianS yang hampir sempurna di atas:

Saya telah regex nilai yang ditetapkan pada acara karena saya pikir itu benar-benar membuatnya sedikit lebih mudah dibaca dalam kasus ini (meskipun saya menggunakan format yang sedikit berbeda)
Klien saya tidak ingin ada kalender, jadi saya telah menambahkan tambahan kelas pertunjukan / sembunyikan untuk melakukannya tanpa memengaruhi datepicker lainnya. Penghapusan kelas adalah pada timer untuk menghindari tabel berkedip kembali saat datepicker memudar, yang tampaknya sangat terlihat di IE.

EDIT: Satu masalah yang tersisa untuk diselesaikan dengan ini adalah bahwa tidak ada cara untuk mengosongkan datepicker - kosongkan bidang dan klik dan kemudian terisi kembali dengan tanggal yang dipilih.

EDIT2: Saya belum berhasil menyelesaikan ini dengan baik (yaitu tanpa menambahkan tombol Hapus terpisah di sebelah input), jadi akhirnya hanya menggunakan ini: https://github.com/thebrowser/jquery.ui.monthpicker - kalau ada yang bisa dapatkan UI standar untuk melakukannya yang akan luar biasa.

    $('.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));
            }
    });

Anda juga memerlukan aturan gaya ini:

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

Whelkaholism
sumber

2

Saya menyukai jawaban @ user1857829 dan pendekatannya "extended-jquery-like-a-plugin". Saya baru saja membuat modifikasi litte sehingga ketika Anda mengubah bulan atau tahun dengan cara apa pun pemetik benar-benar menulis tanggal di lapangan. Saya menemukan bahwa saya suka perilaku itu setelah menggunakannya sedikit.

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);
}

stravanato
sumber

2

Saya mengalami kesulitan tertentu dengan jawaban yang diterima dan tidak ada yang bisa digunakan dengan upaya minimum sebagai basis. Jadi, saya memutuskan untuk men-tweak versi terbaru dari jawaban yang diterima sampai memenuhi setidaknya JS minimum coding / reusability standar.

Berikut adalah cara solusi yang jauh lebih bersih daripada 3 (terbaru) edisi dari Ben Koehler jawaban diterima 's. Selain itu, akan:

bekerja tidak hanya dengan mm/yyformat, tetapi dengan yang lain termasuk OP MM yy.
tidak menyembunyikan kalender pembuat data lain di halaman.
tidak secara implisit mencemari objek JS global dengan datestr, month, yeardll variabel.

Coba lihat:

$('.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');
    }
});

Dan semua yang Anda butuhkan adalah CSS berikut di suatu tempat di sekitar:

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

Itu dia. Semoga hal di atas akan menghemat waktu bagi pembaca selanjutnya.

Alexander Abakumov
sumber

1

Adil dan FYI. Baris 'inst.dpDiv.addClass (' datepicker-month-year ');' akan menambahkan seluruh bulan-tahun ke kalender kalender dari datepicker, yang berarti, jika ada bidang tanggal lain dengan datepicker, mereka akan berhenti bekerja karena itu. Karena hanya ada satu div untuk kalender, akan menarik untuk menambahkan '$ ('. Datepicker-month-year '). RemoveClass (' datepicker-month-year ');' menggunakan beforeShow ke datepicker lain yang membutuhkan kalender tradisional. ATAU, hapus kelas saat Anda kehilangan fokus. Tetapi saya tidak dapat menemukan apa pun yang berhubungan dengan itu di dalam api

Johnny Bigoode

1

Ini adalah jawaban lengkap yang harus digunakan setiap orang. Masalah terbesar yang terpecahkan bagi saya adalah entri tanggal popup selalu default ke bulan dan tahun saat ini, terlepas dari apa yang sudah ada di dalamnya. Jawaban ini memperbaikinya.

Alex F

1

Saya tahu ini agak terlambat, tapi saya punya masalah yang sama beberapa hari sebelumnya dan saya datang dengan solusi yang bagus & lancar. Pertama saya menemukan pemetik tanggal yang hebat ini di sini

Kemudian saya baru saja memperbarui kelas CSS (jquery.calendarPicker.css) yang datang dengan contoh seperti ini:

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

.calDay 
{
    display:none;
}

Plugin menyalakan acara DateChanged ketika Anda mengubah apa pun, jadi tidak masalah bahwa Anda tidak mengklik pada hari (dan itu cocok sebagai pemetik tahun dan bulan)

Semoga ini bisa membantu!

pjnovas
sumber

1

Saya juga membutuhkan pemetik sebulan. Saya membuat yang sederhana dengan tahun di header dan 3 baris 4 bulan di bawah ini. Lihat ini: Pemetik bulan-bulan sederhana dengan jQuery .

Tiago Coelho
sumber

1

Saya mencoba berbagai solusi yang disediakan di sini dan mereka bekerja dengan baik jika Anda hanya ingin beberapa drop down.

'Picker' terbaik (dalam penampilan, dll) ( https://github.com/thebrowser/jquery.ui.monthpicker ) yang disarankan di sini pada dasarnya adalah salinan versi lama jepery-ui datepicker dengan _generateHTML yang ditulis ulang. Namun, saya menemukan itu tidak lagi bermain bagus dengan jquery-ui saat ini (1.10.2) dan memiliki masalah lain (tidak menutup pada esc, tidak menutup pada pembukaan widget lainnya, memiliki gaya hardcoded).

Alih-alih mencoba untuk memperbaiki pendorong bulan itu dan bukannya mencoba kembali proses yang sama dengan datepicker terbaru, saya pergi dengan mengaitkan ke bagian yang relevan dari pemilih tanggal yang ada.

Ini melibatkan penggantian:

_generateHTML (untuk membangun markup pemilih bulan)
parseDate (karena tidak suka kalau tidak ada komponen hari),
_selectDay (karena datepicker menggunakan .html () untuk mendapatkan nilai hari)

Karena pertanyaan ini agak lama dan sudah dijawab dengan baik, ini hanya override _selectDay untuk menunjukkan bagaimana ini dilakukan:

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);
};

Seperti yang dinyatakan, ini adalah pertanyaan lama, tapi saya merasa berguna jadi ingin menambahkan umpan balik dengan solusi alternatif.

freedomn-m
sumber

0

untuk seorang penjawab bulanan, menggunakan JQuery v 1.7.2, saya memiliki javascript berikut yang melakukan hal itu

$l("[id$=txtDtPicker]").monthpicker({ showOn: "both", buttonImage: "../../images/Calendar.png", buttonImageOnly: true, pattern: 'yyyymm', // Default is 'mm/yyyy' and separator char is not mandatory monthNames: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'] });

Ricardo Appleton
sumber

0

Terima kasih atas solusi Ben Koehler.

Namun, saya punya masalah dengan beberapa contoh datepickers, dengan beberapa dari mereka diperlukan dengan pemilihan hari. Solusi Ben Koehler (dalam edit 3) berfungsi, tetapi menyembunyikan pilihan hari dalam semua kasus. Berikut ini adalah pembaruan yang memecahkan masalah ini:

$('.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");
        }
    }
});

dj3c1t
sumber

-2

Gunakan onSelectpanggilan balik dan hapus bagian tahun secara manual dan atur teks di bidang secara manual

Teja Kantamneni
sumber

3

Saya pikir Anda tidak membaca pertanyaan itu. Aanu ingin "menampilkan bulan dan tahun (Mei 2010) dan bukan kalender".

Reigel