启用angularjs日期选择器UI自举具体日期 [英] enable specific dates in angularjs datepicker ui bootstrap

查看：469 发布时间：2016/5/10 19:55:18 angularjs datepicker

本文介绍了启用angularjs日期选择器UI自举具体日期的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

 VAR对myApp = angular.module（'ui.bootstrap.demo'，[' ngAnimate'，'ui.bootstrap'，'ui.bootstrap.dateparser'，'ui.bootstrap.datepicker']）;\r
\r
\r
\r
             myApp.controller（'DatepickerDemoCtrl'，函数（$范围，$ HTTP）{\r
 \r
            $ scope.today =功能（）{\r
                $ scope.dt =新的日期（）;\r
              };\r
              $ scope.today（）;\r
\r
              $ scope.clear =功能（）{\r
                $ scope.dt = NULL;\r
              };\r
\r
              $ scope.inlineOptions = {\r
                MINDATE：新的Date（）\r
                showWeeks：假的\r
              };\r
\r
              $ scope.dateOptions = {\r
                  formatYear：'YY'，\r
                  MAXDATE：新的日期（2020，5，22）\r
                  MINDATE：新的Date（）\r
                  startingDay：1\r
                };\r
\r
                //禁用周末选择\r
                功能disabledasda（数据）{\r
                  VAR日期= data.date，\r
                    模式= data.mode;\r
                  返回模式==='天'和;＆安培; （date.getDay（）=== 0 || date.getDay（）=== 6）;\r
                }\r
\r
              $ scope.toggleMin =功能（）{\r
                $ scope.inlineOptions.minDate = $ scope.inlineOptions.minDate？空：新的Date（）;\r
                $ scope.dateOptions.minDate = $ scope.inlineOptions.minDate;\r
              };\r
\r
              $ scope.toggleMin（）;\r
\r
              $ scope.open1 =功能（）{\r
                $ scope.popup1.opened = TRUE;\r
              };\r
\r
\r
              $ scope.setDate =功能（年，月，日）{\r
                $ scope.dt =新的日期（年，月，日）;\r
              };\r
\r
              $ scope.formats = ['DD-MMMM-YYYY'，'YYYY / MM / DD'，'DD.MM.YYYY'，'shortDate'];\r
              $ scope.format = $ scope.formats [0];\r
              $ scope.altInputFormats = ['！M / D / YYYY！'];\r
\r
              $ scope.popup1 = {\r
                打开：假的\r
              };\r
\r
\r
              VAR明天=新的日期（）;\r
              tomorrow.setDate（tomorrow.getDate（）+ 1）;\r
              VAR afterTomorrow =新的日期（）;\r
              afterTomorrow.setDate（tomorrow.getDate（）+ 1）;\r
              $ scope.events = [\r
                {\r
                  日期：明天，\r
                  状态：'全'\r
                }，\r
                {\r
                  日期：afterTomorrow，\r
                  状态：'部分'\r
                }\r
              ];\r
              $ scope.disabled =功能（日期模式）{\r
\r
                $ scope.holidays = [\r
                  新的Date（2016,2,14）\r
                  新的Date（2016,2,15）\r
                  新的Date（2016,2,16）\r
新的Date（）\r
                ]\r
\r
                VAR isHoliday = TRUE;\r
                对于（VAR I = 0; I＆LT; $ scope.holidays.length;我++）{\r
                  如果（areDatesEqual（$ scope.holidays [I]中，日期））{\r
                    isHoliday = FALSE;\r
                  }\r
                }\r
\r
                回报（模式==='天'和;＆安培; isHoliday）;\r
              };\r
\r
\r
\r
              功能areDatesEqual（DATE1，DATE2）{\r
\r
                返回date1.setHours（0,0,0,0）=== date2.setHours（0,0,0,0）\r
\r
              }\r
\r
              $ scope.dayClass =功能（日期模式）{\r
\r
            VAR任命= [\r
              新的Date（2016,2,3）\r
              新的Date（2016,2,8）\r
              新的Date（2016,2,22）\r
            ]\r
\r
            如果（模式==='天'）{\r
\r
              VAR dateToCheck =新的日期（日期）;\r
\r
              对于（VAR I = 0; I＆LT; appointments.length;我++）{\r
                如果（areDatesEqual（约会[I]，dateToCheck））{\r
                  回报预约;\r
                }\r
              }\r
            }\r
            返回'';\r
          };\r
\r
          $ scope.dateSelected =功能（）{\r
\r
    VAR任命= [\r
      新的Date（2016,2,3）\r
      新的Date（2016,2,8）\r
      新的Date（2016,2,22）\r
    ];\r
\r
    VAR dateSelected =新的日期（$ scope.dt）;\r
\r
    对于（VAR I = 0; I＆LT; appointments.length;我++）{\r
      如果（areDatesEqual（约会[I]，dateSelected））{\r
        的performAction（）;\r
      }\r
    }\r
\r
  };\r
\r
  功能的performAction（）{\r
    警报（预约日期选定）;\r
  }\r
\r
\r
 $ scope.dtmax =新的日期（）;\r
             }）;

