JSFiddle - React, Tailwind, and code Playground

by synz izynz

HTML

<input name="opt2" type="text" placeholder="Tarikh" class="form-control check kalendar" value="" />
				<!-- <input name="opt1" type="text" placeholder="Jumlah" class="form-control numeric_int check" value="" /> -->
        <select name="opt3">
        <option value="">Sila Pilih</option>
        <option value="10">10tahun</option>
        <option value="30">30tahun</option>
        </select>
        <br><br>
				<input name="nextdate" type="text" placeholder="Tarikh Baru" class="form-control numeric_int check" value="" />

JavaScript

$(document).off('focus.kalendar').on("focus.kalendar",'.kalendar',function(){


			$(this).prop('maxLength', 10);
			var d 	= new Date();
			var year 	= d.getFullYear()+10;
			// alert(year);
			$(this).datepicker({
				dateFormat: 'dd-mm-yy',
				changeMonth: true,
				changeYear: true,
				yearRange: '1900:'+year,
				// minDate:"-100Y",
				// maxDate:"+100Y",
				showButtonPanel: true,
			});

			$(this).datepicker("show");
			$("#ui-datepicker-div").css("z-index","100000");

	});
  
$("[name='opt1'], [name='opt2'], [name='opt3']").on('change',function(){
		// var t_value = $("[name='opt1']").val();
   var t_value = $("[name='opt3'] option:selected").val(); 
		var text 	= $("[name='opt2']").val();

		var comp = text.split('-');
		var d = parseInt(comp[0], 10);
		var m = parseInt(comp[1], 10);
		var y = parseInt(comp[2], 10);

		$("[name='tarikhLuput']").val('');

		if(text !== '' && t_value !== '' && t_value !== '0'){
			// var dateMin = $("[name='tarikhWrit']").datepicker("getDate");
			var dateMin = new Date(y,m-1,d);
			// alert(dateMin);
			if (dateMin.getFullYear() == y && dateMin.getMonth() + 1 == m && dateMin.getDate() == d) {
				var rMax 		= new Date(dateMin.getFullYear() + parseInt(t_value), dateMin.getMonth(),dateMin.getDate() - 1); 
				var newDate 	= $.datepicker.formatDate('dd-mm-yy', new Date(rMax)); 
				$("[name='nextdate']").val(newDate);
			}
		}
	});