没有 Moment.js 的 Pikaday 日期格式

Question

我正在使用 Pikaday, which requires Moment.js 来格式化日期。这允许简单的日期格式：

var picker = new Pikaday({
  format: 'YYYY-MM-DD'
});

但是，当我包含 Pikaday npm 包时，Moment.js 是 超过 40kb。从字面上看，我需要的只是将日期格式从实际上无法使用的默认 Pikaday 格式更改为 YYYY-MM-DD。

我可以在不包含 40kb 库的情况下执行此操作吗？

Answer 1

如果您只想使用格式 YYYY-MM-DD，您可以使用本机 Date 方法构建日期字符串：

const picker = new Pikaday({
  field: document.getElementById('datepicker')
 ,onSelect: date => {
    const year = date.getFullYear()
         ,month = date.getMonth() + 1
         ,day = date.getDate()
         ,formattedDate = [
            year
           ,month < 10 ? '0' + month : month
           ,day < 10 ? '0' + day : day
          ].join('-')
    document.getElementById('datepicker').value = formattedDate
  }
})

演示

const picker = new Pikaday({
  field: document.getElementById('datepicker')
 ,onSelect: date => {
    const year = date.getFullYear()
         ,month = date.getMonth() + 1
         ,day = date.getDate()
         ,formattedDate = [
            year
           ,month < 10 ? '0' + month : month
           ,day < 10 ? '0' + day : day
          ].join('-')
    document.getElementById('datepicker').value = formattedDate
  }
})

@import url("https://rawgit.com/dbushell/Pikaday/master/css/pikaday.css");

<script src="https://rawgit.com/dbushell/Pikaday/master/pikaday.js"></script>
<input type="text" id="datepicker">

Answer 2

前段时间看到date-formatter.js格式化器和解析器后写了一个小的格式化器，也许会适合。它几乎是自我记录的：

function formatDate(date, format) {
  var tokens = ['d',     // day number, e.g. 3, 12
                'dd',    // day number padded to two digits, e.g. 03, 12
                'ddd',   // day name abbreviated, e.g. Mon, Tue
                'dddd',  // day name in full, e.g. Monday, Tuesday
                'M',     // month number, e.g. 5, 10
                'MM',    // month number padded to two digits, e.g. 05, 10
                'MMM',   // month name abbreviated, e.g. May, Oct
                'MMMM',  // month name in full, e.g. May, October
                'y',     // Year, e.g. 71, 2011
                'yy',    // Year as two digits, e.g. 71, 11
                'yyy',   // Year as three digits, e.g. 071, 011
                'yyyy',  // Year padded to 4 digits, e.g. 0071, 2011
                'h',     // Hour, e.g. 1, 12
                'hh',    // Hour padded to two digits, e.g. 01, 12
                'm',     // Minute, e.g. 1, 23
                'mm',    // Minute padded to two digits, e.g. 01, 23
                's',     // Second, e.g. 1, 15
                'ss',    // Second padded to two digits, e.g. 01, 15
                'ap',    // 12 hour time lower case, e.g. 1:45 am, 12:30 pm
                'AP',    // 12 hour time upper case, e.g. 1:45 AM, 12:30 PM
                'z',     // Return values and "z" timezone
                'Z',     // Return values and "Z" timezone
                'tz',    // Append timezone as +/-00:00
                'TZ'];   // Append timezone as +/-00:00   
                
  var months = ['January','February','March','April','May','June','July',
                'August','September','October','November','December'];
                
  var days   = ['Sunday','Monday','Tuesday','Wednesday',
                'Thursday','Friday','Saturday'];
  
  // Generate all the parts as strings
  var parts = {d    : '' + date.getDate(),
               dd   : ('0' + date.getDate()).slice(-2),
               ddd  : days[date.getDay()].slice(0,3),
               dddd : days[date.getDay()],
               M    : '' + (date.getMonth() + 1),
               MM   : ('0' + (date.getMonth() + 1)).slice(-2),
               MMM  : months[date.getMonth()].slice(0,3),
               MMMM : months[date.getMonth()],
               y    : ''  + date.getFullYear(),
               yy   : ('0' + date.getFullYear()).slice(-2),
               yyy  : ('00' + date.getFullYear()).slice(-3),
               yyyy : ('000' + date.getFullYear()).slice(-4),
               h    : '' + date.getHours(),
               hh   : ('0' + date.getHours()).slice(-2),
               m    : '' + date.getMinutes(),
               mm   : ('0' + date.getMinutes()).slice(-2),
               s    : '' + date.getSeconds(),
               ss   : ('0' + date.getSeconds()).slice(-2)};

  // Parse format character by character and build string
  var b = format.split('');
  var formattedString = '';
  var token = '';
  for (var i = 0, iLen = b.length; i < iLen; i++) {
    token += b[i];
    if (tokens.indexOf(token + b[i+1]) == -1) {
      if (tokens.indexOf(token) != -1) {
        formattedString += parts[token];
      } else {
        formattedString += token;
      }
      token = '';      
    }
 // console.log(token + ' : ' + formattedString);     
  }
  return formattedString;
}

['yyyy-MM-ddThh:mm:ss',
 'yyyyMMTddhhmm',
 'dddd, d MMMM, yyyy at hh:mm:ss'
].forEach(function (s) {
  document.write('<br>' + formatDate(this, s));
}, new Date());

Answer 3

如果您使用 /uglify 或其他编译器，请试试这个，这可能更适合您。

onSelect: function(date) {

//Format here   
}

而不是

onSelect: date => {

//Format here 

}

Answer 4

您还可以执行以下操作

new Pikaday({
    field: document.getElementById('eDate'), 
    toString: function(date) {
        var parts = [('0'+date.getDate()).slice(-2), ('0'+(date.getMonth()+1)).slice(-2), date.getFullYear()];
        return parts.join("-");
    }
})

这将产生 18-07-1980。您可以通过更改 return parts.join("-"); 将 '-' 更改为 '/'；您可以重新排列零件以通过零件数组

应用 mm/dd/yyyy

没有 Moment.js 的 Pikaday 日期格式

Pikaday date formatting without Moment.js

javascript

date

pikaday

演示