jquery.ui.datepickerを読み込まないページでも、datepicker関数が含まれたjsファイルを使いたい

Question

とあるフォームにて、フォームの内容が変更されたら「送信」ボタンを画面下部に固定表示させるjavascript[form.js」を作成してます。

jQuery(function(){
	
	//値が入っていれば抽出ボタンをフッターに固定
	function formChange(){
	
		let flag = true;
			
		//ひとまずinput[type="text"]をチェック
		jQuery('input[type="text"]').each(function(e) {
			if (jQuery(':text').eq(e).val() != "") {
				flag = false;
			}
		});
						
		if (flag) {//trueの時はメニュー消える
			jQuery('#searchbtn-wrapper').removeClass('fixed');
		}else {//trueの時はメニューfixed
			jQuery('#searchbtn-wrapper').addClass('fixed');
		}
	};
	
	jQuery('form').on('change',function(){
		formChange();
	});
	formChange();
});

jQueryUIのdatepickerを使用している箇所が反応してくれなかったので別途クラスを付与し、下記の行を加えました。

		jQuery('.has_dp').datepicker({
		  onSelect: function(selectedDate){
			formChange();
		  }
		});

form.jsをいろいろと使いまわしていたところ、jQueryUIのdatepickerを読み込んでいないフォームもあり、エラーが出てしまいました。

form.js:XX Uncaught TypeError: jQuery(...).datepicker is not a function

関数が存在するか調べるtypeofというのを見つけて以下のようにしたところエラーは消えましたが、データピッカーが反応してくれません。

　　　if(typeof datepicker == 'function){
		jQuery('.has_dp').datepicker({
		  onSelect: function(selectedDate){
			formChange();
		  }
		});
     }

どう変更すればjQueryUIのdatepickerが存在する、しない、両方の環境で上手く動いてくれますでしょうか？
基本的なことかと思いますが、よろしくお願いします。

Answer 1

　　　if (jQuery.datepicker) {
        jQuery('.has_dp').datepicker(...);

と修正することで可能かと思います。

Answer 2

datepickerはjQueryUIの機能ですから、ライブラリを
呼んでないページでは機能しません。
jQueryUIを呼ぶだけなのでそうしない理由はないと思います

Comments

[Samson818]

手っ取り早い方法ではあるのですが、別の逃げる方法も学んでおきたいなと考えた次第です。

[yambejp]

くりかえしですが「datepickerはjQueryUIの機能」です。
もしjQueryUIを使わないなら、それに相当するようなライブラリを
自作するしかありません。
それを一般に「車輪の再発明」といいます