реализация bootstrap-datepicker со ссылкой и текстом

У меня есть текстовая метка и ссылка с 2 кнопками со стрелками, в которой мне нужно реализовать виджет календаря. В настоящее время я использую bootstrap-datepicker, который очень удобен и для других моих страниц.

Но это текстовые поля, поэтому я не обнаружил проблем с их реализацией.

мой виджет

Но здесь у меня нет ввода текста. У меня есть метка, которую необходимо обновить на основе выбранной даты календаря, и при нажатии на стрелку дата должна быть увеличена и показана. Не знаете, как вызвать это событие в календаре с помощью bootstrap-datepicker.

Пытался создать скрипку, но не уверен, как заставить работать внешнюю библиотеку.

Код:

<div class="calendar-widget"> <a><span><i class="fa fa-caret-left fa-fw"></i></span></a>

     <h3> Today, 17 Nov </h3>
 <a class="click-pick"><span><i class="fa fa-calendar fa-fw"></i></span>
                                  <input type="hidden" id="click-picker"/>
                              </a>
 <a><span><i class="fa fa-caret-right fa-fw"></i></span></a>

</div>

Скрипт:

$(".click-pick").datepicker({
    autoclose: true,
    todayHighlight: true
});

$(".click-pick").click(function () {
    $(".click-pick").datepicker('show');
});

javascript datepicker bootstrap-datepicker
person Bala Sivagnanam    schedule 26.12.2014    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Библиотека bootstrap-datepicker, которую вы используете, может запускаться для любого элемента, не обязательно для текста input или form-group. Однако он не сможет обновить дату, потому что нет цели input. Вам придется подключиться к соответствующим вызовам method и event, которые предоставляет этот компонент.

Короче говоря, вам придется использовать:

  1. .datepicker().on('changeDate', <callback>); : для перехвата события изменения даты и
  2. .datepicker("setDate", <Date>); : установить дату в зависимости от ваших стрелок влево-вправо.

Вам также потребуется получить выбранную дату из компонента datepicker, используя его параметр обработчика событий changeDate. Функция обработчика событий changeDate получает параметр с именем e, из которого можно извлечь выбранную дату.

Согласно документации здесь: http://bootstrap-datepicker.readthedocs.org/en/release/events.html#changedate

$('.datepicker').datepicker()
        .on(picker_event, function(e){
            # `e` here contains the extra attributes
});

Особый интерес для нас представляют:

  1. e.date: возвращает выбранную дату
  2. e.format([idx], [format]): возвращает выбранную дату в определенном формате. Нам не нужно idx, потому что у нас есть только один указатель даты. format указывает формат, в котором нужно вернуть дату. Мы также можем опустить это, потому что в противном случае будет использоваться формат, установленный в средстве выбора даты.

Надеюсь, это поможет вам лучше понять.

Вот демонстрационная скрипта: http://jsfiddle.net/abhitalks/ecL5p0xa/1/

Демонстрационный фрагмент:

var curDate = new Date();  // Global or Namespace scoped variable to hold current date

$('#calIcon').datepicker({ // Initialize the datepicker with your options
    format: "dd-M-yyyy",
    weekStart: 1,
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true
}).on('changeDate', dateChanged); // Hook the changeDate event to fire "dateChanged"

function dateChanged(e) {            // The handler for changeDate event
    $("#dtLabel").text(e.format());  // get the selected date in specified format 
    curDate = e.date;                // cache the selected date in the global variable
}

$("#calIcon").datepicker("setDate", new Date()); // Seed the datepicker with today

$(".glyphicon-chevron-left").on("click", function() {  // on click of left arrow
    curDate.setDate(curDate.getDate() - 1);            // decrement current date by 1
    $("#calIcon").datepicker("setDate", curDate);      // set datepicker to new date
});
$(".glyphicon-chevron-right").on("click", function() { // on click of right arrow
    curDate.setDate(curDate.getDate() + 1);            // increment current date by 1
    $("#calIcon").datepicker("setDate", curDate);      // set datepicker to new date
});
.nav {
    background-color: #ccc;
    padding: 8px;
    -webkit-user-select: none;
    user-select: none;
}
.nav span, .nav label { margin-right: 8px; }
#calIcon, .glyphicon-chevron-left, .glyphicon-chevron-right { 
    padding: 4px;
    cursor: pointer; 
}
#calIcon:hover, .glyphicon-chevron-left:hover, .glyphicon-chevron-right:hover { 
    background-color: #eee; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker3.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>

<div class="row nav">
    <div class="col-xs-12">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <label id="dtLabel">Today</label>
        <span id="calIcon" class="glyphicon glyphicon-calendar"></span>
        <span class="glyphicon glyphicon-chevron-right"></span>
    </div>
</div>

person Abhitalks    schedule 26.12.2014
comment
не могу объяснить лучше, чем это. Большое спасибо. попробую это и обновлю .. большое спасибо :) - person Bala Sivagnanam; 27.12.2014
comment
плохо, что я могу проголосовать только один раз. ты просто супер :) - person Bala Sivagnanam; 02.01.2015