十、jquery-ui datepicker實現選擇一週的日期

阿新 • • 發佈：2019-01-11

html頁面：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/css/jquery-ui.css">
    <script type="text/javascript" src="/static/js/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="/static/js/jquery-ui.js" 
></script>
    <title>檢視已上線需求</title>
</head>

<body>
    <div class='mycontainer'>
        <table>
            <tr>
                <td>日期
                    <input id="dateWeekRange" type="text" class="datePicker input-sm" placeholder="選擇時間段" 
 />
                </td>
            </tr>
        </table>
        <br/>
        <div id="showChart"></div>
    </div>
</body>
</html>

javascript：

<script type="text/javascript">  
$(document).ready(function(e) {  
    var date = new Date();  
    var 
 mondayDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
    var sundayDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);

    var startDateStr = $.datepicker.formatDate('yy-mm-dd', mondayDate);
    var endDateStr = $.datepicker.formatDate('yy-mm-dd', sundayDate);
    $('#dateWeekRange').val(startDateStr + " ~ " + endDateStr);
});
var startDate;
var endDate;

jQuery(function($) {
    $.datepicker.regional['zh-CN'] = {
        firstDay: 1,
        initStatus: '請選擇日期',
        isRTL: false
    };
    $.datepicker.setDefaults($.datepicker.regional['zh-CN']);

    var selectCurrentWeek = function() {
        window.setTimeout(function() {
            $('#dateWeekRange').find('.ui-datepicker-current-day a').addClass('ui-state-active')
        }, 1);
    }
    $('#dateWeekRange').datepicker({
        showOtherMonths: true,
        selectOtherMonths: true,
        onSelect: function(dateText, inst) {
            var date = $(this).datepicker('getDate');

            startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
            endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
            var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;

            var startDateStr = $.datepicker.formatDate('yy-mm-dd', startDate, inst.settings);
            var endDateStr = $.datepicker.formatDate('yy-mm-dd', endDate, inst.settings);

            $('#dateWeekRange').val(startDateStr + " ~ " + endDateStr);
            selectCurrentWeek();
        },
        beforeShowDay: function(date) {
            var cssClass = '';
            if (date >= startDate && date <= endDate)
                cssClass = 'ui-datepicker-current-day';
            return [true, cssClass];
        },
        onChangeMonthYear: function(year, month, inst) {
            selectCurrentWeek();
        }
    });

    $(document).on("mousemove", ".ui-datepicker-calendar tr", function() {
        $(this).find('td a').addClass('ui-state-hover');
    });
    $(document).on("mouseleave", ".ui-datepicker-calendar tr", function() {
        $(this).find('td a').removeClass('ui-state-hover');
    });
});
</script>

效果如下：
輸入圖片說明

jQuery 1.7之後live()就被廢棄了，用.on()替代

// Live
$( ".bookList li" ).live( "click", function( e ) {} );
$( document ).on( "click", ".bookList li", function( e ) {} );

十、jquery-ui datepicker實現選擇一週的日期

html頁面： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="

三十八、jquery 購物車功能實現demo

說明：所有功能及實現原理和js購物車一致，只是將所用語法改寫為了jquery語法一、利用table標籤簡單建立介面樣式；二、首先實現全選、單選功能 1.全選功能時需要判斷是否有checked屬性；在jquery中設定或返回被選元素的屬性/值的方法有兩種attr()及prop()；

jQuery UI Datepicker 選擇時分秒

將選擇的日期同步到另一個域中，配合altFormat可以顯示不同格式的日期字串。初始：$('.selector').datepicker({ altField: '#actualDate' }); 獲取：var altField = $('.selector').datepicker('option

09 Jquery UI Datepicker 日期拾取插件

日期 ges tps 插件分享圖片 jquery ima com itl 09 Jquery UI Datepicker 日期拾取插件

學習jsGrid、requirejs、jquery.validate.min、jquery-ui的試驗程式碼

一、html頁面程式碼： @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /&

jQuery UI sortable()實現拖動排序

Query UI的強大不用多說，今天來看下它的拖動排序功能，jQuery UI使用sortable()實現對元素拖動排序，首先來看下面這個簡單的例子： <!DOCTYPE html> <html> <head> <title>

jquery-ui datepicker外掛在頁面第二次點選時無效的問題

頁面結構是這樣的：一個大的main父頁面中嵌有子頁面，點選選單切換時，main頁面不變，子頁面切換。 a、b兩個子頁面中都有datepicker控制元件。問題現象：頁面初始化後，在第一個子頁面中初始化datepicker，正常。點選選單切換子頁面，其後的所有datep

jquery ui datepicker起始日期與結束日期的校驗

1.引言之前做的一個專案中用到jquery datepicker,看了一些網上的例子，但是不夠完整。 http://blog.csdn.net/redarmy_chen/article/details/7400723這是類似的例子，但是不夠完整，dateText型別為D

jquery.ui.datepicker 新增時分秒功能

Requirements You also need to include jQuery and jQuery UI with datepicker and slider wigits. You should include them in your page

JQUERY ui datepicker整理（全）

網上搜索datepicker都不是很全面，決定自己整理下方便大家！ //兩種使用形式 $(selector,context).datepicker(options);

jquery.ui.datepicker.js 設定預設日期

defaultDate: '-1M', onClose: function(dateText, inst) { var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();

jquery ui sortable 實現table，row的拖動。（Make Table Rows Sortable Using jQuery UI Sortable）

// Return a helper with preserved width of cells var fixHelper = function(e, ui) { //console.log(ui) ui.children().each(function(

jquery.ui.datepicker 新增時分秒

轉載自：http://blog.csdn.net/softwave/article/details/7765405 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "ht

angular學習總結十——動態建立元件並實現互動一

ps:看了好多篇動態元件的部落格，坑啊，只是放進去一個靜態元件，並未加上Input，Output appModule import { BrowserModule } from '@angular/platform-browser'; import

jQuery UI Datepicker中文顯示月份和星期

jQuery UI Datepicker這個用於日期顯示很方便而且提供了多種樣式，可以從jQuery UI中選擇喜歡的樣式和jQuery UI元件隨意下載js庫，如果只是使用datepicker那麼選擇時之選UI Core和Widgets中的Datepicker，然後選擇喜歡的主題，選擇版本，下載即可。