jQuery - DatePicker - hoyo 學習紀錄

$(function () {
    var opt={
        showButtonPanel: false,
        showAnim: false,

        //以下為日期選擇器部分
        dayNames:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
        dayNamesMin:["日","一","二","三","四","五","六"],
        monthNames:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
        monthNamesShort:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
        prevText:"上月",
        nextText:"次月",
        weekHeader:"週",
        showMonthAfterYear:true,
        dateFormat:"yy-mm-dd",
        //以下為時間選擇器部分
        timeOnlyTitle:"選擇時分",
        timeText:"時間",
        hourText:"時",
        minuteText:"分",
        //secondText:"秒",
        //millisecText:"毫秒",
        timezoneText:"時區",
        currentText:"現在時間",
        closeText:"確定",
        amNames:["上午","AM","A"],
        pmNames:["下午","PM","P"],
        showSecond:false,
        timeFormat:"HH:mm" //HH:mm:ss
    };
    $(".DataTimePicker").datetimepicker(opt);
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

$(function () {

var opt={

showButtonPanel: false,

showAnim: false,

//以下為日期選擇器部分

dayNames:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],

dayNamesMin:["日","一","二","三","四","五","六"],

monthNames:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],

monthNamesShort:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],

prevText:"上月",

nextText:"次月",

weekHeader:"週",

showMonthAfterYear:true,

dateFormat:"yy-mm-dd",

//以下為時間選擇器部分

timeOnlyTitle:"選擇時分",

timeText:"時間",

hourText:"時",

minuteText:"分",

//secondText:"秒",

//millisecText:"毫秒",

timezoneText:"時區",

currentText:"現在時間",

closeText:"確定",

amNames:["上午","AM","A"],

pmNames:["下午","PM","P"],

showSecond:false,

timeFormat:"HH:mm" //HH:mm:ss

};

$(".DataTimePicker").datetimepicker(opt);

});

var opt={
    showButtonPanel: false,
    showAnim: false,

    //以下為日期選擇器部分
    dayNames:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
    dayNamesMin:["日","一","二","三","四","五","六"],
    monthNames:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
    monthNamesShort:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
    prevText:"上月",
    nextText:"次月",
    weekHeader:"週",
    showWeek: true,
    firstDay: 1,
    onSelect: function(date){
        var d = new Date(date);
        var index = d.getDay();
        if(index == 0) {
            d.setDate(d.getDate() - 6);
        }
        else if(index == 1) {
            d.setDate(d.getDate());
        }
        else if(index != 1 && index > 0) {
            d.setDate(d.getDate() - (index - 1));
        }
        var year = d.getFullYear();
        var month = (1 + d.getMonth()).toString();
        month = month.length > 1 ? month : '0' + month;
        var day = d.getDate().toString();
        day = day.length > 1 ? day : '0' + day;
        
        $(this).val(year +'-'+ month +'-'+ day);
    },
    showMonthAfterYear:true,
    dateFormat:"yy-mm-dd"
};
$(".DataTimePicker").datepicker(opt);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

var opt={

showButtonPanel: false,

showAnim: false,

//以下為日期選擇器部分

dayNames:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],

dayNamesMin:["日","一","二","三","四","五","六"],

monthNames:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],

monthNamesShort:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],

prevText:"上月",

nextText:"次月",

weekHeader:"週",

showWeek: true,

firstDay: 1,

onSelect: function(date){

var d = new Date(date);

var index = d.getDay();

if(index == 0) {

d.setDate(d.getDate() - 6);

}

else if(index == 1) {

d.setDate(d.getDate());

}

else if(index != 1 && index > 0) {

d.setDate(d.getDate() - (index - 1));

}

var year = d.getFullYear();

var month = (1 + d.getMonth()).toString();

month = month.length > 1 ? month : '0' + month;

var day = d.getDate().toString();

day = day.length > 1 ? day : '0' + day;

$(this).val(year +'-'+ month +'-'+ day);

},

showMonthAfterYear:true,

dateFormat:"yy-mm-dd"

};

$(".DataTimePicker").datepicker(opt);

<style>
    .ui-datepicker-calendar {
        display: none !important;
    }
</style>

1

2

3

4

5

<style>

.ui-datepicker-calendar {

display: none !important;

}

</style>

$('.date-picker').datepicker( {
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'MM yy',
    onClose: function(dateText, inst) { 
        $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
    }
});

1

2

3

4

5

6

7

8

9

$('.date-picker').datepicker( {

changeMonth: true,

changeYear: true,

showButtonPanel: true,

dateFormat: 'MM yy',

onClose: function(dateText, inst) {

$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));

}

});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
    var startDate;
    var endDate;
    
    var selectCurrentWeek = function() {
        window.setTimeout(function () {
            $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
        }, 1);
    }
    
    $('.week-picker').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());
            endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
            var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
            $('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
            $('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
            
            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();
        }
    });
    
    $('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
    $('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
</script>
</head>
<body>
    <div class="week-picker"></div>
    <br /><br />
    <label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

$(function() {

var startDate;

var endDate;

var selectCurrentWeek = function() {

window.setTimeout(function () {

$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')

}, 1);

}

$('.week-picker').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());

endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);

var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;

$('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));

$('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));

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();

}

});

$('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });

$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });

});

</script>

</head>

<body>

</body>

</html>

$( "#datepicker" ).datepicker({
    beforeShowDay: noMondays
});
function noMondays(date){
    if (date.getDay() === 1)  /* Monday */
        return [ false, "closed", "Closed on Monday" ]
    else
        return [ true, "", "" ]
}

1

2

3

4

5

6

7

8

9

$( "#datepicker" ).datepicker({

beforeShowDay: noMondays

});

function noMondays(date){

if (date.getDay() === 1) /* Monday */

return [ false, "closed", "Closed on Monday" ]

else

return [ true, "", "" ]

}

jQuery - DatePicker

jQuery UI Datepicker 增加時間 Timepicker

只顯示年、月

選取一週

關閉某個星期

Related Post

jQuery - DatePicker

jQuery UI Datepicker 增加時間 Timepicker

只顯示年、月

選取一週

關閉某個星期

Related Post

CSS - 自定義 Radio, Checkbox 為方塊

Chrome - 取消淺黃色表單自動輸入

Bootstrap - DatePicker