。全按钮跨度{\r
        背景色：暗绿;\r
        边界半径：32PX;\r
        颜色：黑色;\r
      }\r
      .partially按钮跨度{\r
        背景色：橙色;\r
        边界半径：32PX;\r
        颜色：黑色;\r
      }\r
      .appointment＆GT;按钮{\r
        颜色：白色;\r
        背景色：红色;\r
      }

＆LT; HEAD＆GT;\r
\r
  ＆LT;标题＆GT;＆日期选择器LT; /标题＆GT;\r
  ＆LT;间的charset =UTF-8＆GT;\r
  ＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，初始规模= 1＆GT;\r
 ＆LT;链接rel =stylesheet属性HREF =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css/＆GT;\r
    ＆所述; SCRIPT SRC =https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.js＆GT;＆下; /脚本＆GT;\r
    ＆LT;脚本src=\"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular-animate.js\"></script>\r
    ＆LT;脚本src=\"https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js\"></script>\r
  ＆LT;脚本SRC =./ datePicker.js＆GT;＆LT; / SCRIPT＆GT;\r
\r
\r
\r
\r
\r
\r
＆LT; /头＆GT;\r
\r
＆LT;机身NG-应用=ui.bootstrap.demo＆GT;\r
 \r
     ＆LT; DIV NG控制器=DatepickerDemoCtrl＆GT;\r
      ＆LT; pre＆GT;选定的日期为：＆LT;环境监察及GT; {{DT |日期：'fullDate'}}＆LT; / EM＆GT;＆LT; / pre＆GT;\r
\r
      ＆LT; H4＆GT;＆弹出LT; / H4＆GT;\r
      ＆LT; DIV CLASS =行＆GT;\r
        ＆LT; DIV CLASS =COL-MD-6＆GT;\r
          ＆LT; p =类输入组＆GT;\r
            ＆LT;输入类型=文本级=表格控UIB-日期选择器，弹出={{日期格式}}NG模型=DTNG-变化=dateSelected（）是开=popup1年开业日期选择器选项=dateOptionsNG-所需=真密文=关闭ALT-输入格式=altInputFormats定制级=dayClass（日期模式）MAX-日期=下降速率闽日期=下降速率日期禁用=禁用（日期模式）/＆GT;\r
            ＆LT;跨度类=输入组BTN＆GT;\r
\r
              ＆LT;按钮式=按钮级=BTN BTN-默认的NG点击=open1（）＆GT;＆LT; I类=glyphicon glyphicon日历＆GT;＆LT; / I＆GT;＆LT; /按钮＆GT;\r
            ＆LT; / SPAN＆GT;\r
          ＆所述; / P＆GT;\r
        ＆LT; / DIV＆GT;\r
      ＆LT; / DIV＆GT;\r
    ＆LT; / DIV＆GT;\r
  ＆LT; /身体GT;

