jQuery UI DatePicker для отображения только года

Я использую средство выбора даты jQuery для отображения календаря. Я хочу знать, могу ли я использовать его для отображения только года, а не полного календаря??


person Nutan    schedule 23.11.2012    source источник
comment
Что значит отображать только год?   -  person Hkachhia    schedule 23.11.2012
comment
Зачем вам datePicker, если вам нужен только год? Просто отобразите текстовое поле и выполните проверку на стороне клиента, чтобы подтвердить год. Или используйте раскрывающийся список для лет. Будь проще :)   -  person Rui Jarimba    schedule 23.11.2012
comment
лучше иметь выпадающий список ..   -  person thecodejack    schedule 23.11.2012


Ответы (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));
        }
    });
});​

Стиль должен быть

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

рабочая демонстрация

person Talha    schedule 23.11.2012
comment
Что это за ужасная скрипка? - person Chazt3n; 12.06.2015

**NOTE : **Если кто-то возражает, что "почему я ответил на этот вопрос сейчас!" Потому что я перепробовал все ответы в этом посте и не получил никакого решения. Поэтому я попробовал свой путь и получил решение, поэтому я делюсь со следующими посетителями ****

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>
person Engr Saddam Zardari    schedule 23.01.2014

Вы можете использовать этот загрузочный указатель даты

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

«ваш-селектор» вы можете использовать идентификатор (# ваш-селектор) ИЛИ класс (. ваш-селектор).

person Ayman Elshehawy    schedule 04.11.2017
comment
Также вы можете изменить идентификатор #datapicker на класс .datapicker, как вам нравится. - person Ayman Elshehawy; 04.11.2017
comment
Да, вы можете использовать класс вместо идентификатора - person Ayman Elshehawy; 28.05.2019

Попробуйте следующее:
добавьте в html следующее

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

Добавить в js-файл

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

Добавь в css

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

Рабочая демонстрация

person change_is_necessity    schedule 28.03.2016

У меня была та же проблема, и после дня исследований я нашел это решение: http://jsfiddle.net/konstantc/4jkef3a1/

// *** (month and year only) ***
$(function() { 
  $('#datepicker1').datepicker( {
    yearRange: "c-100:c",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    closeText:'Select',
    currentText: 'This year',
    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 (M y) (mm/y)', new Date(year, month, 1)));
    }
  }).focus(function () {
    $(".ui-datepicker-calendar").hide();
    $(".ui-datepicker-current").hide();
    $("#ui-datepicker-div").position({
      my: "left top",
      at: "left bottom",
      of: $(this)
    });
  }).attr("readonly", false);
});
// --------------------------------



// *** (year only) ***
$(function() { 
  $('#datepicker2').datepicker( {
    yearRange: "c-100:c",
    changeMonth: false,
    changeYear: true,
    showButtonPanel: true,
    closeText:'Select',
    currentText: 'This year',
    onClose: function(dateText, inst) {
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      $(this).val($.datepicker.formatDate('yy', new Date(year, 1, 1)));
    }
  }).focus(function () {
    $(".ui-datepicker-month").hide();
    $(".ui-datepicker-calendar").hide();
    $(".ui-datepicker-current").hide();
    $(".ui-datepicker-prev").hide();
    $(".ui-datepicker-next").hide();
    $("#ui-datepicker-div").position({
      my: "left top",
      at: "left bottom",
      of: $(this)
    });
  }).attr("readonly", false);
});
// --------------------------------



// *** (year only, no controls) ***
$(function() { 
  $('#datepicker3').datepicker( {
    dateFormat: "yy",
    yearRange: "c-100:c",
    changeMonth: false,
    changeYear: true,
    showButtonPanel: false,
    closeText:'Select',
    currentText: 'This year',
    onClose: function(dateText, inst) {
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      $(this).val($.datepicker.formatDate('yy', new Date(year, 1, 1)));
    },
    onChangeMonthYear : function () {
      $(this).datepicker( "hide" );
    }
  }).focus(function () {
    $(".ui-datepicker-month").hide();
    $(".ui-datepicker-calendar").hide();
    $(".ui-datepicker-current").hide();
    $(".ui-datepicker-prev").hide();
    $(".ui-datepicker-next").hide();
    $("#ui-datepicker-div").position({
      my: "left top",
      at: "left bottom",
      of: $(this)
    });
  }).attr("readonly", false);
});
// --------------------------------
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

<div class="container">

  <h2 class="font-weight-light text-lg-left mt-4 mb-0"><b>jQuery UI Datepicker</b> custom select</h2>

  <hr class="mt-2 mb-3">
  <div class="row text-lg-left">
    <div class="col-12">

      <form>

        <div class="form-label-group">
        <label for="datepicker1">(month and year only : <code>id="datepicker1"</code> )</label>
          <input type="text" class="form-control" id="datepicker1" 
                 placeholder="(month and year only)" />
        </div>

        <hr />

        <div class="form-label-group">
        <label for="datepicker2">(year only : <code>input id="datepicker2"</code> )</label>
          <input type="text" class="form-control" id="datepicker2" 
                 placeholder="(year only)" />
        </div>

        <hr />

        <div class="form-label-group">
        <label for="datepicker3">(year only, no controls : <code>input id="datepicker3"</code> )</label>
          <input type="text" class="form-control" id="datepicker3" 
                 placeholder="(year only, no controls)" />
        </div>

      </form>

    </div>
  </div>

</div>

Я знаю, что этот вопрос довольно старый, но я подумал, что мое решение может быть полезно другим, столкнувшимся с этой проблемой. Надеюсь, поможет.

person konstantc    schedule 08.03.2019

Для этого вы можете использовать атрибут dateFormat, например:

$('#datepicker').datepicker({ dateFormat: 'yy' })
person Rui Jarimba    schedule 23.11.2012
comment
Это выберет только год, но как удалить календарь и месяц из datePicker ?? - person Nutan; 23.11.2012
comment
Хорошо, хорошо, я неправильно понял ваш вопрос, теперь я понял. - person Rui Jarimba; 23.11.2012
comment
Зачем вам datePicker, если вам нужен только год? Просто отобразите текстовое поле и выполните проверку на стороне клиента, чтобы подтвердить год. Или используйте раскрывающийся список для лет - person Rui Jarimba; 23.11.2012
comment
@RuiJarimba В моем случае у меня есть 300 лет на выбор - к сожалению, на Mac в раскрывающемся списке нет возможности полосы прокрутки, поэтому чтобы добраться до конца, требуются целые годы! - person Matthew Wilcoxson; 15.09.2016

Попробуйте этот кусок кода, у меня сработало:

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

Я надеюсь, что это будет творить волшебство и для вас.

person Akhilesh Kumar    schedule 15.07.2020

проверьте этот jquery календарь показывать только год и месяц

или что-то вроде этого

$("#datepicker").datepicker( "option", "dateFormat", "yy" );​
person rajesh kakawat    schedule 23.11.2012

Попробуйте таким образом скрыть календарь и показать только год.

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

CSS

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

ДЕМО

person Sibu    schedule 23.11.2012
comment
это хорошо, но вы не можете выбрать год. - person Rafael Herscovici; 29.10.2013
comment
Я видел эту демонстрацию, и я мог видеть месяц также. Я имею в виду, я хотел бы видеть только год. - person user1321759; 01.07.2014

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

// вставьте указанный выше HTML-код в файл .html, а затем вставьте указанный код jquery в файл .js#, и вы сможете использовать пользовательский инструмент выбора года jquery, html и 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();
        }
    });
});
person Amar Srivastava    schedule 20.04.2017