framework7日期插件使用

1、引入框架文件

<link rel="stylesheet" href="framework7.ios.min.css">
<link rel="stylesheet" href="framework7.ios.colors.min.css">
<link rel="stylesheet" href="my-app.css">

<script type="text/javascript" src="framework7.min.js"></script>
<script type="text/javascript" src="my-app.js"></script>

2、html显示

<div class="content-block-title">Custom date format</div>
<div class="list-block">
  <ul>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-input">
            <input type="text" placeholder="Select date" readonly id="start_date">
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>  

<div class="content-block-title">Custom date format</div>
<div class="list-block">
  <ul>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-input">
            <input type="text" placeholder="Select date" readonly id="end_date">
          </div>
        </div>
      </div>
    </li>
  </ul>
</div> 

 

3、js调用

　var month = {"Jan":"01","Feb":"02","Mar":"03","Apr":"04","May":"05","Jun":"06","Jul":"07","Aug":"08","Sep":"09","Oct":"10","Nov":"11","Dec":"12"};

　　var str = $('#start_date').val();
　　var array = str.split(" ");
　　str = array[2]+'-'+month[array[0]]+'-'+array[1];

转换格式，原格式：Nov 03 2017 转化为2017-11-03，方便数据库查询用

<script type="text/javascript">
    var myApp = new Framework7();
    var $$ = Dom7;
    //日期
    var start_date = myApp.calendar({
        input: '#start_date',
        dateFormat: 'M dd yyyy'
    }); 
    var end_date = myApp.calendar({
        input: '#end_date',
        dateFormat: 'M dd yyyy'
    }); 
</script>