10

$(function() { 
    $('#datepicker1').datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     showButtonPanel: true, 
     dateFormat: 'MM yy', 
     onClose: function(dateText, inst) { 
      var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); 
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
      $(this).datepicker('setDate', new Date(year, month, 1)); 
     } 
    }); 
});

Styl powinien być

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

working demo

Źródło

2012-11-23 11:59:10 Talha

+0

Thanks.Just wypróbowany i to działa :) – Nutan

+0

@Pooja dzięki, powinno być głosowanie również ...! – Talha

+0

Co to za okropne skrzypce? – Chazt3n

2

Można użyć atrybutu dateformat za to, coś jak:

$('#datepicker').datepicker({ dateFormat: 'yy' })

Źródło

2012-11-23 11:57:01

+1

To będzie wybrać tylko rok, ale jak usunąć Kalendarz i miesiąc od datePicker ?? – Nutan

+0

Dobrze, źle zrozumiałem twoje pytanie, teraz rozumiem. –

+3

Dlaczego potrzebujesz datePicker, jeśli potrzebujesz tylko roku? Wystarczy wyświetlić pole tekstowe i wykonać walidację po stronie klienta, aby sprawdzić poprawność roku. Lub użyj rozwijanego menu na lata –

1

zajrzyj na jquery calendar pokazać tylko rok i miesiąc

lub coś w tym

$("#datepicker").datepicker("option", "dateFormat", "yy");

Źródło

2012-11-23 12:02:34

1

Spróbuj w ten sposób będzie on ukryć kalendarz i pokaz lat tylko

$(function() { 
    $("#datepicker").datepicker({dateFormat: 'yy'}); 
    });

CSS

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

DEMO

Źródło

2012-11-23 12:07:32 Sibu

+0

to jest miłe, ale nie możesz wybrać roku. – Dementic

+0

Widziałem to demo i mogłem zobaczyć również miesiąc. Chodzi mi o to, że chciałbym zobaczyć tylko rok. – user1321759

13

** NOTE : ** Jeśli ktoś ma zastrzeżenia, "dlaczego odpowiedziałem na to pytanie teraz!" Bo próbowałem wszystkie odpowiedzi z tego postu, a nie każdy dostaje solution.So Próbowałem moją drogę i dostał Rozwiązanie więc dzielę się kolejnych chętnych ****

HTML

<label for="startYear"> Start Year: </label> 
    <input name="startYear" id="startYear" class="date-picker-year" />

jQuery

<script type="text/javascript"> 
     $(function() { 
      $('.date-picker-year').datepicker({ 
       changeYear: true, 
       showButtonPanel: true, 
       dateFormat: 'yy', 
       onClose: function(dateText, inst) { 
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
        $(this).datepicker('setDate', new Date(year, 1)); 
       } 
      }); 
     $(".date-picker-year").focus(function() { 
       $(".ui-datepicker-month").hide(); 
      }); 
     }); 

</script>

Źródło

2014-01-23 12:28:03

2

Spróbuj tego:
dodać w html po

<input type="text" id="datepicker"/>

Dodać w pliku js

$(function() { 
    $("#datepicker").datepicker({dateFormat: 'yy',  changeYear: true,  changeMonth: false}); 
});

Dodaj w css

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

Working Demo

Źródło

2016-03-28 10:52:34

0

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Styling links</title> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
<style type="text/css"> 
hr{ 
    margin: 2px 0 0 0; 
} 
a{ 
    cursor:pointer; 
} 
#yearBetween{ 
    margin-left: 67px; 
} 

</style> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript" src="YearPicker.js"></script> 
</head> 
<body> 
    <div class="form-group col-sm-8" style="display:inline-flex;"> 
    <div style="display:inline-flex;"> 
     <label class="col-sm-4">Select Year</label> 
     <input type="text" id="txtYear1" class="form-control cols-sm-2"/> 
     <img id="yearImage" src="https://cdn4.iconfinder.com/data/icons/VISTA/accounting/png/400/calendar_year.png" style="cursor: pointer;width:50px; height:35px;"></img> 
    </div> 
    <div id="divYear1" style="display:none;border: 0.5px solid lightgrey; height:auto;"> 
    <div style="background:lightgrey;height: 12%;"> 
     <a id="btnPrev1" class="btnPrev glyphicon glyphicon glyphicon-menu-left" style="float:left;margin: 4px;"></a> 
     <input style="text-align: center; width: 43%; border: none; margin-left: 20%;" type="text" id="yearBetween" class="btn-default"/> 
     <a id="btnNext1" class="btnNext glyphicon glyphicon glyphicon-menu-right" style="float:right;margin: 4px;"></a> 
    </div> 
    <hr/> 
    <div id="yearContainer" style="width:260px; height:auto;"> 
    </div> 
</div> 
</div> 
</body> 
</html>

// wklej Powyższe HTML w pliku .html, a następnie wkleić dany kod w jquery. js plik # i możesz użyć niestandardowego selektora jQuery, html i css.