siteDatePicker.js：

  VAR对myApp = angular.module（'ui.bootstrap.demo'，['ngAnimate'，'ui.bootstrap'，'ui.bootstrap.dateparser'，'ui.bootstrap .datepicker']）;                 myApp.controller（'DatepickerDemoCtrl'，函数（$范围，$ HTTP）{                $ scope.today =功能（）{
                    $ scope.dt =新的日期（）;
                  };
                  $ scope.today（）;                  $ scope.clear =功能（）{
                    $ scope.dt = NULL;
                  };                  $ scope.inlineOptions = {
                    MINDATE：新的Date（）
                    showWeeks：假的
                  };                  $ scope.dateOptions = {
                      formatYear：'YY'，
                      MAXDATE：新的日期（2020，5，22）
                      MINDATE：新的Date（）
                      startingDay：1
                    };                    //禁用周末选择
                    功能disabledasda（数据）{
                      VAR日期= data.date，
                        模式= data.mode;
                      返回模式==='天'和;＆安培; （date.getDay（）=== 0 || date.getDay（）=== 6）;
                    }                  $ scope.toggleMin =功能（）{
                    $ scope.inlineOptions.minDate = $ scope.inlineOptions.minDate？空：新的Date（）;
                    $ scope.dateOptions.minDate = $ scope.inlineOptions.minDate;
                  };                  $ scope.toggleMin（）;                  $ scope.open1 =功能（）{
                    $ scope.popup1.opened = TRUE;
                  };
                  $ scope.setDate =功能（年，月，日）{
                    $ scope.dt =新的日期（年，月，日）;
                  };                  $ scope.formats = ['DD-MMMM-YYYY'，'YYYY / MM / DD'，'DD.MM.YYYY'，'shortDate'];
                  $ scope.format = $ scope.formats [0];
                  $ scope.altInputFormats = ['！M / D / YYYY！'];                  $ scope.popup1 = {
                    打开：假的
                  };
                  VAR明天=新的日期（）;
                  tomorrow.setDate（tomorrow.getDate（）+ 1）;
                  VAR afterTomorrow =新的日期（）;
                  afterTomorrow.setDate（tomorrow.getDate（）+ 1）;
                  $ scope.events = [
                    {
                      日期：明天，
                      状态：'全'
                    }，
                    {
                      日期：afterTomorrow，
                      状态：'部分'
                    }
                  ];
                  $ scope.disabled =功能（日期模式）{                    $ scope.holidays = [
                      新的Date（2016,2,14）
                      新的Date（2016,2,15）
                      新的Date（2016,2,16）
                      新的Date（）
                    ]                    VAR isHoliday = TRUE;
                    对于（VAR I = 0; I＆LT; $ scope.holidays.length;我++）{
                      如果（areDatesEqual（$ scope.holidays [I]中，日期））{
                        isHoliday = FALSE;
                      }
                    }                    回报（模式==='天'和;＆安培; isHoliday）;
                  };                  功能areDatesEqual（DATE1，DATE2）{                    返回date1.setHours（0,0,0,0）=== date2.setHours（0,0,0,0）                  }                  $ scope.dayClass =功能（日期模式）{                VAR任命= [
                  新的Date（2016,2,3）
                  新的Date（2016,2,8）
                  新的Date（2016,2,22）
                ]                如果（模式==='天'）{                  VAR dateToCheck =新的日期（日期）;                  对于（VAR I = 0; I＆LT; appointments.length;我++）{
                    如果（areDatesEqual（约会[I]，dateToCheck））{
                      回报预约;
                    }
                  }
                }
                返回'';
              };              $ scope.dateSelected =功能（）{        VAR任命= [
          新的Date（2016,2,3）
          新的Date（2016,2,8）
          新的Date（2016,2,22）
        ];        VAR dateSelected =新的日期（$ scope.dt）;        对于（VAR I = 0; I＆LT; appointments.length;我++）{
          如果（areDatesEqual（约会[I]，dateSelected））{
            的performAction（）;
          }
        }      };      功能的performAction（）{
        警报（预约日期选定）;
      }
     $ scope.dtmax =新的日期（）;
                 }）;

siteDatePicker.html：

 ＆LT; HTML和GT;
      ＆LT; HEAD＆GT;
        ＆LT;标题＆GT; Typehead＆LT; /标题＆GT;
        ＆LT;间的charset =UTF-8＆GT;
        ＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，初始规模= 1＆GT;
        ＆LT;链接rel =stylesheet属性HREF =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css/＆GT;
        ＆所述; SCRIPT SRC =https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.js＆GT;＆下; /脚本＆GT;
        ＆LT;脚本src=\"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular-animate.js\"></script>
        ＆LT;脚本src=\"https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js\"></script>
      ＆LT;脚本SRC =./ siteDatePicker.js＆GT;＆LT; / SCRIPT＆GT;          ＆LT;风格＆GT;
          。全键跨度{
            背景色：暗绿;
            边界半径：32PX;
            颜色：黑色;
          }
          .partially按钮跨度{
            背景色：橙色;
            边界半径：32PX;
            颜色：黑色;
          }
          .appointment＆GT;按钮{
            颜色：白色;
            背景色：红色;
          }        ＆LT; /风格＆GT;      ＆LT; /头＆GT;
      ＆LT;机身NG-应用=ui.bootstrap.demo＆GT;         ＆LT; DIV NG控制器=DatepickerDemoCtrl＆GT;
          ＆LT; pre＆GT;选定的日期为：＆LT;环境监察及GT; {{DT |日期：'fullDate'}}＆LT; / EM＆GT;＆LT; / pre＆GT;          ＆LT; H4＆GT;＆弹出LT; / H4＆GT;
          ＆LT; DIV CLASS =行＆GT;
            ＆LT; DIV CLASS =COL-MD-6＆GT;
              ＆LT; p =类输入组＆GT;
                ＆LT;输入类型=文本级=表格控UIB-日期选择器，弹出={{日期格式}}NG模型=DTNG-变化=dateSelected（）是开=popup1年开业日期选择器选项=dateOptionsNG-所需=真密文=关闭ALT-输入格式=altInputFormats定制级=dayClass（日期模式）MAX-日期=下降速率闽日期=下降速率日期禁用=禁用（日期模式）/＆GT;
                ＆LT;跨度类=输入组BTN＆GT;                  ＆LT;按钮式=按钮级=BTN BTN-默认的NG点击=open1（）＆GT;＆LT; I类=glyphicon glyphicon日历＆GT;＆LT; / I＆GT;＆LT; /按钮＆GT;
                ＆LT; / SPAN＆GT;
              ＆所述; / P＆GT;
            ＆LT; / DIV＆GT;
          ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
      ＆LT; /身体GT;
    ＆LT; / HTML＆GT;

