5
\$\begingroup\$

There are two methods I am using here for merging day, month and year.

First one

$scope.firstOption = moment(new Date($scope.register.db.day + ' ' + $scope.register.db.month + ' ' + $scope.register.db.year));

Second One

$scope.secondOption = moment($scope.register.db.day + $scope.register.db.month + $scope.register.db.year).format('MMMM Do YYYY');

Unfortunately, there is a warning in the console which says:

Deprecation warning: moment construction falls back to js Date. This is discouraged and will be removed in upcoming major release. Please refer to https://github.com/moment/moment/issues/1407 for more info. Arguments: [object Object]

Is there any best practice to clone those three fields?

Demo

angular.module('myApp', ['angularMoment']).controller('registerCtrl', function($scope, moment) {
  console.log(moment('12-12-2020', 'DD-MM-YYYY').isValid());
  $scope.registerMe = function(argument) {
    $scope.firstOption = moment(new Date($scope.register.db.day + ' ' + $scope.register.db.month + ' ' + $scope.register.db.year));
    console.log($scope.kooy);
    $scope.secondOption = moment($scope.register.db.day + $scope.register.db.month + $scope.register.db.year).format('MMMM Do YYYY');
    console.log($scope.keey);

  };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/0.10.3/angular-moment.min.js"></script>
<div class="container" ng-app="myApp" ng-controller="registerCtrl">
  <div class="row">
    <div class="col-sm-12 bg-primary">
      <h4 class="text-center">Register your appointment</h4>
    </div>
    <div class="col-sm-12">
      <form class="form-horizontal" ng-submit="registerMe()">
        <div class="form-group">
          <label class="col-sm-2 col-md-3 control-label">Name</label>
          <div class="col-sm-10 col-md-6">
            <input type="text" class="form-control" placeholder="Name" ng-model="register.name">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 col-md-3 control-label">Date of birth</label>
          <div class="col-sm-10 col-md-6">
            <div class="row">
              <div class="col-xs-3">
                <select class="form-control" ng-model="register.db.day">
                  <option value="" disabled selected hidden>Day</option>
                  <option value="01">01</option>
                  <option value="02">02</option>
                  <option value="03">03</option>
                  <option value="04">04</option>
                  <option value="05">05</option>
                  <option value="06">06</option>
                  <option value="07">07</option>
                  <option value="08">08</option>
                  <option value="09">09</option>
                  <option value="10">10</option>
                  <option value="11">11</option>
                  <option value="12">12</option>
                  <option value="13">13</option>
                  <option value="14">14</option>
                  <option value="15">15</option>
                  <option value="16">16</option>
                  <option value="17">17</option>
                  <option value="18">18</option>
                  <option value="19">19</option>
                  <option value="20">20</option>
                  <option value="21">21</option>
                  <option value="22">22</option>
                  <option value="23">23</option>
                  <option value="24">24</option>
                  <option value="25">25</option>
                  <option value="26">26</option>
                  <option value="27">27</option>
                  <option value="28">28</option>
                  <option value="29">29</option>
                  <option value="30">30</option>
                  <option value="31">31</option>
                </select>
              </div>
              <div class="col-xs-5">
                <select class="form-control" ng-model="register.db.month">
                  <option value="" disabled selected hidden>Month</option>
                  <option value="january">January</option>
                  <option value="february">February</option>
                  <option value="march">March</option>
                  <option value="april">April</option>
                  <option value="may">May</option>
                  <option value="june">June</option>
                  <option value="july">July</option>
                  <option value="august">August</option>
                  <option value="september">September</option>
                  <option value="october">October</option>
                  <option value="november">November</option>
                  <option value="december">December</option>
                </select>
              </div>
              <div class="col-xs-4">
                <select class="form-control" ng-model="register.db.year">
                  <option value="" disabled selected hidden>Year</option>
                  <option value="1901">1901</option>
                  <option value="1902">1902</option>
                  <option value="1903">1903</option>
                  <option value="1904">1904</option>
                  <option value="1905">1905</option>
                  <option value="1906">1906</option>
                  <option value="1907">1907</option>
                  <option value="1908">1908</option>
                  <option value="1909">1909</option>
                  <option value="1910">1910</option>
                  <option value="1911">1911</option>
                  <option value="1912">1912</option>
                  <option value="1913">1913</option>
                  <option value="1914">1914</option>
                  <option value="1915">1915</option>
                  <option value="1916">1916</option>
                  <option value="1917">1917</option>
                  <option value="1918">1918</option>
                  <option value="1919">1919</option>
                  <option value="1920">1920</option>
                  <option value="1921">1921</option>
                  <option value="1922">1922</option>
                  <option value="1923">1923</option>
                  <option value="1924">1924</option>
                  <option value="1925">1925</option>
                  <option value="1926">1926</option>
                  <option value="1927">1927</option>
                  <option value="1928">1928</option>
                  <option value="1929">1929</option>
                  <option value="1930">1930</option>
                  <option value="1931">1931</option>
                  <option value="1932">1932</option>
                  <option value="1933">1933</option>
                  <option value="1934">1934</option>
                  <option value="1935">1935</option>
                  <option value="1936">1936</option>
                  <option value="1937">1937</option>
                  <option value="1938">1938</option>
                  <option value="1939">1939</option>
                  <option value="1940">1940</option>
                  <option value="1941">1941</option>
                  <option value="1942">1942</option>
                  <option value="1943">1943</option>
                  <option value="1944">1944</option>
                  <option value="1945">1945</option>
                  <option value="1946">1946</option>
                  <option value="1947">1947</option>
                  <option value="1948">1948</option>
                  <option value="1949">1949</option>
                  <option value="1950">1950</option>
                  <option value="1951">1951</option>
                  <option value="1952">1952</option>
                  <option value="1953">1953</option>
                  <option value="1954">1954</option>
                  <option value="1955">1955</option>
                  <option value="1956">1956</option>
                  <option value="1957">1957</option>
                  <option value="1958">1958</option>
                  <option value="1959">1959</option>
                  <option value="1960">1960</option>
                  <option value="1961">1961</option>
                  <option value="1962">1962</option>
                  <option value="1963">1963</option>
                  <option value="1964">1964</option>
                  <option value="1965">1965</option>
                  <option value="1966">1966</option>
                  <option value="1967">1967</option>
                  <option value="1968">1968</option>
                  <option value="1969">1969</option>
                  <option value="1970">1970</option>
                  <option value="1971">1971</option>
                  <option value="1972">1972</option>
                  <option value="1973">1973</option>
                  <option value="1974">1974</option>
                  <option value="1975">1975</option>
                  <option value="1976">1976</option>
                  <option value="1977">1977</option>
                  <option value="1978">1978</option>
                  <option value="1979">1979</option>
                  <option value="1980">1980</option>
                  <option value="1981">1981</option>
                  <option value="1982">1982</option>
                  <option value="1983">1983</option>
                  <option value="1984">1984</option>
                  <option value="1985">1985</option>
                  <option value="1986">1986</option>
                  <option value="1987">1987</option>
                  <option value="1988">1988</option>
                  <option value="1989">1989</option>
                  <option value="1990">1990</option>
                  <option value="1991">1991</option>
                  <option value="1992">1992</option>
                  <option value="1993">1993</option>
                  <option value="1994">1994</option>
                  <option value="1995">1995</option>
                  <option value="1996">1996</option>
                  <option value="1997">1997</option>
                  <option value="1998">1998</option>
                  <option value="1999">1999</option>
                  <option value="2001">2001</option>
                  <option value="2002">2002</option>
                  <option value="2003">2003</option>
                  <option value="2004">2004</option>
                  <option value="2005">2005</option>
                  <option value="2006">2006</option>
                  <option value="2007">2007</option>
                  <option value="2008">2008</option>
                  <option value="2009">2009</option>
                  <option value="2010">2010</option>
                  <option value="2011">2011</option>
                  <option value="2012">2012</option>
                  <option value="2013">2013</option>
                  <option value="2014">2014</option>
                  <option value="2015">2015</option>
                  <option value="2016">2016</option>
                  <option value="2017">2017</option>
                </select>
              </div>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 col-md-3 control-label">Mobile</label>
          <div class="col-sm-10 col-md-6">
            <input type="text" class="form-control" placeholder="Mobile" ng-model="register.mobile">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 col-md-3 control-label">Email</label>
          <div class="col-sm-10 col-md-6">
            <input type="email" class="form-control" placeholder="Email" ng-model="register.email">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 col-md-3 control-label">City</label>
          <div class="col-sm-10 col-md-6">
            <input type="text" class="form-control" placeholder="City" ng-model="register.city">
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10 col-md-6">
            <button type="submit" class="btn btn-default">Submit</button>
          </div>
        </div>
      </form>
    </div>
    <div class="col-sm12">
      <!-- <span am-time-ago=" register.db.year | amFromUnix"></span> -->
      <!-- <p am-time-ago="1980">{{ '1986' | amStartOf:'year' }}</p> -->
    </div>
    <div class="col-sm-12"><pre>{{ register | json}}</pre>
    </div>
    <div class="col-sm-12"><pre>{{firstOption | json}}</pre>
    </div>
    <div class="col-sm-12"><pre>{{secondOption | json}}</pre>
    </div>
  </div>

</div>

\$\endgroup\$
  • \$\begingroup\$ I don't understand why somebody doing down vote 😱 there is nothing wrong on the code I just need to review my code for best practice \$\endgroup\$ – Muhammed Feb 18 '16 at 8:25
  • 1
    \$\begingroup\$ I didn't downvote but why don't you read the comments on the issue and follow the advice there? \$\endgroup\$ – RobH Feb 18 '16 at 8:54
  • \$\begingroup\$ @RobH I said somebody, not you mate. \$\endgroup\$ – Muhammed Feb 18 '16 at 8:56
  • \$\begingroup\$ Apart from the linked docs the repetition of years and days of a month is standing out. You're already using JavaScript, so you might as well generate that at runtime instead of writing out HTML. \$\endgroup\$ – ferada Feb 18 '16 at 16:26
2
\$\begingroup\$

All that fuss only meant: Moment will soon only parse ISO date strings. To parse arbitrary date strings reliably, you will need to describe the format via the second argument of the moment function. That's it.

$scope.date = moment($scope.register.db.day + $scope.register.db.month + $scope.register.db.year, 'DD MMMM YYYY');

Also, consider breaking out that string into variables and consider using template strings to assemble the date string:

let day = $scope.register.db.day;
let month = $scope.register.db.month;
let year = $scope.register.db.year;

$scope.date = moment(`${day} ${month} ${year}`, 'DD MM YYYY');

Aside from that, consider creating the dates, months and years selection in JS and just loop through it in the template.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.