datetimepicker无法正常工作

Question

I have created one custom control for datetime picker in one control i have given three mode datetimepicker,timepicker and datepicker.For which i have created one property called CalenderMode of type enum which stores these three modes and which value i am given to the property according to that i am changing the datetimepicker,if i given timepicker then my timepicker is enabled,if i give datepicker then date picker is enabled and if i give datetimepicker then my datetimepicker is enabled this i am handling in jquery.

For validation of these i am given format from c# and that format i am using in client side but now problem is if my timepicker or date picker is enabled and from timepicker i am selecting time but in text box it showing date time this is same for the date picker also there also it is showing date time.

Here i am not understanding what is the issue.

My code of jquery where i am changing the mode of calender using assigning the value to property is

$(document).ready(function () {
$('.calendercssclass').each(function () {
    var result;
    var value = $(this).closest('.DateControl').find("input[type=hidden][id*='CalenderTypeModeID']").val();
    if (value == "timepicker") {
        $(this).datetimepicker({
            timepicker: true,
            datepicker: false
            //mask: true
        });
    }
    else if (value == "datepicker") {
        $(this).datetimepicker({
            timepicker: false,
            datepicker: true
            // mask: true
        });
    }
    else {
        $(this).datetimepicker({
            //mask: true
        });
    }
});

});

To give the format for validation i am using following code

function ValidateFormatOfDatecontrol(sender, args) {
debugger;
args.IsValid = true;
var format;
$('.calendercssclass').each(function () {
    var result;
    var value = $(this).closest('.DateControl').find("input[type=hidden][id*='CalenderTypeModeID']").val();
    if (value == "timepicker") {
        format = $(this).closest('.DateControl').find("input[type=hidden][id*='ClientTimeFormatID']").val();

        var answer = $(this).val();
        if (answer != '') {
            //Moment.js inbuilt function for validating the date format . 
            args.IsValid = moment(answer, format, true).isValid();


        }
    }
    else if (value == "datepicker") {
        format = $(this).closest('.DateControl').find("input[type=hidden][id*='ClientDateFormatID']").val();
        var answer = $(this).val();

        if (answer != '') {
            //Moment.js inbuilt function for validating the date format . 
            args.IsValid = moment(answer, format, true).isValid();
        }
    }
    else if (value == "datetimepicker") {
        format = $(this).closest('.DateControl').find("input[type=hidden][id*='ClientDateTimeFormatID']").val();
        var answer = $(this).val();

        if (answer != '') {
            //Moment.js inbuilt function for validating the date format . 
            args.IsValid = moment(answer, format, true).isValid();


        }
    }
});

}

server side code for giving format for validation is

 this.clientDateFormat.Value = "MM/DD/YYYY";
 this.clientDateTimeFormat.Value = "mm/dd/yyyy H:i A";
 this.clientTimeFormat.Value = "H:i";

Screenshot for issue is

Can anybody help me for this?

Answer 1

Here You are using Rain Jquery so fromat of Rain for the time is different from the moment what you are using for the validation so following is the format for both

Rain Jquery Time Format : h:i A Moment Time Format : h:mm A

Following is the sample code

Script

 $(document).ready(function () { 
    $(".date").datetimepicker({
        format: 'h:i A',            
        datepicker:false
    });

    $(".date").change(function () {
        var format = "h:mm A";
        $('#message').text(moment($(".date").val(), format, true).isValid());
    });

    });

Markup

<div>
    <asp:TextBox ID="TextBox1" runat="server" CssClass="date"></asp:TextBox>

    <asp:Label ID="message" runat="server" CssClass="message"></asp:Label>


</div>