jqueryでinputの値が取得できない

Question

#やりたいこと
inputの要素の値を取得し、その値の長さによって、別のinputの有効・無効を切り替える

#やってみたこと

<form>
  <input type="text" name="old_date" class="datepicker old_date">
  <input type="text" name="new_date" class="datepicker new_date">
</form>

<script>
$(function(){
  var $new = $('.new_date');
  $new.on('focus', function () {
    $(".old_date").prop('disabled', true);
  });
  $new.on('blur', function () {
    console.log("new_date blur");
    var newvalue = $new.val();
    console.log(newvalue);
    if(newvalue.length > 0){
        // new_dateが入力されていた場合
        $(".old_date").prop('disabled', true);
    }else{
        // new_dateが入力されていない場合
        $(".old_date").prop('disabled', false);
    }
  });
});
</script>

#問題点・疑問点
new_dateの値を取得するにはどうしたらよいか？
new_dateの値の有無の判定をするのはどうしたらよいか？

Comments

[spookybird]

ご提示のコードで試してみたら問題なく動いているように見えるんですが、何が問題なんですか？https://jsfiddle.net/xpvt214o/677812/

[sakura-shi]

コンソールを見ていると、console.log(newvalue); の部分で、入力された値（datepickerでセット）が表示されないことが問題です。そのため、new_dateの有無の判定ができません。

[spookybird]

質問時にご提示いただくコードは、問題となる事象を正確に再現できるものが望ましいです。

Answer 1

jQuery UIのDatepickerを使用しているものと推定して回答します。
blurイベントは「クリックでカレンダーから日付を選択した直後(=blur)」、「input要素に日付が入力される直前」に発火しているようです。
よって、console.log()で出力される値($new.val())は古い入力値のままになっていたと考えられます。
1つの解決案としてはblurイベントを拾う代わりにDatepickerのonCloseオプションを使用すればよいかと思います。

$(function(){
  var $new = $('.new_date');
  $new.on('focus', function () {
    $(".old_date").prop('disabled', true);
  });
  // ↓ 1行だけ変更
  $new.datepicker('option', 'onClose', function () {
    // 以下略
  });
});

サンプルコード
(質問の修正依頼にあるspookybird様のコードをForkさせていただきました。)