以上执行以下操作：
1）禁用日历中的所有日期
2）尝试启用我在假期阵列传递siteDatePicker.js日期

什么情况是，日期没有得到启用，因为我认为最大最新的和最小的最新指令（检查HTML页面中输入标签）不允许因为这些日期，我在分钟提供秋季启用的日期到最大范围！

我做了什么，让这些日期？
任何帮助将是AP preciated！

解决方案

哎呀！逸岸这正是我需要删除！我需要从HTML删除MAX-日期和最小日期：
以下是code片段！

 VAR对myApp = angular.module（'ui.bootstrap.demo'，[' ngAnimate'，'ui.bootstrap'，'ui.bootstrap.dateparser'，'ui.bootstrap.datepicker']）;\r
\r
\r
\r
             myApp.controller（'DatepickerDemoCtrl'，函数（$范围，$ HTTP）{\r
 \r
            $ scope.today =功能（）{\r
                $ scope.dt =新的日期（）;\r
              };\r
              $ scope.today（）;\r
\r
              $ scope.clear =功能（）{\r
                $ scope.dt = NULL;\r
              };\r
\r
              $ scope.inlineOptions = {\r
                MINDATE：新的Date（）\r
                showWeeks：假的\r
              };\r
\r
              $ scope.dateOptions = {\r
                  formatYear：'YY'，\r
                  MAXDATE：新的日期（2020，5，22）\r
                  MINDATE：新的Date（）\r
                  startingDay：1\r
                };\r
\r
                //禁用周末选择\r
                功能disabledasda（数据）{\r
                  VAR日期= data.date，\r
                    模式= data.mode;\r
                  返回模式==='天'和;＆安培; （date.getDay（）=== 0 || date.getDay（）=== 6）;\r
                }\r
\r
              $ scope.toggleMin =功能（）{\r
                $ scope.inlineOptions.minDate = $ scope.inlineOptions.minDate？空：新的Date（）;\r
                $ scope.dateOptions.minDate = $ scope.inlineOptions.minDate;\r
              };\r
\r
              $ scope.toggleMin（）;\r
\r
              $ scope.open1 =功能（）{\r
                $ scope.popup1.opened = TRUE;\r
              };\r
\r
\r
              $ scope.setDate =功能（年，月，日）{\r
                $ scope.dt =新的日期（年，月，日）;\r
              };\r
\r
              $ scope.formats = ['DD-MMMM-YYYY'，'YYYY / MM / DD'，'DD.MM.YYYY'，'shortDate'];\r
              $ scope.format = $ scope.formats [0];\r
              $ scope.altInputFormats = ['！M / D / YYYY！'];\r
\r
              $ scope.popup1 = {\r
                打开：假的\r
              };\r
\r
\r
              VAR明天=新的日期（）;\r
              tomorrow.setDate（tomorrow.getDate（）+ 1）;\r
              VAR afterTomorrow =新的日期（）;\r
              afterTomorrow.setDate（tomorrow.getDate（）+ 1）;\r
              $ scope.events = [\r
                {\r
                  日期：明天，\r
                  状态：'全'\r
                }，\r
                {\r
                  日期：afterTomorrow，\r
                  状态：'部分'\r
                }\r
              ];\r
              $ scope.disabled =功能（日期模式）{\r
\r
                $ scope.holidays = [\r
                  新的Date（2016,2,14）\r
                  新的Date（2016,2,15）\r
                  新的Date（2016,2,16）\r
新的Date（）\r
                ]\r
\r
                VAR isHoliday = TRUE;\r
                对于（VAR I = 0; I＆LT; $ scope.holidays.length;我++）{\r
                  如果（areDatesEqual（$ scope.holidays [I]中，日期））{\r
                    isHoliday = FALSE;\r
                  }\r
                }\r
\r
                回报（模式==='天'和;＆安培; isHoliday）;\r
              };\r
\r
\r
\r
              功能areDatesEqual（DATE1，DATE2）{\r
\r
                返回date1.setHours（0,0,0,0）=== date2.setHours（0,0,0,0）\r
\r
              }\r
\r
              $ scope.dayClass =功能（日期模式）{\r
\r
            VAR任命= [\r
              新的Date（2016,2,3）\r
              新的Date（2016,2,8）\r
              新的Date（2016,2,22）\r
            ]\r
\r
            如果（模式==='天'）{\r
\r
              VAR dateToCheck =新的日期（日期）;\r
\r
              对于（VAR I = 0; I＆LT; appointments.length;我++）{\r
                如果（areDatesEqual（约会[I]，dateToCheck））{\r
                  回报预约;\r
                }\r
              }\r
            }\r
            返回'';\r
          };\r
\r
          $ scope.dateSelected =功能（）{\r
\r
    VAR任命= [\r
      新的Date（2016,2,3）\r
      新的Date（2016,2,8）\r
      新的Date（2016,2,22）\r
    ];\r
\r
    VAR dateSelected =新的日期（$ scope.dt）;\r
\r
    对于（VAR I = 0; I＆LT; appointments.length;我++）{\r
      如果（areDatesEqual（约会[I]，dateSelected））{\r
        的performAction（）;\r
      }\r
    }\r
\r
  };\r
\r
  功能的performAction（）{\r
    警报（预约日期选定）;\r
  }\r
\r
\r
 $ scope.dtmax =新的日期（）;\r
             }）;

