bootstrap datepicker issue

[sunil233]

HI. I have created a custom control using bootstrap datepicker.Iam able to display calender and save the value in DB.Iam able to get the value from the DB also.But iam not able to bind the date value from Database to datepicker

[mmaask]

Can you show your template code and also the new field added into the angular-form-gen.js file, where you assigned it to category?

[sunil233]

HI Vaelyr,

Pleas find the Template code below

"

<label class="input-group" for="{{ctrlid}}">
    <input type="text"
           class="form-control"
           id="{{ctrlid}}"
           datepicker-popup="{{format}}"
           ng-model="model"
           is-open="opened"
           datepicker-options="dateOptions"
           ng-required="field.schema.validation.required"
           close-text="Close" />
    <span class="input-group-btn">
        <button type="button"
                class="btn btn-default"
                ng-click="open($event)">
            <i class="glyphicon glyphicon-calendar"></i>
        </button>
    </span>
</label>

"

and the directive js

fg.directive('fgDatepicker', function () { return { restrict: 'A', scope: { model: "=", format: "@", options: "=datepickerOptions", ctrlid: "@" }, controller: ['$scope', function ($scope) { $scope.model = ''; }], templateUrl: 'angular-form-gen/field-templates/default/datepickertpl.ng.html', link: function (scope, element) { scope.popupOpen = false; scope.openPopup = function ($event) { $event.preventDefault(); $event.stopPropagation(); scope.popupOpen = true; }; scope.dateOptions = { formatYear: 'yy', startingDay: 1 };

        scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
        scope.format = scope.formats[0];
        scope.open = function ($event) {
            $event.preventDefault();
            $event.stopPropagation();
            scope.opened = true;
        };

    }
};

});

[mmaask]

I don't suggest you writing your own directive for that, defining new templates requires just adding 2 new files in this case and adding the new field corresponding the file name to the categories array.

I personally used https://github.com/dangrossman/bootstrap-daterangepicker, just added as dependency and defined new template and properties file, then just added it to the available form fields. My solution:

field-templates/default/datepicker.ng.html

<input date-range-picker fg-field-input fg-update-pattern class="date-picker"
       options="{ 'singleDatePicker': true }"
       type="text"
       ng-model="form.data[field.schema.name]"
       id="{{ field.$_id }}"
       tabindex="{{ tabIndex }}"
       ng-required="field.schema.validation.required"/>

field-templates/properties/datepicker.ng.html

<div fg-tabs-pane="Properties">
  <div fg-property-field-common="{ displayname: true, tooltip: true }"></div>

  <div fg-property-field-value>
    <input date-range-picker fg-update-pattern
           options="{ 'singleDatePicker': true }"
           type="text"
           class="form-control"
           name="fieldValue"
           ng-model="field.value"/>
  </div>
</div>
<div fg-tabs-pane="Validation">
  <div fg-property-field-validation="{ required: true }"></div>
</div>

angular-form-gen.js

caretogries array:

new FgField('datepicker', { value: { startDate: new Date() } })

Hope it helps