Bdtjtk

I need to update the expiration date based on the action by the user. I want to handle this in the javascript if possible instead of sending a hidden field back to the controller.

In the model I have two dates.

    [DataType(DataType.Date)]

    public DateTime ExpirationDate { get; set; }



    [DataType(DataType.Date)]

    public DateTime LastUpdatedDate { get; set; }

In the form, I show the current expiration date and this drop down select box

                <div class="controls col-md-6">

                    <label for="selExpirationPeriod">Select the expiration period</label>

                </div>

                <div class="controls col-md-6">

                    <select id="selExpirationPeriod" class="form-control">

                        <option value=30>30 days</option>

                        <option value=90>90 days</option>

                        <option value=182>Half year</option>

                        <option value=365 selected>Year</option>

                    </select>

                </div>

The goal is to update the expiration date with the period chosen.

I have this routine where I want to make the change, on clicking the Update button.

function updateModel() {



    alert($('#ExpirationDate'));

    return true;

}

Instead of showing the expiration date, it shows "[object Object]"

I need something like

model.ExpirationDate = DateTime.Today + $selExpirationPeriod.value

I don't know how to access any of those three from javascript.

Summary: ExpirationDate is a property of the model which will be persisted in the database after it gets back to the server. I'd prefer to handle the calculation in the client if I can, just because I don't know how. It seems like it ought to be simple and I ought to learn it.

Update

Resolved. I had to add the hidden field so I could send the value back. As display only, it doesn't get returned.

        <div class="control-group">

            <div class="controls col-md-6">

                @Html.HiddenFor(cm => cm.ExpirationDate, new { id = "ExpirationDate" }) @*hidden input so that POST will send the data back*@

                @Html.LabelFor(cm => cm.ExpirationDate)

                @Html.DisplayFor(cm => cm.ExpirationDate, new { @class = "form-control" })

            </div>

        </div>

Then I had to update the field from the routine.

    document.getElementById("ExpirationDate").value = expireDate;

I think you wand calculate the expire date based on user selection of selExpirationPeriod and from what you want something like model.ExpirationDate = DateTime.Today + $selExpirationPeriod.value you should add that days number to your date

I have provided pure JavaScript extension named addDaysToDate() to add day number to DateTime.Now as sample you can improve it, any way in expBtn click you have expireDate you can pass it to server by that Ajax.

Date.prototype.addDaysToDate = function(days) { 

    var date = new Date(this.valueOf());

    date.setDate(date.getDate() + days);

    return date;

}  

var expBtn = document.getElementById('makeExpDate');

expBtn.addEventListener("click",function(e){

   var option = document.getElementById("selExpirationPeriod");

   var selectedDay = option.options[option.selectedIndex].value;

   var date = new Date(); 

   var expireDate = date.addDaysToDate(selectedDay);

   alert(expireDate);

},false);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="controls col-md-6">

    <label for="selExpirationPeriod">Select the expiration period</label>

    </div>

    <div class="controls col-md-6">

    <select id="selExpirationPeriod" class="form-control">

      <option value=30>30 days</option>

      <option value=90>90 days</option>

      <option value=182>Half year</option>

      <option value=365 selected>Year</option>

     </select>

</div>

<button id='makeExpDate'>Expire Date</button>

You are not able to update server side property on client side. you have to make an ajax call to update Expiration date field or etc.

The final routine looked like this:

Date.prototype.addDaysToDate = function (days) {

    var date = new Date(this.valueOf());

    date.setDate(date.getDate() + (days * 1)); // coerce days to be an int

    return date;

}

function updateModel() {

    var option = document.getElementById("selExpirationPeriod");

    var selectedDay = option.options[option.selectedIndex].value;

    var date = new Date();

    date.setHours(0, 0, 0, 0);   // remove the time portion



    var expireDate = date.addDaysToDate(selectedDay);

    document.getElementById("ExpirationDate").value = expireDate;

    return true;

}