javascript 日期选择器

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript 日期选择器相关的知识,希望对你有一定的参考价值。

    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/picker.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/picker.date.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/themes/default.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/themes/default.date.css" rel="stylesheet" />
    <link href="~/Content/materialize/css/ghpages-materialize.css" rel="stylesheet" />

    @*<script src="~/Scripts/materialize/materialize.min.js"></script>*@
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>


    window.onload = function () {

            $(".dropdown-button").dropdown(
              {
                  belowOrigin: true
              }
            );
          
            $('.scrollspy').scrollSpy();
            $(".button-collapse").sideNav();
                       
            $.extend($.fn.pickadate.defaults, {
                monthsFull: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
                weekdaysShort: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
                today: 'Hoje',
                clear: 'Limpar',
                close: 'ok',
                selectMonths: true,
                selectYears: true,
                labelMonthNext: 'Ir para próximo mês',
                labelMonthPrev: 'Ir para o mês anterior',
                labelMonthSelect: 'Selecione um mês',
                labelYearSelect: 'Selecione um ano',
                formatSubmit: 'dd/mm/yyyy'               
            });

            var from_$input = $('#input_from').pickadate(
                    {
                        onSet: function (date) {
                            if (date.select != undefined)
                                Parametro.setBegin(new Date(date.select));
                        }
                    }
                ),
                    from_picker = from_$input.pickadate('picker')

            var to_$input = $('#input_to').pickadate(
                     {
                         onSet: function (date) {
                             if (date.select!=undefined)
                                Parametro.setEnd(new Date(date.select));
                         }
                     }
                ),
                to_picker = to_$input.pickadate('picker')
            
            // Check if there’s a “from” or “to” date to start with.
            if (from_picker.get('value')) {
                to_picker.set('min', from_picker.get('select'))
            }
            if (to_picker.get('value')) {
                from_picker.set('max', to_picker.get('select'))
            }

            // When something is selected, update the “from” and “to” limits.
            from_picker.on('set', function (event) {
                if (event.select) {
                    to_picker.set('min', from_picker.get('select'))
                }
                else if ('clear' in event) {
                    to_picker.set('min', false)
                }
            })

            to_picker.on('set', function (event) {
                if (event.select) {
                    from_picker.set('max', to_picker.get('select'))
                }
                else if ('clear' in event) {
                    from_picker.set('max', false)
                }
            })

            //$('.dateBegin').pickadate({
            //    selectMonths: true, // Creates a dropdown to control month
            //    selectYears: 15, // Creates a dropdown of 15 years to control year,
            //    //today: 'Today',
            //    //clear: 'Clear',
            //    //close: 'Ok',
            //    closeOnSelect: true // Close upon selecting a date,
            //});
        };

    </script>

以上是关于javascript 日期选择器的主要内容,如果未能解决你的问题,请参考以下文章

无法使用 javascript 弹出日期选择器

选择日期选择器时删除 Javascript 添加的 HTML 值

计算属性设置器导致 vuejs / javascript 在日期选择器焦点上崩溃浏览器

使用纯 Javascript 隐藏默认日期选择器 UI [重复]

javascript 日期选择器

javascript 日期选择器,afterShow.js