Directory

DOC & DEMO - zdatepicker

Style

You can rewrite all of these:

/* zdatepicker main */
.zdatepicker{ position:absolute; width:280px; z-index:9998; display:none; overflow:hidden; margin:2px 0px; background:#FFF; border:1px solid rgba(0,0,0,.15); border-radius:5px; box-shadow:0 6px 12px rgba(0,0,0,.175); }
.zdatepicker dl{ width:278px; margin:0px; padding:1px; display:block; float:left; }

/* zdatepicker title (prev/next button) */
.zdatepicker dt{ width:100%; height:35px; line-height:35px; background:#fff; font-size:0px; font-weight:normal; word-spacing:0px; text-align:center; vertical-align:top; }
.zdatepicker dt a,
.zdatepicker dt .empty{ display:inline-block; width:10%; text-decoration:none; font-size:14px; color:#333; margin:0px; vertical-align:top; }
.zdatepicker dt a:hover{ background:#eee; color:#333; }
.zdatepicker dt .prev,
.zdatepicker dt .next { font-family:FontAwesome; font-weight:normal; color:#666; }
.zdatepicker dt .prev:before { content:"\f0d9"; }
.zdatepicker dt .next:before { content:"\f0da"; }

/* zdatepicker title (year/month) */
.zdatepicker dt span { display:inline-block; width:80%; font-size:14px; cursor:pointer; }
.zdatepicker dt span a { display:inline-block; width:auto; padding:0px 5px; font-size:14px; color:#333; margin:0px 2px; }
.zdatepicker dt span a:after { font-family:FontAwesome; font-size:12px; content:"\f0d7"; margin-left:2px; }

/* zdatepicker main */
.zdatepicker dd { width:98%; padding:0px 2px; padding:0 0 5px 0; font-size:0px; word-spacing:-11px; text-align:left; }

/* zdatepicker sub-title (week) */
.zdatepicker dd div { background:#fff; margin-bottom:3px; }
.zdatepicker dd div span,
.zdatepicker dd span { display:inline-block; width:14%; height:35px; line-height:32px; font-size:14px; word-spacing:normal; text-align:center; color:#666; vertical-align:top; }
.zdatepicker dd div span { font-size:12px; height:25px; line-height:25px; }

/* zdatepicker body */
.zdatepicker dd span a,
.zdatepicker dd span span { display:inline-block; width:100%; line-height:33px; margin-top:1px; text-decoration:none; color:#666; }
.zdatepicker dd span a:hover { background:#eee; color:#333; border-radius:5px; }
.zdatepicker dd span .selected,
.zdatepicker dd span .selected:hover,
.zdatepicker dd span .disable,
.zdatepicker dd span .disable:hover,
.zdatepicker dd span .area,
.zdatepicker dd span .area:hover { border-radius:0px; }
.zdatepicker dd .month,
.zdatepicker dd .year { width:25%; height:65px; margin-top:2px; margin-bottom:5px; }
.zdatepicker dd .month a,
.zdatepicker dd .year a { width:100%; height:65px; line-height:65px; overflow:hidden; }

/* zdatepicker close */
.zdatepicker .close { display:block; height:0px; width:100%; margin-top:10px; padding:0px; filter:alpha(opacity=100); opacity:1;}
.zdatepicker .close:hover { background:transparent; }
.zdatepicker .close a { position:absolute; right:5px; bottom:5px; display:inline-block; border-radius:40px; height:40px; width:40px; text-align:center; line-height:40px; text-decoration:none; box-shadow:0 3px 4px rgba(0,0,0,.175); }
.zdatepicker .close a:before { font-family:FontAwesome; content:"\f00d"; font-size:22px; }
.zdatepicker .close a:hover { }

/* bootstrap theme */
.zdatepicker dd .week0 { color:#d9534f; }
.zdatepicker dd .week6 { color:#5cb85c; }
.zdatepicker dd span a:hover { }
.zdatepicker dd span .selected { color:#fff; background:#428bca; }
.zdatepicker dd span .selected:hover { color:#fff; background:#3071a9; }
.zdatepicker dd span .disable,
.zdatepicker dd span .disable:hover { color:#ccc; background:#eee; cursor:not-allowed; }
.zdatepicker dd span .area { color:#fff; background:#5bc0de; }
.zdatepicker dd span .area.selected,
.zdatepicker dd span .area:hover { color:#fff; background:#31b0d5; }
.zdatepicker .close a { color:#fff; background:#d9534f; }
.zdatepicker .close a:hover { color:#fff; background:#c9302c; }

Options

classname
event
viewmonths
format
daystr
monthstr
weekoffset
year2str
str2year
initmonth
symbiont
readonly
disable
area
selected
replace
pos
use
show
prevbtn
nextbtn
closebtn
onFilter
onReturn

Callback

$.fn.zdatepicker.callback with two parameters: type and arg.
It's a global function! You can rewrite it.

parameter - type
parameter - arg

Demo

1-1. Simple

Code:
        $(".time1").zdatepicker();
        

1-2. Show one month.

Code:
        $(".time1_2").zdatepicker({viewmonths:1});
        

1-3. Replace a date display.

Code:
        $(".time1_3").zdatepicker({replace:{'2019-03-27':'Today'}});
        

2. Pick multiple dates.

Code:
        $(".time2").zdatepicker({selected:true});
        

3-1. Set date ranges are disable.

Code:
        $(".time3").zdatepicker({
            disable:{
                0:{0:"2019-03-02",1:"2019-03-11"},
                1:{0:"2019-03-20",1:"2019-03-29"}
            }
        });
        

3-2. Setting option use array.

Code:
        $(".time3_2").zdatepicker({
            disable:[
                ["2019-03-02","2019-03-11"],
                ["2019-03-20","2019-03-29"]
            ]
        });
        

4. Set dates or ranges are selected.

Code:
        $(".time4").zdatepicker({
            selected:{
                0:{0:"2019-03-05", 1:"2019-03-08"},
                1:{0:"2019-03-29"}
            }
        });
        

5-1. Set a "AREA" range.

--
Code:
        $(".time5_a").zdatepicker({
            viewmonths:2,
            area:{
                0:'',
                1:$(".time5_b")
            },
            disable:{
                0:{0:"2019-4-22", 1:"2019-4-25"}
            }
        });

        $(".time5_b").zdatepicker({
            viewmonths:2,
            initmonth:$(".time5_a"),
            area:{
                0:$(".time5_a"),
                1:''
            },
            disable:{
                0:{0:"2019-4-22", 1:"2019-4-25"}
            }
        });
        

5-2. Use a function to get ranges.

--
--
--
--
Code:
        function getDisable(start, end){
            var date = [];
            start.siblings(".time5_2_a").each(function(i){
                date[i] = [];
                date[i][0] = $(this).val();
                date[i][1] = $(this).nextAll(".time5_2_b").eq(0).val();
            });
            return date;
        }

        $(".time5_2_a").click(function(){
            $(this).zdatepicker({
                viewmonths:2,
                show:true,
                area:{
                    0:'',
                    1:$(this).nextAll(".time5_2_b").eq(0)
                },
                disable:getDisable($(this), $(this).nextAll(".time5_2_b").eq(0))
            });
        })

        $(".time5_2_b").click(function(){
            $(this).zdatepicker({
                viewmonths:2,
                initmonth:$(this).prevAll(".time5_2_a").eq(0),
                show:true,
                area:{
                    0:$(this).prevAll(".time5_2_a").eq(0),
                    1:''
                },
                disable:getDisable($(this).prevAll(".time5_2_a").eq(0), $(this))
            });
        })
        

6. Change other dom's event to get zdatepicker.

Code:
        // "click me!!" button's onclick is "dozdatepicker()"
        function dozdatepicker(){
            var rand = Math.round(Math.random() * 28);
            var zdp = $(".time6").zdatepicker({
                event:'',
                viewmonths:1,
                selected:{0:{0:"2019-03-"+rand}},
                show:true
            });
            $(".time6").focus();
        }
        

7-1. Position by direction

Code:
        $(".time7_1").zdatepicker({
            viewmonths:1,
            pos:{top:"bottom", left:"right"}
        });
        

7-2. Position by coordinate

        $(".time7_2").zdatepicker({
            viewmonths:1,
            pos:{top:-100, left:300}
        });
        

8. Close button

Code:
        $(".time8").zdatepicker({
            viewmonths:2,
            closebtn:true
        });
        

9. Symbiont

------- -------
Code:
        $(".time9_a").zdatepicker({
            viewmonths:1,
            symbiont:false,
            closebtn:true
        });
        
------- -------
Code:
        $(".time9_b").zdatepicker({
            viewmonths:1
        });
        

10. Show after zdatepicker init.

Code:
        // input's position is changed after SyntaxHighlighter init.
        $(".time10").zdatepicker({
            viewmonths:1,
            show:true
        });
        

11. Not show anything.(but zdatepicker is inited.

Code:
        $(".time11").zdatepicker({
            viewmonths:1,
            show:false
        });
        

12. Readonly

Code:
        $(".time12").zdatepicker({
            viewmonths:1,
            readonly:true
        });
        

13. Change Event for show zdatepicker.

Code:
        $(".time13").zdatepicker({
            viewmonths:1,
            event:"mouseover"
        });
        

14-1. Date format

Code:
        $(".time14_1").zdatepicker({
            format:{date:"dd,mm\/yyyy", month:"mm\/yyyy", year:"yyyy", onlymonth:"mm."},    // use regular for replace, so you need use \ to some char.
            daystr:["S","M","T","W","Th","F","S"],
            monthstr:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
        });
        

14-2. Special era

Code:
        // China_taiwan era.
        $(".time14_2").zdatepicker({
            format:{date:"yyyy年mm月dd日", month:"yyyy年mm月", year:"yyyy年", onlymonth:"mm月"},
            daystr:["日","一","二","三","四","五","六"],
            monthstr:["1","2","3","4","5","6","7","8","9","10","11","12"],
            year2str : function(year){
                if(year - 1911 > 0){
                    if(year == 1912) return "民國元";
                    return '民國'+(year-1911);
                }else{
                    return '民國前'+(1912-year);
                }
            },
            str2year : function(str){
                var n = str.match(/\d+/);
                if(str.match("前")){
                    return 1912 - n;
                }else{
                    if(!n) return 1912;
                    return 1911 + n;
                }
            }
        });
        

14-3. i18n

Code:
        $(".time14_3").zdatepicker({
            /* French */
            format:{date:"dd,mm\/yyyy", month:"mm\/yyyy", year:"yyyy", onlymonth:"mm"},
            daystr:["Dim","Lun","Mar","Mer","Jeu","Ven","Sam"],
            monthstr:["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Décembre"]
            /* German */
            //daystr:["So","Mo","Di","Mi","Do","Fr","Sa"],
            //monthstr:["Januar","Februar","Maerz","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"]
            /* Japan */
            //daystr:["日","月","火","水","木","金","土"],
            //monthstr:["睦月","如月","弥生","卯月","皐月","水无月","文月","叶月","长月","神无月","霜月","师走"]
            /* China */
            //daystr:["日","一","二","三","四","五","六"],
            //monthstr:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
        });
        

15. Replace return function. and use callback.

Code:
        function returnSelect(){
            var timeArr = $('.time15').val().split(',');
            var sel = {}, i = 0;
            for(var x in timeArr){
                sel[x+1] = {0:timeArr[x]};
                i = x + 1;
            }
            return i > 1 ? sel : true ;
        }

        // please click next month.
        $.fn.zdatepicker.callback = function(type, arg){
            if(type == 'next_month'){
                alert("goto:"+arg.year+"-"+arg.month);
                $(arg.input).focus();
            }
        }

        $(".time15").click(function(){
            var sel = returnSelect();
            $(this).zdatepicker({
                show:true,
                viewmonths:1,
                selected:sel,
                event:false,
                onReturn:function(date, dateObj, obj, calendar, a, selected){
                    if(selected) $(obj).val( selected.join(',') );
                }
            });
        });
        

16. Advanced setting for date's status.

Code:
        $(".time16").zdatepicker({
            onFilter:function(d, m, y, w, cla){
                if(w == 0 || w == 6){
                    cla.push('disable');
                }
                return cla;
            }
        });