。全按钮跨度{\r
        背景色：暗绿;\r
        边界半径：32PX;\r
        颜色：黑色;\r
      }\r
      .partially按钮跨度{\r
        背景色：橙色;\r
        边界半径：32PX;\r
        颜色：黑色;\r
      }\r
      .appointment＆GT;按钮{\r
        颜色：白色;\r
        背景色：红色;\r
      }

＆LT; HEAD＆GT;\r
\r
  ＆LT;标题＆GT;＆日期选择器LT; /标题＆GT;\r
  ＆LT;间的charset =UTF-8＆GT;\r
  ＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，初始规模= 1＆GT;\r
 ＆LT;链接rel =stylesheet属性HREF =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css/＆GT;\r
    ＆所述; SCRIPT SRC =https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.js＆GT;＆下; /脚本＆GT;\r
    ＆LT;脚本src=\"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular-animate.js\"></script>\r
    ＆LT;脚本src=\"https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js\"></script>\r
  ＆LT;脚本SRC =./ datePicker.js＆GT;＆LT; / SCRIPT＆GT;\r
\r
\r
\r
\r
\r
\r
＆LT; /头＆GT;\r
\r
＆LT;机身NG-应用=ui.bootstrap.demo＆GT;\r
 \r
     ＆LT; DIV NG控制器=DatepickerDemoCtrl＆GT;\r
      ＆LT; pre＆GT;选定的日期为：＆LT;环境监察及GT; {{DT |日期：'fullDate'}}＆LT; / EM＆GT;＆LT; / pre＆GT;\r
\r
      ＆LT; H4＆GT;＆弹出LT; / H4＆GT;\r
      ＆LT; DIV CLASS =行＆GT;\r
        ＆LT; DIV CLASS =COL-MD-6＆GT;\r
          ＆LT; p =类输入组＆GT;\r
            ＆LT;输入类型=文本级=表格控UIB-日期选择器，弹出={{日期格式}}NG模型=DTNG-变化=dateSelected（）是开=popup1年开业日期选择器选项=dateOptionsNG-所需=真密文=关闭ALT-输入格式=altInputFormats定制级=dayClass（日期模式）日期禁用=禁用（日期模式）/＆GT;\r
            ＆LT;跨度类=输入组BTN＆GT;\r
\r
              ＆LT;按钮式=按钮级=BTN BTN-默认的NG点击=open1（）＆GT;＆LT; I类=glyphicon glyphicon日历＆GT;＆LT; / I＆GT;＆LT; /按钮＆GT;\r
            ＆LT; / SPAN＆GT;\r
          ＆所述; / P＆GT;\r
        ＆LT; / DIV＆GT;\r
      ＆LT; / DIV＆GT;\r
    ＆LT; / DIV＆GT;\r
  ＆LT; /身体GT;

