CODEWITHSUNDEEP
javascripttwitter-bootstrapfirefoxmomentjsbootstrap-datepicker
TDG
TDG

Reputation: 1302

Bootstrap datepicker + momentJS - Firefox "Invalid date"

I used bootstrap datepicker with moment.js.

Same method works fine on Chrome browser. On Firefox, it shows Invalid date.

If I change format to dateFormat, it works in Firefox. It changes date value to MM/DD/YYYY format. But, I need to display dd-MM-YYYY format in input field.

Please let me know what I missed out in the code that is causing Firefox not to work

Here my javascript code:

JS:

$('.pickerdate').datepicker({
   startDate: today,
   format: 'dd-mmm-yyyy',
   orientation: 'bottom',
   autoclose: true,
   endDate: "+1y"
});

var $returnDate = moment($('.pickerdate').val()).format('YYYYMMDDhhmm');

Upvotes: 0

Views: 1902

Answers (1)

VincenzoC
VincenzoC

Reputation: 31482

You get Invalid date on firefox because you are trying to parse a string that it's not in ISO 8601 format. As momentjs parsing docs says:

Warning: Browser support for parsing strings is inconsistent. Because there is no specification on which formats should be supported, what works in some browsers will not work in other browsers.

For consistent results parsing anything other than ISO 8601 strings, you should use String + Format.

So you have to use moment(String, String);. In your case:

moment($('.pickerdate').val(), 'DD-MM-YYYY')

Anyway note that you can use the getDate method to get datepicker's value. As the docs states, it

Returns a localized date object representing the internal date object of the first datepicker in the selection

Here a working example that shows how to get the date from the picker (and print it to console in your custom format with moment) using both datepicker's getDate and moment parsing with format. I suggest to use the getDate version.

var today = moment().toDate();
$('.pickerdate').datepicker({
   startDate: today,
   format: 'dd-M-yyyy',
   orientation: 'bottom',
   autoclose: true,
   endDate: "+1y"
});

$('#btn1').click(function(){
  var date = $('.pickerdate').datepicker('getDate');
  if( !date ) return;
  var $returnDate = moment(date).format('YYYYMMDDhhmm');
  console.log($returnDate);
});
$('#btn2').click(function(){
  var val = $('.pickerdate').val();
  if( !val ) return;
  var $returnDate = moment(val, 'DD-MMM-YYYY').format('YYYYMMDDhhmm');
  console.log($returnDate);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

<input type="text" class="form-control pickerdate">
<button id="btn1" type="button" class="btn btn-primary">Get date picker</button>
<button id="btn2" type="button" class="btn btn-primary">Get date moment</button>

Please note that bootstrap datepicker and momentjs use different format tokens. My example uses 2-digit month number, if you need to use abbreviated and full month names use:

Upvotes: 1

Related Questions