Base solution for your next web application
Open Closed

DatePicker in one of the cshtml views #94


User avatar
0
paul lee created

Hi All,

I am new to ASP.NET MVC and Single Page Application, I am trying to develop a SPA for managing member's information.

At the moment I am trying to add a new View for typing in the Member's Personal Info and needed a field for Date Of Birth, the field can either be a formatted TextBox or a DatePicker.

Here is what I have got so far in the cshtml:

<div ng-controller="coa.views.people.new as vm">
  <form id="NewPersonForm" role="form" name="newPersonForm" novalidate>
    <div class="form-group">
      <label for="MemberId">@L("MemberIdDescription")</label>
      <text id="MemberId" ng-model="vm.person.memberId" class="form-control"></text>
    </div>
    <div class="form-group">
      <label for="ChiSurname">@L("ChineseSurnameDescription")</label>
      <text id="ChiSurname" ng-model="vm.person.chiSurname" class="form-control" required></text>
    </div>
    <div class="form-group">
      <label for="ChiOtherNames">@L("ChineseOtherNamesDescription")</label>
      <text id="ChiOtherNames" ng-model="vm.person.chiOtherNames" class="form-control" required></text>
    </div>
    <div class="form-group">
      <label for="EngSurname">@L("EnglishSurnameDescription")</label>
      <text id="EngSurname" ng-model="vm.person.engSurname" class="form-control" required></text>
    </div>
    <div class="form-group">
      <label for="EngOtherNames">@L("EnglishOtherNamesDescription")</label>
      <text id="EngOtherNames" ng-model="vm.person.engOtherNames" class="form-control" required></text>
    </div>
    <div class="form-group">
      <label for="Alias">@L("AliasDescription")</label>
      <text id="Alias" ng-model="vm.person.alias" class="form-control"></text>
    </div>
    <div class="form-group">
      <label for="DateOfBirth">@L("DateOfBirthDescription")</label>
      <text id="DateOfBirth" ng-model="vm.person.dob" class="form-control" required></text>
    </div>
  </form> 
</div>

I am not sure what tag to use for Formatted TextBox or DatePicker, most of the examples from Google searches on Razor / cshtml seems to use the native Razor markups so I am not sure what to use here.

Please Help!

Thank you very much.

Paul


1 Answer(s)
  • User Avatar
    0
    hikalkan created
    Support Team

    Hi,

    This topic is not related to ASP.NET Boilerplate actually. You can use any datetimepicker here. Don't mind razor thing on SPAs. It's just a beauty of ASP.NET Boilerplate to use razor in views. We could use plain .html files. You can use angular-ui datepicker for example: <a class="postlink" href="https://angular-ui.github.io/bootstrap/#/datepicker">https://angular-ui.github.io/bootstrap/#/datepicker</a> or even you can use jQuery based date pickers.