1

私はこの日付範囲ピッカーを使用しています https://github.com/dangrossman/bootstrap-daterangepicker

これをscripts.jsで初期化してから、サイトのフッターでscripts.jsを呼び出します

$(function(){
    if(jQuery().daterangepicker) {
        // Open Left
        $('.daterange.right').daterangepicker({
            opens: 'left'
        });

        // Open Right - default
        $('.daterange').daterangepicker();

        // Report range
        $('#reportrange').daterangepicker({
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                'Last 7 Days': [moment(), moment().add({ days: -6 })],
                'Last 30 Days': [moment().add({ days: -29 }), moment()],
            },
              startDate: moment().subtract('days', 29),
              endDate: moment()
        },
        function(start, end) {
            console.log(start.format('MMMM d, YYYY'));
            $('#reportrange #rangedate').html(start.format('MMMM d, YYYY') + ' - ' + end.format('MMMM d, YYYY'));
        });
    }
});

私のメインページに私が置いた

$(function(){
   alert(start);
});

そして私は得るUncaught ReferenceError: start is not defined

start が定義されていないのはなぜですか? 関数 (start,end) からその変数を取得して、ページの読み込み時に値を使用できるようにするにはどうすればよいですか? フィールドのhtmlを解析することで日付を取得できることはわかって$('#rangedate').html();いますが、代わりに変数を使用するにはどうすればよいですか?

ありがとう

4

1 に答える 1

1

変数は、そのコールバック匿名関数内でスコープstart されているため、定義されていません。アクセスできるようにするには、それにアクセスするか、スコープが他の関数内にある変数に割り当てる必要があります (またはグローバル変数に割り当てますが、これはグローバル スコープを汚染するためお勧めしません)。return

例えば：

$(function(){
    var startDate; // Note this

    if(jQuery().daterangepicker) {
        // Open Left
        $('.daterange.right').daterangepicker({
            opens: 'left'
        });

        // Open Right - default
        $('.daterange').daterangepicker();

        // Report range
        $('#reportrange').daterangepicker({
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                'Last 7 Days': [moment(), moment().add({ days: -6 })],
                'Last 30 Days': [moment().add({ days: -29 }), moment()],
            },
              startDate: moment().subtract('days', 29),
              endDate: moment()
        },
        function(start, end) {
            console.log(start.format('MMMM d, YYYY'));
            $('#reportrange #rangedate').html(start.format('MMMM d, YYYY') + ' - ' + end.format('MMMM d, YYYY'));
            startDate = start; // Assign to the variable in the higher scope
        });
    }

    alert(startDate); // Now our variable is available
});

編集：

いつでもアクセスでき、日付範囲の変更に合わせて更新されるグローバル変数が必要です。

calendarグローバル スコープを過度に汚染しないために、以下の例のように、変数を格納する新しいオブジェクトを作成することをお勧めします。

var calendar = {}; // Global object: note that this is **outside**
                   // of your anonymous function below.
$(function(){

    if(jQuery().daterangepicker) {

        // Report range
        $('#reportrange').daterangepicker({
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                'Last 7 Days': [moment(), moment().add({ days: -6 })],
                'Last 30 Days': [moment().add({ days: -29 }), moment()]
            },
              startDate: moment().subtract('days', 29),
              endDate: moment()
        },
        function(start, end) {
            console.log(start.format('MMMM d, YYYY'));
            $('#reportrange #rangedate').html(start.format('MMMM d, YYYY') + ' - ' + end.format('MMMM d, YYYY'));
            calendar.startDate = start; // Assign `start` as a property
                                        // of your global variable
        });
    }

});

これで、どの関数でもいつでも変数にアクセスできます。calendar.startDate入力の日付を変更した後、コンソールを開いて入力してみてください。

于 2013-08-21T00:57:00.997 に答える