datePicker

/**
 * 複数日付選択ダイアログ
 * 
 * @param {object} args
 * 
 * args.targets {string[]} 選択した日付を代入するフィールドIDリスト 必須
 * args.formatter {string} 日付のフォーマット方法、デフォルトはyyyy/MM/dd
 */
var datePicker = (function(){
    var _args = {};
    _args.count = 0;
    _args.targets = [];
    _args.formatter = "yyyy/MM/dd";
    var dialog = null;
    var calendar = null;
    var open = function(args){
        dojo.require("dijit.Dialog");
        dojo.require("dijit.Calendar");
        dojo.require("dijit.form.Button");
        try{
            if((typeof args.targets).toString().toUpperCase() == "OBJECT"){
                 _args.targets = args.targets;
            }else if((typeof args.targets).toString().toUpperCase() == "STRING"){
                _args.targets[0] = args.targets;
            }
            _args.count = _args.targets.length;
            if((typeof formatter).toString().toUpperCase() == "STRING") _args.formatter = args.formatter;
            dialog = dijit.byId("datePickerDialog");
            if(dialog==null) createDialog();
            dialog.show();
            setInitialValues();
        }catch(e){
            console.error(e);
        }
    };
    var createDialog = function(){
        try{
            var dialogContentContainer = dojo.create("DIV");
            var dialogCalendarContainer = dojo.create("DIV",{"id":"datePickerCalendarContainer","style":"float:left;width:220px,height:234px;margin-right:5px;"},dialogContentContainer);
            calendar = dijit.byId("datePickerCalendar");
            if(calendar==null){
                calendar = new dijit.Calendar({
                    "id":"datePickerCalendar",
                    "style":"font-size:10pt",
                    onValueSelected:function(date){
                        addSelect(date);
                    }
                });
            }
            dialogCalendarContainer.appendChild(calendar.domNode);
            var dialogSelectedDateListContainer = dojo.create("DIV",{"id":"selectedDateListContainer","style":"float:left;width:220px;height:234px;border:1px #eeeeee solid;"},dialogContentContainer);
            var dialogBottomButtonContainer = dojo.create("DIV",{"style":"clear:both"},dialogContentContainer);
            var okButton = dijit.form.Button({"id":"btnDatePickerOk","label":"OK","onClick":function(){okDatePicker();}});
            var cancelButton = dijit.form.Button({"id":"btnDatePickerCancel","label":"キャンセル","onClick":function(){dialog.hide();}});
            dialogBottomButtonContainer.appendChild(okButton.domNode);
            dialogBottomButtonContainer.appendChild(cancelButton.domNode);
            dialog = dijit.Dialog({
                id:"datePickerDialog",
                content:dialogContentContainer,
                onHide:function(){
                    onHideDatePicker();
                }
            });
            return true;
        }catch(e){
            console.error(e);
            return false;
        }
    };
    var setInitialValues = function(){
        try{
            for(var i = 0; i < _args.targets.length; i++){
                var val = dojo.attr(_args.targets[i],"value");
                if(val.length > 0) addSelect(dojo.date.locale.parse(val,{selector:"date",dateFormatter:_args.formatter}));
            }
        }catch(e){
            console.error(e);
        }
    };
    var addSelect = function(date){
        var icon = "data:image/gif;base64,R0lGODlhDQALALMAAAAAAP///58AD+JiAKE/AP+BQf+fcf9CHv9AQP+AgP///wAAAAAAAAAAAAAAAAAAACH5BAEAAAoALAAAAAANAAsAAAQwUMlJq70n03zmKUWnfAXhDUj4HYTpZUbYWhzrVoN6JLe02xmeR0YQEDK31kyhNEUAADs=";
        try{
            if(dojo.query(".datePickerSelectedValue").length < _args.count && dojo.query("#datePickerSelected"+date.getTime().toString()).length == 0){
                var valueContainer = dojo.create("div",{"class":"datePickerSelectedValue","id":"datePickerSelected"+date.getTime().toString(),"data-dateNumber":date.getTime(),"style":"display:inline-block;width:220px;border-bottom:1px #eeeeee dotted;"},"selectedDateListContainer");
                dojo.create("span",{"style":"box-sizing:border-box;width:205px;display:inline-block;padding:2px 3px 0 2px;","innerHTML":dojo.date.locale.format(date,{selector:"date",dateFormatter:_args.formatter})},valueContainer);
                dojo.create("img",{"src":icon,onClick:"dojo.destroy("+valueContainer.id+")","style":"cursor:pointer;"},valueContainer);
            }
        }catch(e){
            console.error(e);
        }
    };
    var okDatePicker = function(){
        try{
            var valueNodes = dojo.query(".datePickerSelectedValue");

            for(var i = 0; i < _args.targets.length; i++){
                if((typeof valueNodes[i]).toString().toUpperCase() == "UNDEFINED"){
                    dojo.attr(_args.targets[i],{"value":""});
                }else{
                    dojo.attr(_args.targets[i],{"value":dojo.date.locale.format(new Date(Number(dojo.attr(valueNodes[i],"data-dateNumber"))),{selector:"date",dateFormatter:_args.formatter})});
                }
            }
            dialog.hide();
        }catch(e){
            console.error(e);
        }
    };
    onHideDatePicker = function(){
        dojo.empty("selectedDateListContainer");
        calendar.destroy();
        dijit.byId("btnDatePickerOk").destroy();
        dijit.byId("btnDatePickerCancel").destroy();
        dialog.destroy();
    };
    return{
        open:open
    };
})();

Select XSnippet to copy to Clipboard