javascript - Setting date input value with moment not working

I have a modal with a date input that's appended to the body. I then set the value of the input using moment.js and proper format, from my understanding its year-month-day. Yet the value is empty. Is this because the input is being created via js? or is the format I'm using with moment wrong? Thanks in advance.

$("body").append("<div class='overlay'></div>");
$("body").append("<div class='modal'></div>");
$(".modal").append("<input id='dateJump' type='date' >");
$("#dateJump").value = moment().format('YYYY-MM-DD');

body {
height: 600px;
}
.modal {
    width:80%;
    height: 40px;
    z-index: 10;
    position: fixed;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
    background-color:white;
}
.overlay {
    width:100%;
    height: 100%;
    z-index: 9;
    position: fixed;
    top: 0;
    left:0;
    background-color: rgba(0,0,0,0.5);
}
.modal input {
    -webkit-appearance: none;
    border-radius:none;
    display:block;
    width: 100%;
    height: 40px;
}
input[type="date"],
select:focus {
  font-size: 16px;
  border: none; 
  border-radius: none;
  padding: 1em;
  vertical-align: center;
  text-align: center;
}

<script src=".1.1/jquery.min.js"></script>
<script src=".js/2.18.1/moment.min.js"></script>
<body>

</body>

$("body").append("<div class='overlay'></div>");
$("body").append("<div class='modal'></div>");
$(".modal").append("<input id='dateJump' type='date' >");
$("#dateJump").value = moment().format('YYYY-MM-DD');

body {
height: 600px;
}
.modal {
    width:80%;
    height: 40px;
    z-index: 10;
    position: fixed;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
    background-color:white;
}
.overlay {
    width:100%;
    height: 100%;
    z-index: 9;
    position: fixed;
    top: 0;
    left:0;
    background-color: rgba(0,0,0,0.5);
}
.modal input {
    -webkit-appearance: none;
    border-radius:none;
    display:block;
    width: 100%;
    height: 40px;
}
input[type="date"],
select:focus {
  font-size: 16px;
  border: none; 
  border-radius: none;
  padding: 1em;
  vertical-align: center;
  text-align: center;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<body>

</body>

Share Improve this question asked Nov 5, 2018 at 0:30 Austin Jones 7092 gold badges14 silver badges29 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 6

This works for me. Edit: As you mentioned below you were mixing up jQuery and vanilla JS.

$(document).ready(()=>{
    $("body").append("<div class='overlay'></div>");
    $("body").append("<div class='modal'></div>");
    $(".modal").append("<input id='dateJump' type='date' >");
    $("#dateJump").val(moment().format('YYYY-MM-DD'))   

})

I achieved this using jquery and moment.js

let today = moment().format('yyyy-MM-DD');
$('#date').val(today);

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>




<div class="form-group">
<label><strong>Date</strong></label>
<input type="date" class="form-control form-control-sm" id="date" name="date">
</div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Setting date input value with moment not working - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)