How to set input date and time angular-moment-picker editable false to prevent the user to enter a text and set icon to pick the date and time

Question

I am using angular-moment-picker input for datetimepicker, and I want to set the input editable false to prevent the user to enter a text and to attach a button to this input where the user can click to pop up the picker date and time. Is there any solution in angular-moment to solve my issue. I spent a lot of time checking angular-moment-picker-doc but I didn't find a solution.

Here is my source code:

<input class="form-control"
                       format="DD/MM/YYYY HH:mm"
                       ng-model-options="{ updateOn: 'blur' }"
                       moment-picker="startDate"
                       id="startDate"
                       ng-model="startDate"> 

can you please help me. Thank you

Answer 1

You can add moment picker anywhere (any element) and remove your updateOn option in ng-model-options. Here is the working fiddle

<form class="form-horizontal">
    <div class="form-group">
        <p class="icon-group input-group">
            <input readonly ng-model="ctrl.startDate" class="form-control">
            <span class="input-group-btn">
                <button moment-picker="ctrl.startDate" 
                    format="DD/MM/YYYY HH:mm"
                    start-view="day"
                    change="ctrl.setFormattedDate(newValue)"
                    type="button" class="btn btn-default">
                    <i aria-hidden="true" class="glyphicon glyphicon-calendar"></i>
                </button>
            </span>
        </p>
    </div>
</form>

You can group your icon and input box by using bootstrap's default css class or you can write your own css to combine your input box and icon which opens moment date picker