526互联

jquery ui 日期选择器简单使用

发布时间 2023-08-30 13:58:22作者: carol2014

jquery ui 基于Jquery的开源网页用户界面代码库，其中的交互效果包括缩放（Resizable） , 拖动（Draggable） , 放置（Droppable） , 选择（Selectable） , 排序（Sortable）等非常好用，日期选择器到现在为止仍然很好用。

<script src="../plugins/jquery/jquery-1.9.1.js"></script>
<script src="../plugins/jquery-ui/jquery-ui.min.js"></script>
<link href="../plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
<body>
  <div>日期范围：<input typed="text" id="sdate" /> <input typed="text" id="edate" /></div>
</body>

<script>
  $(function () {
    $.datepicker.regional["zh-CN"] = {
      closeText: "关闭",
      prevText: "<上月",
      nextText: "下月>",
      currentText: "今天",
      monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
      monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
      dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
      dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],
      weekHeader: "周",
      dateFormat: "yy-mm-dd",
      firstDay: 1,
      isRTL: false,
      showMonthAfterYear: true,
      yearSuffix: "年",
    };
    $.datepicker.setDefaults($.datepicker.regional["zh-CN"]);

    $("#sdate").datepicker({
      minDate: -20,
      maxDate: "+1M +10D",
      defaultDate: "+1w",
      changeMonth: true,
      changeYear: true,
      showWeek: true,
      numberOfMonths: 1,
      dateFormat: "yy-mm-dd",
      onClose: function (selectedDate) {
        $("#edate").datepicker("option", "minDate", selectedDate);
      },
    });
    $("#edate").datepicker({
      minDate: -20,
      maxDate: "+1M +10D",
      defaultDate: "+1w",
      changeMonth: true,
      changeYear: true,
      showWeek: true,
      numberOfMonths: 1,
      dateFormat: "yy-mm-dd",
      onClose: function (selectedDate) {
        $("#sdate").datepicker("option", "maxDate", selectedDate);
      },
    });
  });
</script>