Datepickerで二つの値を取得、もしくは表示する値を隠したいです。

datepickerを使用しているのですがカレンダーで取得する値を「textで表示する値」と「hiddenで送信する値」を２つにしたいのですがどうしたらよいでしょうか？
表示する値のフォーマット　→　05/10(月)
送信する値のフォーマット　→　2018/05/10
下記ご確認お願いいたします。

１．
カレンダーで日付を選択したら表示する値が左のテキストボックスに入ります。
右のテキストボックスは本来hiddenで送信したい値が入ります。

２．
左のテキストボックスをクリックするとカレンダーが出現します。

３．
すべてのテキストボックスで日付を選択し終えます。
（ここが問題で「年」を表示したくありません。）

４．
「entry」ボタンを押すと同時に左のテキストボックスにhiddenで送りたい値が入ります。
この値が送信されます。

ここまでは出来たのですが、上記の通り３番が問題で「2018」を表示したくありません。

１．テキストボックスに値が入った瞬間に「2018/」を切り取り再表示をしようとkeyupなど試してみましたが
この場合は作動しませんでした。
２．取得する値のフォーマットを「08/20(月)」にすると2018年か2019年かを選択されたかわからないので後から「年」を付与するのはこの場合は難しそうに感じます。
３．datepickerの中で日付を二種類取得できれば良さそうなのでが方法がわかりません。

１か３の方法がよさそうかと思うのですが、見当がつかないのでどなたかご教授お願いいたします。
※{$num}はPHPから配列の中身１．２．３をとってきているだけです。

<html>
<head>
<!--CDN接続-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!--デイトピッカーの読み込み-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js"></script>
</head>

<body>
<!--オンキーアップテスト-->
<p>text<span id="sample1output"></span></p>
<!--配列カレンダー-->
<ul>
{foreach from=$nums item=num}
<input type="text" value="{$num}" id="cal{$num}" onkeyup="onkeyup="sample1getValue();"/>
<input type="text" value="show" id="show{$num}"><br>
<input type="text" value="hide" id="hide{$num}"><br>
{/foreach}
<input type="button" value="button" onClick="getValue();">
</ul>

<!--JavaScript--------------------------------------------->
<script>
<!--オンキーアップテスト-->
function sample1getValue() {
    var $sample1value = document.getElementById( "sample1input" ).value;
    document.getElementById( "sample1output" ).innerHTML = $sample1value;
}
<!--アウトプット------------------------------------>
function getshowtrim(){
console.log('JavaScriptのアラート');
}


function getValue(){
var value1 = document.getElementById("cal1").value;
var showtrim1 = value1.slice(5);
var hidetrim1 = value1.slice(0,-3);
document.getElementById("show1").value =showtrim1;
document.getElementById("hide1").value =hidetrim1;

var value2 = document.getElementById("cal2").value;
var showtrim2 = value2.slice(5);
var hidetrim2 = value2.slice(0,-3);
document.getElementById("show2").value =showtrim2;
document.getElementById("hide2").value =hidetrim2;

var value3 = document.getElementById("cal3").value;
var showtrim3 = value3.slice(5);
var hidetrim3 = value3.slice(0,-3);
document.getElementById("show3").value =showtrim3;
document.getElementById("hide3").value =hidetrim3;
}


<!--配列カレンダー-->
$(function() {
$.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
    $('#cal1').datepicker({
minDate: '7d', //Xから
maxDate: '+5y', //5年後までが選択可能範囲
dateFormat: 'yy/mm/dd(D)' //年-月-日(曜日)

});
});

$(function() {
$.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
    $('#cal2').datepicker({
minDate: '7d', //Xから
maxDate: '+5y', //5年後までが選択可能範囲
dateFormat: 'yy/mm/dd(D)' //年-月-日(曜日)
});
});

$(function() {
$.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
    $('#cal3').datepicker({
minDate: '7d', //Xから
maxDate: '+5y', //5年後までが選択可能範囲
dateFormat: 'yy/mm/dd(D)' //年-月-日(曜日)
});
});
</script>




</body>
</html>