Search code examples
javascriptdatepickermomentjspikaday

Invalid Date using moment.js and Pikaday


Im trying to pass a user selected date using Pikaday into a variable to be processed in a form using the following javascript, but my page is returning "Invalid Date".

<script src="moment.js"></script>
<script src="pikaday.js"></script>

<script>
var picker = new Pikaday({
  field: document.getElementById('datepicker'), 
  firstDay: 1,
  minDate: moment().add({days: 20}).toDate(),
  disableDayFn: function(date){// Disable Monday 
    return date.getDay() === 0 || date.getDay() === 6;
  },
  onSelect: function(date) {
    field.value = moment(picker.toString()).format("MM/DD/YY");
  }
});

var selecteddate =  moment(picker.toString()).format("MM/DD/YY");
</script>

Can anyone see what I'm doing wrong here?


Solution

  • You put a new option "format" and change "onSelect":

    Example

    <html>
    <head>
        <script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>
        <script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/pikaday.js"></script>
    </head>
    <body>
    
    
        <div>
    
            <input type="text" id="datepicker">
    <input type="text" id="datepicker2">
    
        </div>
    
    <script>
    var picker = new Pikaday({
      field: document.getElementById('datepicker'), 
      firstDay: 1,
      format:'MM/DD/YY',
      minDate: moment().add({days: 20}).toDate(),
      disableDayFn: function(date){// Disable Monday 
        return date.getDay() === 0 || date.getDay() === 6;
      },
      onSelect: function(date) {
    	  this._o.field.value =this.getMoment().format("MM/DD/YY");
    	 document.getElementById('datepicker2').value = picker.toString("MM/DD/YY");
      }
    });
    
    var selecteddate =  moment(picker.toString()).format("MM/DD/YY");
    </script>
    </body>
    
    </html>