我如何从datepicker jQuery UI中检索选定的日期值以触发某些操作

编程问答 2022-06-13

问题描述

正如标题所述，我想根据jQuery UI datepicker中的选定日期用数据更新页面。因此，如果没有选择任何日期，我需要检索当前日期值，或者检索选定的日期数据并粉碎当前日期值，这样我就可以在页面上动态显示有关选定日期的内容。

这是到目前为止我的日期选择器代码：

var date_choisie;

$( function() {
    $("#calendrier").datepicker({
        dateFormat: "yy-mm-dd",onSelect: function(selectedDate) {
        // console.log(selectedDate); //Selected date
        date_choisie = selectedDate; //My attempt to put selectedDate in date_choisie
        }
    })
    //set date as current by default
    $("#calendrier").datepicker('setDate',new Date());

    //get date in a variable
    date_choisie = $('#calendrier').datepicker('getDate');
    date_choisie = $.datepicker.formatDate("yy-mm-dd",date_choisie);

    // console.log(date_choisie); //2020-09-20
} );

所以我需要能够在selectedDate中获得date_choisie（也许我应该return selectedDate）

此后，我将使用ajax将date_choisie传递给我的PHP文件：

$.ajax({
    method: 'get',url : 'http://planning-ilm.atwebpages.com/userPlanning/'+ date_choisie,dataType : 'json',success: function(data){
        let semaine = document.createTextNode('Sem du ' + data.datecourante.mday + '/' + data.datecourante.mon + '/' + data.datecourante.year);
        $("#sem")[0].appendChild(semaine);
        showplannings(data.datecourante,data.message);
    }
})

URL将调用以下PHP函数：

 function getUserPlanning($url){
        // Function used to get the user planning
        $today = getdate(); // This is the line i will change with the selected date

        // Searching for monday,if the selected date is not monday
        if($today ['weekday'] !== "Monday"){
            $monday = getdate(strtotime("last Monday")); //This is the line i will change with the selected date
            
            // We get everything in an array
            $dayMonthYear = dayMonthYearOfDate($monday);

            // Concatenation in string
            $dayMonthYearString = $dayMonthYear['day']. ' ' . $dayMonthYear['month']. ' ' . $dayMonthYear['year'];
        
            // We get every day of the week in array
            $theWeek = currentWeek($dayMonthYearString);

            return $error = json_encode([
                'status' => 'ok','datecourante' => $monday,// Here is the monday of the selected day
                'message' => getHisPlanning($url[1],$theWeek)
            ]);
        }else{
            $dayMonthYear = dayMonthYearOfDate($today);
            $dayMonthYearString = $dayMonthYear['day']. ' ' . $dayMonthYear['month']. ' ' . $dayMonthYear['year'];
            // On a la semaine actuelle
            $theWeek = currentWeek($dayMonthYearString);

            
            return $error = json_encode([
                'status' => 'ok','datecourante' => $today,$theWeek)
            ]);
        }
    }

以下是getUserPlanning中使用的功能

function dayMonthYearOfDate($datetostring){
        // Fonction permettant de retourner le jour,le mois et l'année sous forme de tableau
        $jour = $datetostring['mday'];
        $mois = $datetostring['month'];
        $annee = $datetostring['year'];

        $dateofDay = ['day' => $jour,'month' => $mois,'year' => $annee];
        
        return $dateofDay;
    }

function currentWeek($currentDate){
        // Fonction permettant de retourner tous les jours de la semaine courante en prenant un string
        $monday = strtotime($currentDate);
        $tuesday = strtotime("next Tuesday",strtotime($currentDate));
        $wednesday = strtotime("next Wednesday",strtotime($currentDate));
        $thursday = strtotime("next Thursday",strtotime($currentDate));
        $friday = strtotime("next Friday",strtotime($currentDate));
        $saturday = strtotime("next Saturday",strtotime($currentDate));
        $sunday = strtotime("next Sunday",strtotime($currentDate));

        $week = [$monday,$tuesday,$wednesday,$thursday,$friday,$saturday,$sunday];
        return $week;
    }

通过使用getUserPlanning，我可以检索在data.datecourante中注册的所选日期

解决方法

这是返回成功的主要功能

   function getUserPlanning($url){
        // Get the user planning
        $today = $url[2];
        $nameOfDay = date('l',strtotime($today));
        // echo $nameOfDay;
        // echo $url[1];

        // If it's not Monday
        if($nameOfDay !== "Monday"){
            // (format : d-m-y)
            $monday = date('d-m-Y',strtotime('previous monday',strtotime($today)));
            // $monday = getdate(strtotime("last Monday"));
            // echo("Monday : ".$monday. " ");
           
        
            //Getting all days in array
            $theWeek = currentWeek($monday);

            return $error = json_encode([
                'status' => 'ok','datecourante' => $monday,'message' => getHisPlanning($url[1],$theWeek)
            ]);
        }
        else{
            // If already a monday is selected
            echo("ELSE today : ". $today);
            $theWeek = currentWeek($today);

            
            return $error = json_encode([
                'status' => 'ok','datecourante' => $today,$theWeek)
            ]);
        }
    }

