Base solution for your next web application
Open Closed

Bind to BootStrap DateTime Advanced Picker or retrieve value #2969

User avatar
0
nlshcc98765 created

Currently trying to implement the BootStrap DateTime Advanced picker. I have it populating from my DTO and it looks great on the screen. I'm having trouble retrieving the value from it on postback.

<div class="form-group form-md-line-input form-md-floating-label no-hint">
          <div class="input-group date form_datetime" data-date="@Model.Punch.punchDateTime" data-date-format="m/d/yyyy H:ii P" data-link-field="dtp_input1">
                        <input class="form-control" size="8" type="text" value="@Model.Punch.punchDateTime" readonly>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                        <label>@L("punchDateTime")</label>
          </div>
                    <input type="hidden" id="dtp_input1" value="@Model.Punch.punchDateTime" /><br />
 </div>

What is the best method for doing this? All other properties that can be changed on the EditModal are being returned (Mapped) to the object and look good.

Using MVC.

Thanks

Go to accepted answer
4 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    I think you need to set data-link-format for your link field. You can use "yyyy-mm-ddThh:ii".

    Thanks.

  • User Avatar
    0
    nlshcc98765 created

    Does the format need to be that due to JSON/AJAX ? Or can I use a different format such as m/d/yyyy h:ii tt

    I tried both (your format and mine) and also adding the data-link-format to the link field with no luck. Is there an example out there somewhere that works I could review?

    I'm wondering if this method will use binding to push the new value back to Model.Punch.punchDateTime or will I need to use some retrieval logic in the _EditPunchModal.js after var punch = _$punchForm.serializeFormToObject(); ?

  • User Avatar
    0
    nlshcc98765 created

    Ok, so I got this to work using the same solution found here: [https://forum.aspnetboilerplate.com/viewtopic.php?f=5&t=2342&start=10])

    I have to place it at the end of the file, not in the init.

    (function ($) {
    app.modals.EditPunchModal = function () {

        var _punchesService = abp.services.app.punch;

        var _modalManager;
        var _$punchForm = null;
        var punchdatetime = null;

        this.init = function (modalManager) {
            _modalManager = modalManager;

            _$punchForm = _modalManager.getModal().find('form[name=PunchForm]');
            _$punchForm.validate();                  
           
            this.save = function () {
                if (!_$punchForm.valid()) {
                    return;
                }
                
                var punch = _$punchForm.serializeFormToObject();

                _modalManager.setBusy(true);       

                _punchesService.updatePunch({
                    punch: punch
                }).done(function () {
                    abp.notify.info(app.localize('SavedSuccessfully'));
                    _modalManager.close();
                    abp.event.trigger('app.editPunchModalSaved');
                }).always(function () {
                    _modalManager.setBusy(false);
                });

            };
        };
    };

   $('#datepicker').datetimepicker();
})(jQuery);
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Thanks for your feedback :).

Assignee
No one
Labels
Non yet