JSFiddle - React, Tailwind, and code Playground

by xxxvvvxxx

HTML

<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<form name="frm" onsubmit="return make(event)">
	<div class="form-group">
		<label for="url" class="col-sm-2 control-label">URL</label>
		<div class="col-sm-10">
			<input type="text" class="form-control input-sm" id="url" placeholder="https://oriel.com" value="" />
		</div>
	</div>
	<div class="form-group">
		<label for="enddate" class="col-sm-2 control-label">종료일</label>
		<div class="col-sm-10">
			<input type="text" class="form-control input-sm datepicker" id="enddate" name="enddate" placeholder="2023-05-12" value="">
		</div>
	</div>
	<div>
		<button class="btn btn-primary" type="submit">생성</button>
	</div>
</form>
<canvas id="qrcode"></canvas>

<script src='https://code.jquery.com/jquery-1.9.1.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

JavaScript

function make(e) {
	e.preventDefault();
	
	var url = $("#url").val();
	var enddate = $("input[name='enddate']").val();
	var website = url + "?enddate=" + enddate;
	
	var qrcode = new QRious({
		element: document.getElementById("qrcode"),
		background: '#ffffff',
		backgroundAlpha: 1,
		foreground: '#5868bf',
		foregroundAlpha: 1,
		level: 'H',
		padding: 0,
		size: 128,
		value: website
	});
}

$("#enddate").datepicker({ 
    autoclose: true, 
    todayHighlight: true,
    format: 'yyyy-mm-dd'
}).datepicker('update', new Date());