下面的函数在getUserPlanning中用于获取数组中的天数

 function currentWeek($currentDate){
        // Get all weekdays in array
        $monday = strtotime($currentDate);
        $tuesday = strtotime("next Tuesday",strtotime($currentDate));
        $wednesday = strtotime("next Wednesday",strtotime($currentDate));
        $thursday = strtotime("next Thursday",strtotime($currentDate));
        $friday = strtotime("next Friday",strtotime($currentDate));
        $saturday = strtotime("next Saturday",strtotime($currentDate));
        $sunday = strtotime("next Sunday",strtotime($currentDate));

        // echo("Mardi".$tuesday);
        // echo("Mercredi".$wednesday);
        $week = [$monday,$tuesday,$wednesday,$thursday,$friday,$saturday,$sunday];
        return $week;
    }

最后一个功能是data.message应该返回的内容

    function getHisPlanning($employe,$week){
        // Used to return the planning
        $weekPlanning = array(); 
        $connexion = connexion();
        echo("employé : " . $employe . " ");

        // Retrieving planning of each day for an employee
        for($i = 0; $i < 7; $i++){
            // creating format y-m-d
            // echo($week[$i]);
            $dateCurrent = getdate($week[$i]);
            // echo($dateCurrent);
            $day = $dateCurrent['mday'];
            $month = $dateCurrent['mon'];
            $year = $dateCurrent['year'];

            // used in order to fetch date in db
            $jour = $year. '-' . $month . '-' . $day;
            echo("Jour : " . $jour . " ");

            // $request = $connexion->prepare("SELECT * FROM plannings WHERE id_employe = ? AND date_planning = ? ORDER BY id_plage");
            $request = $connexion->prepare("SELECT * FROM plannings INNER JOIN boutiques ON plannings.id_boutique = boutiques.id_boutique INNER JOIN affectations ON plannings.id_affectation = affectations.id_affectation WHERE id_employe = ? AND date_planning = ? ORDER BY id_plage");
            $request->execute(array($employe,$jour));

            // Stock planning of employee for each day
            $result = $request->fetchAll(PDO::FETCH_ASSOC);

            // Stock planning of week
            array_push($weekPlanning,$result);
        }
        return $weekPlanning;
    }

这是Ajax调用，用户是一个ID，并且selectedDate选择日期

function AjaxCall(selectedDate,user){
    $.ajax({
        method: 'get',url : 'http://planning-ilm.atwebpages.com/userPlanning/'+ user + '/' + selectedDate,dataType : 'json',success: function(data){
            // let semaine = document.createTextNode('Sem du ' + data.datecourante.mday + '/' + data.datecourante.mon + '/' + data.datecourante.year);
            // $("#sem")[0].appendChild(semaine);
            showplannings(data.datecourante,data.message);
        }
    })
}

这是表演计划电话

$(function() {
  $("#calendrier").datepicker({
    dateFormat: "yy-mm-dd",onSelect: function(selectedDate) {
      //show selected on screen
      $('.selectedDate').text('Selected Date: ' + selectedDate)

      //call ajax on selected date
      myAjaxCall(user,selectedDate)
    }
  })
  //set date as current by default
  $("#calendrier").datepicker('setDate',new Date());

  //get date in a variable
  let currentDate = $('#calendrier').datepicker('getDate');
  let currentDateFormat = $.datepicker.formatDate("yy-mm-dd",currentDate);

  //Show date on screen
  $('.selectedDate').text('Selected Date: ' + currentDateFormat)

  //Call ajax on load
  myAjaxCall(user,currentDateFormat) //pass current date to ajax function
});

function myAjaxCall(user,selectedDate) {
  $.ajax({
    method: 'get',url: 'http://planning-ilm.atwebpages.com/userPlanning/' + '/' + user + '/' + selectedDate,dataType: 'json',success: function(data) {
      //let semaine = document.createTextNode('Sem du ' + data.datecourante.mday + '/' + data.datecourante.mon + '/' + data.datecourante.year);
      //$("#sem")[0].appendChild(semaine);
      showplannings(data.datecourante,data.message);
                                                
    }
  })
}
,

您可以将ajax呼叫包装在function中，然后在每次选择 new 日期的call中使用。

要在屏幕上显示current或selected日期，您可以使用.text功能显示日期。一旦加载了日期页面，就会调用ajax，并且将从date到fetch的当前PHP数据。

最后，一旦您执行ajax调用，就可以在PHP函数中相应地显示success ajax数据。

编辑：您也可以将selecteddate传递给此函数=> showplannings(data.datecourante,data.message,selectedDate);在此函数中添加第三个argument并收到此{{1 }}参数放在您的third函数中，并做任何必要的事情。

实时演示： 

showplannings
$(function() {
  $("#calendrier").datepicker({
    dateFormat: "yy-mm-dd",onSelect: function(selectedDate) {
      //show selected on screen
      $('.selectedDate').text('Selected Date: ' + selectedDate)

      //call ajax on selected date
      myAjaxCall(selectedDate)
    }
  })
  //set date as current by default
  $("#calendrier").datepicker('setDate',currentDate);

  //Show date on screen
  $('.selectedDate').text('Selected Date: ' + currentDateFormat)

  //Call ajax on load
  myAjaxCall(currentDateFormat) //pass current date to ajax function
});

//Ajax call
function myAjaxCall(selectedDate) {
  $.ajax({
    method: 'get',url: 'http://planning-ilm.atwebpages.com/userPlanning/' + selectedDate,success: function(data) {
      //let semaine = document.createTextNode('Sem du ' + data.datecourante.mday + '/' + data.datecourante.mon + '/' + data.datecourante.year);
      //$("#sem")[0].appendChild(semaine);
      //showplannings(data.datecourante,selectedDate);
                                                 //....^ - pass selected
    }
  })
}

javascriptjqueryjquery-ui-datepicker