jqueryのDatepickerのイベント終了時にajaxでDBを更新したい

実現したいこと

• クリック時に.datePickerを表示
• 入力欄に不要な文字は入力出来ないようにする
• 日付を選択 or 入力欄をクリア(=deleteキー押下)したタイミングでajax処理が走る
• ajax先でDBのカラムを更新する

datePickerのイベント監視箇所について

• 日付選択時
• 入力欄でdeleteキーが押された時

実装

$(document).ready(function(){
    $('.input-text').keypress( function() {
        // 半角入力させない
        return false
    }).datepicker({
        "dateFormat": 'yy-mm-dd',
        onSelect: function(dateText) {
            // 日付選択時/deleteキーが押されて._clearDate()が走った時 実行
            save($(this), dateText); //-> 実行したい処理
        }
    }).keyup(function(e) {
        // deleteキーが押された場合に実行
        if(e.keyCode === 8) {
            $.datepicker._clearDate(this);
        }
    });
});

//**
//  ajax処理(→対象のControllerのメソッドでカラム更新)
//**
function save(elm, value){
    let url = location.pathname + "/" + $(elm).attr("data-cid");
    let key = $(elm).attr("data-key");
    $.ajax({
        url: url,
        type: "PATCH",
        data: {
            key : key,                   // モデルの対象カラム名
            value : value,               // 設定したい値
            id: $(elm).attr("data-cid"), // 対象モデルを検索するためのid
            ajax: 'true'
        },
        dataType: "html",
        success: function(data) {
            console.log("success");
        },
        error: function(data) {
            console.log("error");
        }
    });
}

最後に

.blur()も試したが、それだと何も値変更しなくても、マウス外しただけで走るのでイベント頻度が多すぎたので不採用。

この処理の欠点は、deleteキー１回押すと入力欄全てがクリアになること。

結局のところ、クリアボタン配置するとか、bootstrapの方使えばいいやんってなりました。