var myApp= angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap', 'ui.bootstrap.dateparser', 'ui.bootstrap.datepicker']);



             myApp.controller('DatepickerDemoCtrl', function($scope, $http) {
 
            $scope.today = function() {
                $scope.dt = new Date();
              };
              $scope.today();

              $scope.clear = function() {
                $scope.dt = null;
              };

              $scope.inlineOptions = {
                minDate: new Date(),
                showWeeks: false
              };

              $scope.dateOptions = {
                  formatYear: 'yy',
                  maxDate: new Date(2020, 5, 22),
                  minDate: new Date(),
                  startingDay: 1
                };

                // Disable weekend selection
                function disabledasda(data) {
                  var date = data.date,
                    mode = data.mode;
                  return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
                }

              $scope.toggleMin = function() {
                $scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
                $scope.dateOptions.minDate = $scope.inlineOptions.minDate;
              };

              $scope.toggleMin();

              $scope.open1 = function() {
                $scope.popup1.opened = true;
              };


              $scope.setDate = function(year, month, day) {
                $scope.dt = new Date(year, month, day);
              };

              $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
              $scope.format = $scope.formats[0];
              $scope.altInputFormats = ['M!/d!/yyyy'];

              $scope.popup1 = {
                opened: false
              };


              var tomorrow = new Date();
              tomorrow.setDate(tomorrow.getDate() + 1);
              var afterTomorrow = new Date();
              afterTomorrow.setDate(tomorrow.getDate() + 1);
              $scope.events = [
                {
                  date: tomorrow,
                  status: 'full'
                },
                {
                  date: afterTomorrow,
                  status: 'partially'
                }
              ];
              $scope.disabled = function(date, mode){

                $scope.holidays = [
                  new Date(2016,2,14),
                  new Date(2016,2,15),
                  new Date(2016,2,16),
				  new Date()
                ]

                var isHoliday = true;
                for(var i = 0; i < $scope.holidays.length ; i++) {
                  if(areDatesEqual($scope.holidays[i], date)){
                    isHoliday = false;
                  }
                }

                return ( mode === 'day' && isHoliday );
              };

			  
			  
              function areDatesEqual(date1, date2) {

                return date1.setHours(0,0,0,0) === date2.setHours(0,0,0,0)

              }

              $scope.dayClass = function(date, mode) {

            var appointments = [
              new Date(2016,2,3),
              new Date(2016,2,8),
              new Date(2016,2,22),
            ]

            if (mode === 'day') {

              var dateToCheck = new Date(date);

              for(var i = 0; i < appointments.length ; i++) {
                if(areDatesEqual(appointments[i], dateToCheck)){
                  return 'appointment';
                }
              }
            }
            return '';
          };

          $scope.dateSelected = function(){

    var appointments = [
      new Date(2016,2,3),
      new Date(2016,2,8),
      new Date(2016,2,22),
    ];

    var dateSelected = new Date($scope.dt);

    for(var i = 0; i < appointments.length ; i++) {
      if(areDatesEqual(appointments[i], dateSelected)){
        performAction();
      }
    }

  };

  function performAction(){
    alert("Appointment date selected");
  }


 $scope.dtmax = new Date();
             });

      .full button span {
        background-color: limegreen;
        border-radius: 32px;
        color: black;
      }
      .partially button span {
        background-color: orange;
        border-radius: 32px;
        color: black;
      }
      .appointment>button {
        color: white;
        background-color: red;
      }

<head>

  <title>datePicker</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular-animate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>
  <script src="./datePicker.js"></script>






</head>

<body ng-app="ui.bootstrap.demo" >
 
     <div ng-controller="DatepickerDemoCtrl">
      <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>

      <h4>Popup</h4>
      <div class="row">
        <div class="col-md-6">
          <p class="input-group">
            <input type="text" class="form-control"  uib-datepicker-popup="{{dateformat}}" ng-model="dt" ng-change="dateSelected()"is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats"  custom-class="dayClass(date, mode)"  max-date="dtmax" min-date="dtmax" date-disabled="disabled(date, mode)"/>
            <span class="input-group-btn">
			
              <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
            </span>
          </p>
        </div>
      </div>
    </div>
  </body>

