JQuery datePicker date reset

Question

Я хотел бы добавить элемент «Сброс» в datepicker в нижней части календаря, где находится элемент управления «закрыть». Это позволит пользователю сбросить ввод, привязанный к datepicker, на пустой (без даты).

Я не могу понять, как написать функцию связывания, в частности, как я могу получить элемент, связанный с элементом управления?

 if (this.displayClear) { 
      $pop.append(
       $('<a href="#" id="dp-clear">' + $.dpText.TEXT_CLEAR + '</a>') 
       .bind(
        'click', 
        function() 
        { 
          c.clearSelected(); 
          //help! reset the value to '': $(this.something).val('') 
          c._closeCalendar(); 
        } 
       ) 
      ); 
     } 

Answer 1

Это рабочее решение, просто вызовите cleanDatepicker() перед любым вызовом datepicker.

function cleanDatepicker() { 
    var old_fn = $.datepicker._updateDatepicker; 

    $.datepicker._updateDatepicker = function(inst) { 
     old_fn.call(this, inst); 

     var buttonPane = $(this).datepicker("widget").find(".ui-datepicker-buttonpane"); 

     $("<button type='button' class='ui-datepicker-clean ui-state-default ui-priority-primary ui-corner-all'>Delete</button>").appendTo(buttonPane).click(function(ev) { 
      $.datepicker._clearDate(inst.input); 
     }) ; 
    } 
} 

Answer 2

Я сталкивался с этой же проблемой, то есть у вас не было опции для опорожнения даты. Затем я нашел это супер полезный комментарий со сладким куском кода отправил here:

Один быстрый способ, которым Вы можете добавить четкую функцию даже читать только те поля, чтобы добавить следующий код в ваш существующий контроль Datepicker:

}).keyup(function(e) { 
    if(e.keyCode == 8 || e.keyCode == 46) { 
     $.datepicker._clearDate(this); 
    } 
}); 

Это позволит людям выделить (что они могут даже в поля Только для чтения), а затем использовать обратное пространство или удалить, чтобы удалить дату, используя внутреннюю функцию _clearDate.

Answer 3

1. Изменение Готово ярлык очистить и добавить код, чтобы очистить

   $(document).ready(function() { 
       $("#startdate").datepicker({ 
        showOn: 'both', 
        buttonImageOnly: true, 
        buttonImage: "css/images/calendar.gif", 
        showButtonPanel: true, 
        closeText: 'Clear', 
        onClose: function (dateText, inst) { 
         $(this).val(''); 
        } 
       }); 
   }); 
   

2. Добавить кнопку Отмена в календарь

   $("#termdate").datepicker({ 
       showOn: 'both', 
       buttonImageOnly: true, 
       buttonImage: "css/images/calendar.gif", 
       showButtonPanel: true, 
       beforeShow: function (input) { 
        setTimeout(function() { 
         var buttonPane = $(input).datepicker("widget") 
          .find(".ui-datepicker-buttonpane"); 
         var btn = $('<button class="ui-datepicker-current' 
          + ' ui-state-default ui-priority-secondary ui-corner-all"' 
          + ' type="button">Clear</button>'); 
         btn.unbind("click").bind("click", function() { 
          $.datepicker._clearDate(input); 
         }); 
         btn.appendTo(buttonPane); 
        }, 1); 
       } 
   }); 
   

Answer 4

Я нашел более хорошее решение:

$(document).ready(function() { 
    $(".datepicker").datepicker({ 
      showOn: 'focus', 
      showButtonPanel: true, 
      closeText: 'Clear', // Text to show for "close" button 
      onClose: function() { 
       var event = arguments.callee.caller.caller.arguments[0]; 
       // If "Clear" gets clicked, then really clear it 
       if ($(event.delegateTarget).hasClass('ui-datepicker-close')) { 
        $(this).val(''); 
       } 
      } 
    }); 
}); 

http://jsfiddle.net/swjw5w7q/1/

Answer 5

Вот совок

Мы можем использовать кнопку по умолчанию сделано, чтобы связать пользовательский четкую функцию.

$("#date_picker").datepicker({minDate:myDate,dateFormat: 'yy-mm-dd',showButtonPanel:true,closeText:'Clear', 
    beforeShow: function(input) { 
     setTimeout(function() { 
     var clearButton = $(input) 
      .datepicker("widget") 
      .find(".ui-datepicker-close"); 
     clearButton.unbind("click").bind("click",function(){$.datepicker._clearDate(input);}); 
     }, 1); 
    } 
}); 

Работы как очарование. Ура :);)

кредитов: Себастьен Renauld и Behrang бина

Answer 6

Это добавит кнопку Clear на Jquery Календаре, которая очистит Дата.

$("#txtDOJ").datepicker({ 
    showButtonPanel: true, 
    closeText: 'Clear', 
    onClose: function (dateText, inst) { 
     if ($(window.event.srcElement).hasClass('ui-datepicker-close')) { 
      document.getElementById(this.id).value = ''; 
     } 
    } 
});