Ad

Populate Dropdown Selects In Angularjs

Im developing my app and I want the dropdown value to have the same value as of the selected date in the datepicker automatically. Im using angularjs and I can't find enough source that can specifically answer my problem tho..thank you

here is a bit of the code. My whole code is on plunker

    script type="text/ng-template" id="custom-datepicker.html">
    <div class="form-inline enhanced-datepicker">
        <label>
            <input
                type="text"
                id="{{id}}"
                name="{{name}}"
                ng-model="ngModel"
                datepicker-popup="{{popup}}"
                datepicker-options="{{options}}"
                date-disabled="{{dateDisabled}}"
                min="{{min}}"
                max="{{max}}"
                open="opened"
                ng-pattern="/^(?:[1-9]|1\d|2\d|3[0-1]) (?:jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec) (?:1|2)(?:\d{3})$/gim"/>

        <span class="input-group-btn">
                <button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>

        </label>
    </div>
                </script>
      <script>

  angular
    .module('App',['ui.bootstrap'])
    .directive('customDatepicker',function($compile,$timeout){
        return {
            replace:true,
            templateUrl:'custom-datepicker.html',
            scope: {
                ngModel: '=',
                dateOptions: '@',
                dateDisabled: '@',
                opened: '=',
                min: '@',
                max: '@',
                popup: '@',
                options: '@',
                name: '@',
                id: '@'
            },
            link: function($scope, $element, $attrs, $controller){

            }    
        };
    })

here is the plunker link: http://plnkr.co/edit/4XRjszIATgvUVrofgRFI?p=preview

enter image description here

Ad

Answer

From what I see your plunker is now working, but not properly, since for example in the month dropdown, a new value will be added, so you'll have two Dec values, and the day dropdown is not clickable. The question is, do you need them to be clickable, and if so, should the datepicker date update on the dropdowns change? I would try binding the selects to a scope variable that would get parsed into proper day, month and year values on datepicker change. I wanted to show you in your plunker, but with everything in the html file, sorry...

Ad
source: stackoverflow.com
Ad