siteDatePicker.js:

    var myApp= angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap', 'ui.bootstrap.dateparser', 'ui.bootstrap.datepicker']);



                 myApp.controller('DatepickerDemoCtrl', function($scope, $http) {

                $scope.today = function() {
                    $scope.dt = new Date();
                  };
                  $scope.today();

                  $scope.clear = function() {
                    $scope.dt = null;
                  };

                  $scope.inlineOptions = {
                    minDate: new Date(),
                    showWeeks: false
                  };

                  $scope.dateOptions = {
                      formatYear: 'yy',
                      maxDate: new Date(2020, 5, 22),
                      minDate: new Date(),
                      startingDay: 1
                    };

                    // Disable weekend selection
                    function disabledasda(data) {
                      var date = data.date,
                        mode = data.mode;
                      return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
                    }

                  $scope.toggleMin = function() {
                    $scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
                    $scope.dateOptions.minDate = $scope.inlineOptions.minDate;
                  };

                  $scope.toggleMin();

                  $scope.open1 = function() {
                    $scope.popup1.opened = true;
                  };


                  $scope.setDate = function(year, month, day) {
                    $scope.dt = new Date(year, month, day);
                  };

                  $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
                  $scope.format = $scope.formats[0];
                  $scope.altInputFormats = ['M!/d!/yyyy'];

                  $scope.popup1 = {
                    opened: false
                  };


                  var tomorrow = new Date();
                  tomorrow.setDate(tomorrow.getDate() + 1);
                  var afterTomorrow = new Date();
                  afterTomorrow.setDate(tomorrow.getDate() + 1);
                  $scope.events = [
                    {
                      date: tomorrow,
                      status: 'full'
                    },
                    {
                      date: afterTomorrow,
                      status: 'partially'
                    }
                  ];
                  $scope.disabled = function(date, mode){

                    $scope.holidays = [
                      new Date(2016,2,14),
                      new Date(2016,2,15),
                      new Date(2016,2,16),
                      new Date()
                    ]

                    var isHoliday = true;
                    for(var i = 0; i < $scope.holidays.length ; i++) {
                      if(areDatesEqual($scope.holidays[i], date)){
                        isHoliday = false;
                      }
                    }

                    return ( mode === 'day' && isHoliday );
                  };



                  function areDatesEqual(date1, date2) {

                    return date1.setHours(0,0,0,0) === date2.setHours(0,0,0,0)

                  }

                  $scope.dayClass = function(date, mode) {

                var appointments = [
                  new Date(2016,2,3),
                  new Date(2016,2,8),
                  new Date(2016,2,22),
                ]

                if (mode === 'day') {

                  var dateToCheck = new Date(date);

                  for(var i = 0; i < appointments.length ; i++) {
                    if(areDatesEqual(appointments[i], dateToCheck)){
                      return 'appointment';
                    }
                  }
                }
                return '';
              };

              $scope.dateSelected = function(){

        var appointments = [
          new Date(2016,2,3),
          new Date(2016,2,8),
          new Date(2016,2,22),
        ];

        var dateSelected = new Date($scope.dt);

        for(var i = 0; i < appointments.length ; i++) {
          if(areDatesEqual(appointments[i], dateSelected)){
            performAction();
          }
        }

      };

      function performAction(){
        alert("Appointment date selected");
      }


     $scope.dtmax = new Date();
                 });

siteDatePicker.html:

    <html>
      <head>
        <title>Typehead</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular-animate.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>
      <script src="./siteDatePicker.js"></script>

          <style>
          .full button span {
            background-color: limegreen;
            border-radius: 32px;
            color: black;
          }
          .partially button span {
            background-color: orange;
            border-radius: 32px;
            color: black;
          }
          .appointment>button {
            color: white;
            background-color: red;
          }

        </style>   

      </head>
      <body ng-app="ui.bootstrap.demo" >

         <div ng-controller="DatepickerDemoCtrl">
          <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>

          <h4>Popup</h4>
          <div class="row">
            <div class="col-md-6">
              <p class="input-group">
                <input type="text" class="form-control"  uib-datepicker-popup="{{dateformat}}" ng-model="dt" ng-change="dateSelected()"is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats"  custom-class="dayClass(date, mode)"  max-date="dtmax" min-date="dtmax" date-disabled="disabled(date, mode)"/>
                <span class="input-group-btn">

                  <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
              </p>
            </div>
          </div>
        </div>
      </body>
    </html>

the above does the following: 1) disables all dates in the calendar 2) tries to enable the dates i passed in holidays array in siteDatePicker.js

what happens is that the dates do not get enabled because i think max-date and min-date directives(check input tag in html page) does not allow the dates to be enabled since these dates that i provide fall in that min to max range!

what do i do to enable these dates? any help would be appreciated!

解决方案

opps! infact it is exactly what i need to remove! i need to remove max-date and min-date from html: following is the code snippet!

