web-dev-qa-db-ja.com

jquery datepickerから選択された日付を取得する方法

カレンダーを表示するためにjquery datepickerを使用しています。要件に応じて、アプリケーションで使用するjquery変数でユーザーが選択した日付を取得したいのですが、日付を取得できません。 datepcikerのコード

<div id="datepicker"></div>

ここで、選択したコードを取得しようとしています。

$(document).ready(function () {

        $("#datepicker").datepicker({
            onSelect: function (dateText, inst) {
                var date = $(this).val();
                alert(date);
            }
        });

    });

しかし、私は日付を取得することができません。

javascriptjquerydatepicker
7
Hansal Mehta

これでうまくいくはずです

$(function() {
    $("#datepicker").datepicker();
    $("#datepicker").on("change",function(){
        var selected = $(this).val();
        alert(selected);
    });
});

それは基本的ですが、ここに jsfiddle があり、選択されたときに選択された日付を警告します

更新して日付形式を変更する

$(function() {
    $( "#datepicker" ).datepicker({ dateFormat: "yy-mm-dd" });
    $("#datepicker").on("change",function(){
        var selected = $(this).val();
        alert(selected);
    });
});

jsfiddle

3回目の更新

$(function() {
    $("#datepicker").datepicker({ 
        dateFormat: "yy-mm-dd", 
        onSelect: function(){
            var selected = $(this).val();
            alert(selected);
        }
    });
});

datepickerのネイティブマークアップをもう少し使用しました。ここでuiを試して、後で警告が表示されるかどうかを確認してください。

30
akaBase

これを試して

$('.selector').datepicker({
   onSelect: function(dateText, inst) { ... }
})

クラス.datepicker,の2つの要素があり、セレクタはどの要素から選択するかわかりません。したがって、日付を取得しようとしている入力の名前を指定する必要があります

first = $(".datepicker[name=datepicker1]").datepicker('getDate');
second = $(".datepicker[name=datepicker2]").datepicker('getDate');
1
Ferrakkem Bhuiyan

changeDateの代わりにonSelectイベントの概要 here を使用して、e.dateまたはe.datesを参照できます。以下のJSONを参照してください。

HTML：

<div id='QA'></div>    
<div id='datepicker'></div>

JS：

<script type="text/javascript">     
    $(function() {
        $('#datepicker').datepicker({
            clearBtn: true,
            todayHighlight: false,
            multidate: true

        }) .on('changeDate', function(e){
            $('#QA').html(JSON.stringify(e));
        });
    });
    /*
    {  
       "type":"changeDate",
       "date":"2015-08-08T07:00:00.000Z",
       "dates":[  
         "2015-08-08T07:00:00.000Z"
       ],
       "timeStamp":1438803681861,
       "jQuery21409071635671425611":true,
       "isTrigger":3,
       "namespace":"",
       "namespace_re":null,
       "target":{  

       },
       "delegateTarget":{  

       },
       "currentTarget":{  

       },
       "handleObj":{  
         "type":"changeDate",
         "origType":"changeDate",
         "guid":52,
         "namespace":""
       }
    }
    */

</script>
0
DanielJRobles

試す

$("#datepicker").datepicker({
     onSelect:function(selectedDate)
     {
          alert(selectedDate);
     }
});

OR

$("#datepicker").datepicker({
     onSelect:function (dateText, inst)
     {
          alert(inst);
     }
});
0
Gowri