Day, month and year clone in to one with MomentJS

Question

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>

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 — Muhammed, Commented Feb 18, 2016 at 8:25
I didn't downvote but why don't you read the comments on the issue and follow the advice there? — RobH, Commented Feb 18, 2016 at 8:54
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. — ferada, Commented Feb 18, 2016 at 16:26

Joseph · Accepted Answer · 2016-02-21 22:16:24Z

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.

Stack Exchange Network

Day, month and year clone in to one with MomentJS

1 Answer 1

Your Answer

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

Hot Network Questions

Day, month and year clone in to one with MomentJS

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

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

Related

Hot Network Questions

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