var myApp= angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap', 'ui.bootstrap.dateparser', 'ui.bootstrap.datepicker']);



             myApp.controller('DatepickerDemoCtrl', function($scope, $http) {
 
            $scope.today = function() {
                $scope.dt = new Date();
              };
              $scope.today();

              $scope.clear = function() {
                $scope.dt = null;
              };

              $scope.inlineOptions = {
                minDate: new Date(),
                showWeeks: false
              };

              $scope.dateOptions = {
                  formatYear: 'yy',
                  maxDate: new Date(2020, 5, 22),
                  minDate: new Date(),
                  startingDay: 1
                };

                // Disable weekend selection
                function disabledasda(data) {
                  var date = data.date,
                    mode = data.mode;
                  return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
                }

              $scope.toggleMin = function() {
                $scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
                $scope.dateOptions.minDate = $scope.inlineOptions.minDate;
              };

              $scope.toggleMin();

              $scope.open1 = function() {
                $scope.popup1.opened = true;
              };


              $scope.setDate = function(year, month, day) {
                $scope.dt = new Date(year, month, day);
              };

              $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
              $scope.format = $scope.formats[0];
              $scope.altInputFormats = ['M!/d!/yyyy'];

              $scope.popup1 = {
                opened: false
              };


              var tomorrow = new Date();
              tomorrow.setDate(tomorrow.getDate() + 1);
              var afterTomorrow = new Date();
              afterTomorrow.setDate(tomorrow.getDate() + 1);
              $scope.events = [
                {
                  date: tomorrow,
                  status: 'full'
                },
                {
                  date: afterTomorrow,
                  status: 'partially'
                }
              ];
              $scope.disabled = function(date, mode){

                $scope.holidays = [
                  new Date(2016,2,14),
                  new Date(2016,2,15),
                  new Date(2016,2,16),
				  new Date()
                ]

                var isHoliday = true;
                for(var i = 0; i < $scope.holidays.length ; i++) {
                  if(areDatesEqual($scope.holidays[i], date)){
                    isHoliday = false;
                  }
                }

                return ( mode === 'day' && isHoliday );
              };

			  
			  
              function areDatesEqual(date1, date2) {

                return date1.setHours(0,0,0,0) === date2.setHours(0,0,0,0)

              }

              $scope.dayClass = function(date, mode) {

            var appointments = [
              new Date(2016,2,3),
              new Date(2016,2,8),
              new Date(2016,2,22),
            ]

            if (mode === 'day') {

              var dateToCheck = new Date(date);

              for(var i = 0; i < appointments.length ; i++) {
                if(areDatesEqual(appointments[i], dateToCheck)){
                  return 'appointment';
                }
              }
            }
            return '';
          };

          $scope.dateSelected = function(){

    var appointments = [
      new Date(2016,2,3),
      new Date(2016,2,8),
      new Date(2016,2,22),
    ];

    var dateSelected = new Date($scope.dt);

    for(var i = 0; i < appointments.length ; i++) {
      if(areDatesEqual(appointments[i], dateSelected)){
        performAction();
      }
    }

  };

  function performAction(){
    alert("Appointment date selected");
  }


 $scope.dtmax = new Date();
             });

.full button span {
        background-color: limegreen;
        border-radius: 32px;
        color: black;
      }
      .partially button span {
        background-color: orange;
        border-radius: 32px;
        color: black;
      }
      .appointment>button {
        color: white;
        background-color: red;
      }

<head>

  <title>datePicker</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular-animate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>
  <script src="./datePicker.js"></script>






</head>

<body ng-app="ui.bootstrap.demo" >
 
     <div ng-controller="DatepickerDemoCtrl">
      <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>

      <h4>Popup</h4>
      <div class="row">
        <div class="col-md-6">
          <p class="input-group">
            <input type="text" class="form-control"  uib-datepicker-popup="{{dateformat}}" ng-model="dt" ng-change="dateSelected()"is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats"  custom-class="dayClass(date, mode)" date-disabled="disabled(date, mode)"/>
            <span class="input-group-btn">
			
              <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
            </span>
          </p>
        </div>
      </div>
    </div>
  </body>

这篇关于启用angularjs日期选择器UI自举具体日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

启用angularjs日期选择器UI自举具体日期 [英] enable specific dates in angularjs datepicker ui bootstrap

问题描述

相关文章

JavaScript最新文章

热门教程

热门工具

登录关闭

启用angularjs日期选择器UI自举具体日期 [英] enable specific dates in angularjs datepicker ui bootstrap

问题描述

相关文章

JavaScript最新文章

热门教程

热门工具

登录 关闭

登录关闭