howto use ui.bootstrap.datepickerPopup with html form

Question

I'm using ui.bootstrap.datepickerPopup with angular forms, but i also want to use it with ASP.Net html forms. If i use an MVC EditorTemplate as below

//Date.cshtml
@{ 
        var prop = ViewData.ModelMetadata.PropertyName;
        var required = ViewData.ModelMetadata.IsRequired;
<p class="input-group"  >
    <input type="text" uib-datepicker-popup="dd/MM/yyyy" id="@prop" name="@prop" ng-model="@prop" @required class="form-control" ng-required="true" is-open="@(prop)Open"  init-date="new Date()"  value="@ViewData.Model"/>
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="@(prop)Open = !@(prop)Open"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
</p>
    }

I can select a date and it correctly posts. However when i try and edit a form with an existing Date value, i cannot get it to pre populate the date. Can the init-date be passed inline? I've tried to test this in a plunkr here. http://plnkr.co/edit/glVfsqNVst11IxRvF3tJ?p=preview

Sampath · Accepted Answer · 2016-04-24 18:36:43Z

1

You have to set it through datepicker-options as shown below.

<input type="text" uib-datepicker-popup="dd/MM/yyyy" id="@prop" name="@prop" ng-
model="@prop" @required class="form-control" ng-required="true" is-
open="@(prop)Open"  datepicker-options="{minDate:'@ViewData.DateOptions'}"  value="@ViewData.Model"/>

edited Apr 24, 2016 at 18:36

answered Apr 24, 2016 at 17:51

Sampath

66.2k70 gold badges327 silver badges461 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Tim Over a year ago

I tried using datepicker-options="{initDate: '2015-04-20'}" to test or in razor datepicker-options="{initDate: '@ViewData.Model'}" and it didn't seem to work

Sampath Over a year ago

Use minDate: new Date(), instead.

Tim Over a year ago

If i try minDate i get angular.js:13424 Error: [$parse:syntax] Syntax Error: Token 'Date' is unexpected, expecting [}] at column 15 of the expression [{minDate: new Date('19/01/2016')}] starting at [Date('19/01/2016')}

Tim Over a year ago

and if it worked wouldnt it restrict my starting date?

Sampath Over a year ago

It defines the minimum available date and requires a Javascript Date object.

|

sireken · Accepted Answer · 2016-04-24 17:46:45Z

try this instead ... bootstrap 3 datepicker version 4. You can set the default value as well

https://eonasdan.github.io/bootstrap-datetimepicker/

code snippets from the site ...

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker5'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker5').datetimepicker({
                    defaultDate: "11/1/2013",
                    disabledDates: [
                        moment("12/25/2013"),
                        new Date(2013, 11 - 1, 21),
                        "11/22/2013 00:53"
                    ]
                });
            });
        </script>
    </div>
</div>

datepicker init has a bug... see this forum.. https://github.com/angular-ui/bootstrap/issues/2331

Collectives™ on Stack Overflow

howto use ui.bootstrap.datepickerPopup with html form

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related