$(document).ready(function(){ 
    // initial value of the start year for the dynamic binding of the picker. 
    var startRange = 2000; 

    // given the previous sixteen years from the current start year. 
    $(".btnPrev").click(function(){ 
     endRange = startRange; 
     startRange = startRange - 16; 
     $("#yearBetween").text(''); 
     // finding the current div 
     var container = event.currentTarget.nextElementSibling.parentElement.nextElementSibling.nextElementSibling; 
     // find the values between the years from the textbox in year picker. 
     createButtons(container); 
     //bind the click function for the dynamically created buttons. 
     bindButtons(); 
     var rangeValues = startRange+ " - "+(endRange-1) ; 
     $("#yearBetween").val(rangeValues); 
    }); 

    // given the next sixteen years from the current end year. 
    $(".btnNext").click(function(){ 
     startRange = endRange; 
     endRange = endRange + 16; 
     //clearing the cuurent values of the picker 
     $("#yearBetween").text(''); 
     // finding the current div 
     var container = event.currentTarget.parentElement.nextElementSibling.nextElementSibling; 
     createButtons(container); 
     //bind the click function for the dynamically created buttons. 
     bindButtons(); 
     // find the values between the years from the textbox in year picker. 
     var rangeValues = startRange+ " - "+(endRange-1) ; 
     // writes the value in textbox shows above the button div. 
     $("#yearBetween").val(rangeValues); 
    }); 

    $("#txtYear1,#yearImage").click(function(){ 
     debugger; 
     $("#divYear1").toggle(); 
     endRange = startRange + 16; 
     //clearing the cuurent values of the picker 
     $("#yearBetween").text(''); 
     var container = "#yearContainer"; 
     // Creating the button for the years in yearpicker. 
     createButtons(container); 
     //bind the click function for the dynamically created buttons. 
     bindButtons(); 
     // find the values between the years from the textbox in year picker. 
     var rangeValues = startRange+ " - "+(endRange-1) ; 
     // writes the value in textbox shows above the button div. 
     $("#yearBetween").val(rangeValues); 
    }); 

    // binding the button for the each dynamically created buttons. 
    function bindButtons(){ 
     $(".button").bind('click', function(evt) 
     { 
      debugger; 
      $(this).css("background","#ccc"); 
      $("#txtYear1").val($(this).val()); 
      $('#divYear1').hide(); 
     }); 
    } 

    // created the button for the each dynamically created buttons. 
    function createButtons(container){ 
     var count=0; 
     $(container).empty(); 
     for(var i= startRange; i< endRange; i++) 
     { 
      var btn = "<input type='button' style='margin:3px;' class='button btn btn-default' value=" + i + "></input>"; 
      count = count + 1; 
      $(container).append(btn); 
      if(count==4) 
      { 
       $(container).append("<br/>"); 
       count = 0; 
      } 
     } 
    } 

    $("#yearBetween").focusout(function(){ 
     var yearValue = $("#yearBetween").val().split("-"); 
     startRange = parseInt(yearValue[0].trim()); 
     if(startRange>999 && startRange < 9985){ 
      endRange = startRange + 16; 
      $("#yearBetween").text(''); 
      var container = "#yearContainer"; 
      createButtons(container); 
      bindButtons(); 
      var rangeValues = startRange+ " - "+(endRange-1) ; 
      $("#yearBetween").val(rangeValues); 
     } 
     else 
     { 
      $("#yearBetween").focus(); 
     } 
    }); 

    $("#yearBetween, #txtYear1").keydown(function (e) { 
     // Allow: backspace, delete, tab, escape, enter and . 
     if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 || 
      // Allow: Ctrl+A, Command+A 
      (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) || 
      // Allow: home, end, left, right, down, up 
      (e.keyCode >= 35 && e.keyCode <= 40)) { 
       // let it happen, don't do anything 
       return; 
     } 
     // Ensure that it is a number and stop the keypress 
     if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { 
      e.preventDefault(); 
     } 
    }); 
});

Źródło

2017-04-20 11:06:57

0

Można użyć tej bootstrap datepicker

$("#datepicker").datepicker({ 
    format: "yyyy", 
    viewMode: "years", 
    minViewMode: "years" 
});

Źródło

2017-11-04 11:19:00

+0

Możesz także zmienić atrybut # datapicker na .datapicker, jak chcesz. –

1

użyć tego kodu do czasu jQuery selektora.

$(function() { 
 
    $('#datepicker1').datepicker({ 
 
     changeMonth: false, 
 
     changeYear: true, 
 
     showButtonPanel: false, 
 
     dateFormat: 'yy', 
 
     onClose: function(dateText, inst) { 
 
       $(this).datepicker('setDate', new Date('2017')); 
 
     } 
 
    }).focus(function() { 
 
       $(".ui-datepicker-month").hide(); 
 
       $(".ui-datepicker-calendar").hide(); 
 
      }); 
 
});

<script src="https://code.jquery.com/jquery-1.9.1.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> 
 

 
<input type="text" id="datepicker1"/>

Źródło

2017-12-27 09:09:43

0

W 2018 r

$('#datepicker').datepicker({ 
    format: "yyyy", 
    weekStart: 1, 
    orientation: "bottom", 
    language: "{{ app.request.locale }}", 
    keyboardNavigation: false, 
    viewMode: "years", 
    minViewMode: "years" 
});

Źródło

2018-02-02 19:06:21

jQuery UI DatePicker do wyświetlania tylko rok

Odpowiedz

// wklej Powyższe HTML w pliku .html, a następnie wkleić dany kod w jquery. js plik # i możesz użyć niestandardowego selektora jQuery, html i css.

jQuery UI DatePicker do wyświetlania tylko rok

Odpowiedz

// wklej Powyższe HTML w pliku .html, a następnie wkleić dany kod w jquery. js plik # i możesz użyć niestandardowego selektora jQuery, html i css.

Powiązane problemy