Question

我需要有一个jQuery datepicker动态切换a）日历字段的显示，b）月份选择和c）切换changeMonth属性的开/关。

详细说明：

我有两个日期选择器（＆＃34;来自＆＃34;）和（＆＃34;到＆＃34;）。＆＃34;到＆＃34;中的日期总是需要大于或等于＆＃34;来自＆＃34;中的那个。完成
两个日期选择器都使用＆＃34; altField＆＃34;并且表单始终将altField作为yyyy-mm-dd格式的querystring-parameters传递，与向用户显示的格式无关。的完成
示例：用户选择＆＃34; 2017＆＃34;，表单发送＆＃34; 2017-01-01＆＃34;。
根据单选按钮选择，两个日期选择器应允许用户仅选择a）年，月和日，或b）年和月或c）年。 这是我无法实现的目标

实施例：如果单选按钮＆＃34;年＆＃34;如果激活，则datepicker应该只允许选择年份。从而。然后应停用月份选择（datepicker-property：changeMonth: false; css .ui-datepicker-month {display: none;}）和未显示的日期（css：.ui-datepicker-calendar {display: none;}）。

我理解有关jQuery datepicker的问题经常被问到，但我已投入大量时间来解决这个问题并且没有设法实现我的目标，因此我寻求帮助。

我非常感谢任何帮助！最好的问候，
托马斯

代码：
的jsfiddle：
https://jsfiddle.net/n9tnpsyh/

在Stackoverflow上：

<form id="analysis_form" method="get" action="analysis.asp">
  <div>
    Show results split by ... <br>
      <label for="yeartype">Year
          <input type="radio" id="yeartype" name="type" value="year" required>
      </label>
      <label for="monthtype">Month
          <input type="radio" id="monthtype" name="type" value="month" required>
      </label>
      <label for="daytype">Day
          <input type="radio" id="daytype" name="type" value="day" required>
      </label>
  </div>
  <br> <br>
  <div>

  <label for="from">from
    <input type="text" required id="from">
  </label>
    <input type="text" id="actual_from" name="from" hidden>
  </div>

  <div>
  <label for="to">to
    <input type="text" required id="to">
  </label>
    <input type="text" id="actual_to" name="to" hidden>
  </label>
  </div>

</form>

的JavaScript

$(document).ready(function() {

    function registerDatePicker(element) {
        $(element).datepicker({
            changeMonth: true,
            changeYear: true,
            minDate: new Date(2014, 1 - 1, 1),
            maxDate: new Date(2017, 11, 31),
            altField  : element == "#from" ? '#actual_from' : '#actual_to',
            altFormat : 'yy-mm-dd',
            dateFormat: 'yy-mm-dd',
            onClose: function(dateText, inst) {
                if (element == "#from") {
                    $("#to").datepicker("option", {minDate: new Date($("#actual_from").val())});
                }
            },
            beforeShow: function(input, inst)
            {
                setDateFromString(input);
            }
        }
    );

    $(element).focus(function() {
        $(this).datepicker('show');
        if( $(this).datepicker('widget').find('tr#month-year-select').length == 0 )
        {
            var tbody = $(this).datepicker('widget').find('tbody');
            if (element == "#to" && $("#from") && $("#from").val() !== "" && $("#from").val().length === 10)
            {
            } else if (element == "#to" && $("#from") && $("#from").val() !== "" && $("#from").val().length === 7){
                tbody.prepend('<tr id="month-year-select"><td colspan="3" align="center"><p class="ui-state-default" id="datepicker-month-select">Select Month</p></td></tr>');
                tbody.find('#datepicker-month-select').click(function() { pushMonthYear(element); });
            } else if (element == "#to" && $("#from") && $("#from").val() !== "" && $("#from").val().length === 4){
                tbody.prepend('<tr id="month-year-select"><td colspan="3" align="center"><p class="ui-state-default" id="datepicker-month-select"></p></td><td><p> </p><td colspan="3" align="center"><p id="datepicker-year-select" class="ui-state-default">Select Year</p></td></tr>');
                tbody.find('#datepicker-year-select').click(function() { pushYear(element) });
                tbody.find('#datepicker-month-select').click(function() { pushMonthYear(element); });
            } else {
                tbody.prepend('<tr id="month-year-select"><td colspan="3" align="center"><p class="ui-state-default" id="datepicker-month-select">Select Month</p></td><td><p> </p><td colspan="3" align="center"><p id="datepicker-year-select" class="ui-state-default">Select Year</p></td></tr>');
                tbody.find('#datepicker-year-select').click(function() { pushYear(element) });
                tbody.find('#datepicker-month-select').click(function() { pushMonthYear(element); });
            }
        }
    });
}

    function pushMonthYear(element) {
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
        month = parseInt(month) + 1;
        var shortMonthString = $('.ui-datepicker-month option:selected').text();
        var monthNames = $(element).datepicker("option", "monthNames")
        var shortMonthNames = $(element).datepicker("option", "monthNamesShort")
        var monthString = monthNames[shortMonthNames.indexOf(shortMonthString)];
        var year = $('.ui-datepicker-year option:selected').text();
        if (month < 10) {
            month = "0" + month
        }
        $(element).val(year + "-" + month);
        if (element == "#from") {
            $("#actual_from").val(year + "-" + month + "-01");
        } else {
            if ($("#actual_from").val() !== "" && new Date($("#actual_from").val()) > new Date(year + "-" + month + "-01")) {
                $("#actual_to").val($("#actual_from").val());
            } else {
                $("#actual_to").val(year + "-" + month + "-01");
            }
        }
        $(element).datepicker("hide");
    }

    function pushYear(element) {
        var year = $('.ui-datepicker-year option:selected').text();
        $(element).val(year);
        if (element == "#from") {
            $("#actual_from").val(year + "-01-01");
        } else {
            if ($("#actual_from").val() !== "" && new Date($("#actual_from").val()) > new Date(year + "-01-01")) {
                $("#actual_to").val($("#actual_from").val());
            } else {
                $("#actual_to").val(year + "-01-01");
            }
        }
        $(element).datepicker("hide");
    }

    function setDateFromString(element) {
        var dateString = $(element).val();
        var createdDate = null;
        if(dateString.length == 4) {
            createdDate = new Date(dateString, 1, 1, 0, 0, 0);
            $(element).val(dateString + "-01-01");
            if (element == "#from") {
                $("#actual_from").val(dateString + "-01-01");
            } else {
                $("#actual_to").val(dateString + "-01-01");
            }
         } else if (dateString.split(' ').length == 2) {
             var splitDate = dateString.split(' ');
             var monthString = splitDate[0];
             var year = splitDate[1];
             var month = $(element).datepicker("option", "monthNames").indexOf(monthString) + 1;
             $(element).val(year + month + "-01");
             if (element  == "#from") {
                $("#actual_from").val(year + month + "-01");
            } else {
                if ($("#actual_from").val() !== "" && new Date($("#actual_from").val()) > new Date(year + month + "-01")) {
                    $("#actual_to").val($("#actual_from").val());
                } else {
                    $("#actual_to").val(year + month + "-01");
                }
            }
         }
    }

    registerDatePicker("#from");
    registerDatePicker("#to");
});

jQuery datepicker动态切换ui-datepicker-month和日历显示

0 个答案: