public Startup(IConfiguration configuration)
{
Configuration = configuration;
CultureInfo newCulture = (CultureInfo)System.Threading.Thread.CurrentThread.CurrentCulture.Clone();
newCulture.DateTimeFormat.ShortDatePattern = "dd/MM/yyyy";
newCulture.DateTimeFormat.DateSeparator = "/";
Thread.CurrentThread.CurrentCulture = newCulture;
} |
@model CoreEJ2.Controllers.HomeController.DateValue
<form method="post">
<h5> ** While changing the value in first DatePicker, increasing value of next weeks (7 days) will be set as other DatePicker's value **</h5>
<div>
<ejs-datepicker id="datepicker1" width="275px" cssClass="spacing" change="valueChange" value="Model.Value"></ejs-datepicker>
</div>
<div>
<ejs-datepicker id="datepicker2" width="275px" cssClass="spacing"></ejs-datepicker>
</div>
<div>
<ejs-datepicker id="datepicker3" width="275px" cssClass="spacing"></ejs-datepicker>
</div>
<div>
<ejs-datepicker id="datepicker4" width="275px" cssClass="spacing"></ejs-datepicker>
</div>
<div>
<ejs-datepicker id="datepicker5" width="275px" cssClass="spacing"></ejs-datepicker>
</div>
</form>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Once the document is loaded, we will dynamically update the value of the other DatePicker's value based on the first DatePicker's value.
valueChange();
}, false);
function valueChange(args) {
//Change event of first DatePicker to dynamically update the value of the other DatePicker's value based on the first DatePicker's value.
if (args == null) {
valueObject = document.getElementsByClassName('e-datepicker')[0].ej2_instances[0].value;
} else {
valueObject = args.value;
}
if (valueObject != null) {
var value = [];
for (var i = 0; i < document.getElementsByClassName('e-datepicker').length; i++) {
if (value.length == 0) {
value.push(valueObject)
} else {
value.push(new Date(new Date(value[i - 1]).setDate(value[i - 1].getDate() + 7)));
document.getElementsByClassName('e-datepicker')[i].ej2_instances[0].value = value[i];
}
}
}
}
</script>
<style>
.spacing {
margin: 10px 0;
}
h5 {
color:forestgreen;
}
</style>
|