jQuery datetimepicker在web中的應用

很多時間,我們需要一個時間區間,但是html自定義的type=“date”不是自己想要的類型,自己查詢jQuery文檔做的項目,現在寫成博客,爲自己以後需要用留存

 

第一步,頁面上內容並賦值初始值的腳本

<tr>
                      <td class="td1">使用時間</td>
                      <td class="td2">
                        <input class="apply-text" id="startTime" name="startTime"><span class="new-between">至</span><input
                          class="apply-text" id="endTime" name="endTime">
                        <span class="new-warn" id="timeStr">*</span>
                      </td>
                    </tr>

            //獲取當前年
                var year=myDate.getFullYear();
                //獲取當前月
                var month=myDate.getMonth()+1;
                //獲取當前日
                var date=myDate.getDate();
                var dataStr=year+"-"+month+"-"+date;
              $("input[name='startTime']").val(dataStr);
              $("input[name='endTime']").val(dataStr);

 

第二步,自己定義時間選擇


          $("#startTime").datepicker({
                       
                        changeMonth: true,
                        changeYear:true,
                        dateFormat: "yy-mm-dd",
                        currentStatus: '顯示本月',
                        monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                        monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                        monthStatus: '選擇月份',
                        yearStatus: '選擇年份',
                        dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
                        dayNamesShort: ['週日', '週一', '週二', '週三', '週四', '週五', '週六'],
                        dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
                         startDate:new Date(),
                          minDate:new Date(),
                        onClose: function(selectedDate) {

                        }

                    });
          
           $("#endTime").datepicker({
                    
                        changeMonth: true,
                        changeYear:true,
                        dateFormat: "yy-mm-dd",

                        currentStatus: '顯示本月',
                        monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                        monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                        monthStatus: '選擇月份',
                        yearStatus: '選擇年份',
                        dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
                        dayNamesShort: ['週日', '週一', '週二', '週三', '週四', '週五', '週六'],
                        dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
                        startDate:new Date(),
                        minDate:new Date(),
                        onClose: function(selectedDate) {
                         
                        }

                    });

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章