日期选择器(.js)不在HTML编辑器中工作但在小提琴中工作

时间:2016-10-13 04:21:55

标签: javascript jquery html css

这是fiddle中的工作格式  以下是我在我的演示站点中使用的代码我创建了一个新的文件夹名称js并在其中放置了datepicker.js。所以我在我的HTML中链接了以下内容。

$(function () {
    $('#departure-date').datepicker({
        numberOfMonths: 2,
        showAnim: "fold",
        showButtonPanel: true,
        onSelect: (function (date) {
            setTimeout(function () {
                $('#return-date').datepicker('show');
            }, 300)
            $(this).val($(this).datepicker('getDate').toLocaleDateString());
        })
    });

    $('#return-date').datepicker({
        numberOfMonths: 2,
        showAnim: "fold",
        showButtonPanel: true,
        onSelect: (function (date) {
            $(this).val($(this).datepicker('getDate').toLocaleDateString());
        })
    });
});

我的datapicker.js代码是

<input  id="departure-date" type="text" placeholder="Depart Date" >
<input type="text" id="return-date" placeholder="return Date">

我的html代码是

"George von Trapp"

但是当我按下上面的按钮时,没有调用.js。请帮忙

3 个答案:

答案 0 :(得分:3)

您需要包含一个jQuery版本。下载最新版本并将其放在您的js文件夹中,并像为datepicker.js一样链接它,或者像这样直接包含它

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

如果这不起作用,请尝试

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

我不确定你的单个datepicker.js是否有错误,但如果它确实尝试了包含它的jquery-ui js。

我测试了它包括上面的2个js源,它工作正常。

如果指向jquery站点js的直接链接不起作用,那么您页面上的另一个问题就是我们没有显示。

答案 1 :(得分:2)

您的代码在我的本地计算机上运行得非常好。 我只是使用了来自

的jQuery和jQueryUI CDN路径
  

Google开发者网站   Link

您的代码:

<!DOCTYPE html>
<html>
<head>
    <title>JS Datepicker</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<input  id="departure-date" type="text" placeholder="Depart Date" >
<input type="text" id="return-date" placeholder="return Date">
<script type="text/javascript">
    $(function () {
    $('#departure-date').datepicker({
        numberOfMonths: 2,
        showAnim: "fold",
        showButtonPanel: true,
        onSelect: (function (date) {
            setTimeout(function () {
                $('#return-date').datepicker('show');
            }, 300)
            $(this).val($(this).datepicker('getDate').toLocaleDateString());
        })
    });

    $('#return-date').datepicker({
        numberOfMonths: 2,
        showAnim: "fold",
        showButtonPanel: true,
        onSelect: (function (date) {
            $(this).val($(this).datepicker('getDate').toLocaleDateString());
        })
    });
});
</script>
</body>
</html>

Departure Date Return Date

答案 2 :(得分:1)

如果你错过了放置jquery的位置它就行不通。希望以下代码可以帮助您。

&#13;
&#13;
[HttpPost]
public ActionResult Create(TeacherViewModel viewModel)
{
    if (!ModelState.IsValid)
    {
        return View("Create", viewModel);
    }

    var teacher = new Teacher
    {
        Identifier = viewModel.Identifier,
        Name = viewModel.Name,
        Surname = viewModel.Surname,
        Email = viewModel.Email,
        PhoneNumber = viewModel.PhoneNumber,
        Ville = viewModel.Ville,
        Block = viewModel.Block,
        Password = viewModel.Password
    };

    _context.Teachers.Add(teacher);
    _context.SaveChanges();

    // For send an email 
    string mailfrom = "sender mail", mailTo = teacher.Email, //"receiver mail",
            subject = "Subject Line", filepath = "", htmlbody = "";

    filepath = Server.MapPath("~/path_for_email_template/template.html");
    htmlbody = System.IO.File.ReadAllText(filepath);
    /*  you can replace some dynamic contents from body as per your requirements like as name, email but for that you need to  all the variable with unique pattern so you can easily replace them, ex: %name% */
    htmlbody = htmlbody.Replace("%name%", teacher.Name)
                .Replace("%password%", teacher.Password)  // as you want to send a password inside mail.
                .Replace("%email%", teacher.Email);

    try
    {
        // you need to include
        // using System.Net;
        // using System.Net.Mail;
        SmtpClient client = new SmtpClient("host");
        client.Port = 25;// int port number
        client.Credentials = new NetworkCredential("Sender_UserName", "Sender_password");
        client.EnableSsl = false;//true if ssl required

        MailMessage msg = new MailMessage();
        msg.To.Add(mailTo);
        msg.From = new MailAddress(mailfrom.Trim());
        msg.Subject = subject;
        msg.Body = htmlbody;
        msg.IsBodyHtml = true;

        client.Send(msg);

    }
    catch (SmtpException ex) { throw (ex); }

    return RedireToAction("Index", "Home");
}
&#13;
$(function () {
    $('#departure-date').datepicker({
        numberOfMonths: 2,
        showAnim: "fold",
        showButtonPanel: true,
        onSelect: (function (date) {
            setTimeout(function () {
                $('#return-date').datepicker('show');
            }, 300)
            $(this).val($(this).datepicker('getDate').toLocaleDateString());
        })
    });

    $('#return-date').datepicker({
        numberOfMonths: 2,
        showAnim: "fold",
        showButtonPanel: true,
        onSelect: (function (date) {
            $(this).val($(this).datepicker('getDate').toLocaleDateString());
        })
    });
});
&#13;
&#13;
&#13;