jquery ui datepicker ngày/tháng chỉ, không phải năm lựa chọn

Question

Tôi đã tìm kiếm ở đây trong SO và tất cả các xung quanh nhưng không có giải pháp đúng đắn được thành lập cho vấn đề này. Với jQueryUI DatePicker tôi cần phải chọn một ngày đệ quy cho tất cả các năm, vì vậy tôi không muốn hiển thị lựa chọn năm, vì nó không có ý nghĩa.

Làm cách nào để có được điều này bên trong cuộc gọi như sau?

$('#myInput').datepicker({ dateFormat: "dd/mm" }); 

Lưu ý: Tôi không thể sử dụng giải pháp css như đề xuất here.ui-datepicker-year{ display:none; } vì có datepickers khác trong cùng một trang.

Mọi trợ giúp sẽ được đánh giá cao.

Xin cảm ơn trước.

Answer 1

Hiya thử này xin vui lòng giới thiệu: http://jsfiddle.net/rAdV6/20/ đây là những gì bạn muốn bruv

trong đó bao giờ phù hợp với bạn người đàn ông :) cũng thấy cả ảnh chụp màn hình dưới đây và xin đừng quên để chấp nhận và bỏ phiếu lên nếu điều này giúp :))

Sửa để xây dựng tiếp tục sửa chữa này sẽ cho phép có nhiều hái ngày có hoặc không có năm trên đầu xuất hiện trên đỉnh của lịch.

Hy vọng điều này sẽ hữu ích! cổ vũ

mã jquery

$('.DateTextBox.NoYear').datepicker({ 
      beforeShow: function (input, inst) { 
       inst.dpDiv.addClass('NoYearDatePicker'); 
      }, 
      onClose: function(dateText, inst){ 
       inst.dpDiv.removeClass('NoYearDatePicker'); 
      } 
     }); 

$('#datepicker').datepicker({ changeYear: false, dateFormat: 'dd/mm',}); 


$('#datepicker1').datepicker({ changeYear: true, dateFormat: 'dd/mm', }); 

$('#datepicker2').datepicker({ changeYear: false, dateFormat: 'dd/mm', }); 
​ 

Css

.NoYearDatePicker .ui-datepicker-year 
{ 
display:none; 
} 

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all"> 

date (without year) <input type="text" id="datepicker" class="DateTextBox NoYear"> 

<br /> 
date 1: (With year) <input type="text" id="datepicker1" > 
<br /> 
date 2: (Without year) <input type="text" id="datepicker2" class="DateTextBox NoYear"> 
​ 

Hình ảnh dưới đây để hiển thị như thế nào nó xuất hiện trong lappy của tôi OSX cũng :)

Answer 2

Không thể bạn làm

#myInput .ui-datepicker-year{ display:none; } 

để hạn chế nó để chỉ datepicker bạn lo ngại về?

Answer 3

Hãy thử điều này:

$("#myInput").datepicker(); 
$("#myInput").datepicker("option", "dateFormat", "dd/mm"); 

Như jQuery UI DatePicker Documentaion,

http://docs.jquery.com/UI/Datepicker#option-dateFormat

Bạn phải gọi hàm dưới đây trong Khởi tạo.

$("#myInput").datepicker({ dateFormat: "dd/mm" }); 

Nó sẽ không hoạt động nếu bạn gọi sau phương thức init.

Answer 4

Xây dựng dựa trên câu trả lời từ Tats_innit, đây là giải pháp giải quyết một số vấn đề của nó.

$(function() { 
 
    $('.dp').datepicker({ 
 
    dateFormat: 'd MM yy', 
 
    beforeShow: function(inp, inst) { 
 
     if (inp.classList.contains("Birthday")) { 
 
     inst.dpDiv.addClass('BirthdayDatePicker'); 
 
     return { 
 
      dateFormat: 'MM d', 
 
      defaultDate: new Date(1904, 0, 1), 
 
      minDate: new Date(1904, 0, 1), 
 
      maxDate: new Date(1904, 11, 31), 
 
     }; 
 
     } 
 
    }, 
 
    onClose: function(dateText, inst) { 
 
     inst.dpDiv.removeClass('BirthdayDatePicker'); 
 
    } 
 
    }); 
 
});

.BirthdayDatePicker .ui-datepicker-year { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 
Birthday: <input type='text' class='dp Birthday' placeholder='Month day'> 
 

 
<div style="height: 12px" class="spacer"></div> 
 

 
Defaults: <input type='text' class='dp' placeholder='day Month year'>

tôi thấy rằng việc sử dụng một lớp trên đầu vào là một cách đơn giản để xác định các hành vi chúng ta muốn ra khỏi datepicker.

Nếu lớp học Sinh nhật được tìm thấy, chúng tôi sử dụng năm 1904 thay vì bất kỳ năm hiện tại nào là vì năm 1904 là năm nhuận đảm bảo rằng ngày 29 tháng 2 khả dụng. Ngoài ra, chúng tôi giới hạn tiện ích con trong một khoảng thời gian 12 tháng với tùy chọn minDate/MaxDate. Bạn cũng có thể bao gồm numberOfMonths: [ 3, 4 ] trong đối tượng return'd để hiển thị cả năm cùng một lúc nếu bạn muốn.

Answer 5

giải pháp đơn giản cho việc này:

$(".daypicker").datepicker({ 
    changeYear: false, 
    dateFormat: 'MM-dd', 
}).focus(function() { 
    $(".ui-datepicker-year").hide(); 
}); 

It wont ảnh hưởng đến datepickers khác trong cùng một trang.

Answer 6

Tôi biết đó là một câu hỏi khá cũ, nhưng có lẽ nó sẽ hữu ích cho ai đó. Nếu bạn đặt tùy chọn changeYear: false, bạn có thể thấy <span> với giá trị năm, nhưng nếu bạn đặt changeYear: true, bạn có thể thấy <select>. Chúng ta có thể sử dụng sự khác biệt này như thế này:

$(function() { 
 
    $("#year-datepicker").datepicker({ 
 
    changeMonth: true, 
 
    changeYear: true 
 
    }); 
 

 
    $("#no-year-datepicker").datepicker({ 
 
    dateFormat: "MM d", 
 
    changeMonth: true, 
 
    changeYear: false 
 
    }); 
 
});

span.ui-datepicker-year { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" /> 
 

 
<p>With year: <input type="text" id="year-datepicker"></p> 
 
<p>Without year: <input type="text" id="no-year-datepicker"></p>